Month: January 2016

Foundation 6 + Block Grid + WordPress Gallery

If you are using foundation i’m sure you love block grids, but wordpress galleries do their own HTML. No worries, throw this snippet in your functions.php (or wherever it belongs in your theme’s structure) and the markup will change to a blockgrid instead. This works with Foundation 6 … for Foundation 5 you’ll need to change the output to UL and LIs instead of row/column DIVs.

Easy. You are welcome!

function blockgrid_gallery( $output, $atts, $instance ) {
	$atts = shortcode_atts( array(
		'order'   => 'ASC',
		'orderby' => 'menu_order ID',
		'id'      => get_the_ID(),
		'columns' => 3,
		'size'    => 'thumbnail',
		'include' => '',
		'exclude' => '',
		), $atts );

	if ( ! empty( $atts['include'] ) ) {
		$_attachments = get_posts( array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

		$attachments = array();
		foreach ( $_attachments as $key => $val ) {
			$attachments[$val->ID] = $_attachments[$key];
		}
	} elseif ( ! empty( $atts['exclude'] ) ) {
		$attachments = get_children( array( 'post_parent' => intval( $atts[ 'id' ] ), 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
	} else {
		$attachments = get_children( array( 'post_parent' => intval( $atts[ 'id' ] ), 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
	}

	if ( empty( $attachments ) )
		return '';

	$output = '<div class="row small-up-2 medium-up-' . intval( $atts[ 'columns' ] ) . '" >';

	foreach ( $attachments as $id => $attachment ) {
		$img        = wp_get_attachment_image_url( $id, $atts[ 'size' ] );
		$img_srcset = wp_get_attachment_image_srcset( $id, $atts[ 'size' ] );		
		$img_full   = wp_get_attachment_image_url( $id, 'full' );

		$caption = ( ! $attachment->post_excerpt ) ? '' : ' data-caption="' . esc_attr( $attachment->post_excerpt ) . '" ';

		$output .= '<div class="column">'
			. '<a href="' . esc_url( $img_full ) . '">'
			. '<img src="' . esc_url( $img ) . '" ' . $caption . ' class="th" alt="' . esc_attr( $attachment->title ) . '"  srcset="' . esc_attr( $img_srcset ) . '" sizes="(max-width: 50em) 87vw, 680px" />'
			. '</a></div>';
	}

	$output .= '</div>';

	return $output;
}
add_filter( 'post_gallery', 'blockgrid_gallery', 10, 3 );

function blockgrid_gallery( $output, $atts, $instance ) {

$atts = shortcode_atts( array(

'order' => 'ASC',

'orderby' => 'menu_order ID',

'id' => get_the_ID(),

'columns' => 3,

'size' => 'thumbnail',

'include' => '',

'exclude' => '',

), $atts );

if ( ! empty( $atts['include'] ) ) {

$_attachments = get_posts( array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

$attachments = array();

foreach ( $_attachments as $key => $val ) {

$attachments[$val->ID] = $_attachments[$key];

}

} elseif ( ! empty( $atts['exclude'] ) ) {

$attachments = get_children( array( 'post_parent' => intval( $atts[ 'id' ] ), 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

} else {

$attachments = get_children( array( 'post_parent' => intval( $atts[ 'id' ] ), 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

}

if ( empty( $attachments ) )

return '';

$output = '<div class="row small-up-2 medium-up-' . intval( $atts[ 'columns' ] ) . '" >';

foreach ( $attachments as $id => $attachment ) {

$img = wp_get_attachment_image_url( $id, $atts[ 'size' ] );

$img_srcset = wp_get_attachment_image_srcset( $id, $atts[ 'size' ] );

$img_full = wp_get_attachment_image_url( $id, 'full' );

$caption = ( ! $attachment->post_excerpt ) ? '' : ' data-caption="' . esc_attr( $attachment->post_excerpt ) . '" ';

$output .= '<div class="column">'

. '<a href="' . esc_url( $img_full ) . '">'

. '<img src="' . esc_url( $img ) . '" ' . $caption . ' class="th" alt="' . esc_attr( $attachment->title ) . '" srcset="' . esc_attr( $img_srcset ) . '" sizes="(max-width: 50em) 87vw, 680px" />'

. '</a></div>';

}

$output .= '</div>';

return $output;

}

add_filter( 'post_gallery', 'blockgrid_gallery', 10, 3 );

Killer steak sauce (pseudo chimichurri)

Every steak can use this killer recipe! which in turn, it is not a true recipe, but more of a combination of flavors that you can adjust to your own taste. It goes especially well with flank steak or skirt steak. Chicken, pork, and fish also love this sauce.

Parsley or Cilantro (aka Coriander) or both. Lots of it!
Garlic. 2 or 3 cloves.
Cumin powder (or seeds). About half a teaspoon.
Red Pepper flakes.
Olive oil. A lot (think pesto)
Salt and Pepper
Optional: white vinegar

Warm up your olive oil and put the pepper flakes and cumin. Just warm up, so the oil gets infused with the spiciness and flavor of the ingredients. DO NOT FRY THEM … just warm it up. Once happy with the flavor, just leave it to cool down on the side. ( Experiment: put garlic on the oil as well, until soft. Cooked garlic tastes sweet )

In the meantime, chop the parsley/cilantro and garlic real small. Mash them together. Add salt and pepper to taste. When the oil is cool (you don’t want to cook the parsley/cilantro) mix it all together. Whisk it. Eat it! It is going to be AWESOME! I promise!

Static classes on WordPress plugins

If you have a wordpress plugin, more than likely you are using add_action and/or add_filter. No problem, until you get this error:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, cannot access self:: when no class scope is active in /home/wpcom/public_html/wp-includes/plugin.php on line .........

1	Warning: call_user_func_array() expects parameter 1 to be a valid callback, cannot access self:: when no class scope is active in /home/wpcom/public_html/wp-includes/plugin.php on line .........

One of the annoyances of wordpress is that tracking bugs when in actions or filters can be a bit of a hassle, but you don’t know where the error actually originated, but with a bit of grep-ing of searching you can find the issue. With the error above however, what’s going on is not so evident. Consider the following plugin that does nothing:

final class doNothing {
	static $emptyString = '';

	static function init() {
		add_action( 'wp_footer', array( self, 'output' ) );
	}

	static function output() {
		// Don't echo anything
		echo self::$emptyString;
	}
}
doNothing::init();

final class doNothing {

static $emptyString = '';

static function init() {

add_action( 'wp_footer', array( self, 'output' ) );

}

static function output() {

// Don't echo anything

echo self::$emptyString;

}

doNothing::init();

Nothing seems wrong here, however, it throws the warning above. The right way of doing this is:

final class doNothing {

	static $emptyString = '';

	static function init() {
		add_action( 'wp_footer', array( __CLASS__, 'output' ) );
	}

	static function output() {
		// Don't echo anything
		echo self::$emptyString;
	}
}
doNothing::init();

final class doNothing {

static $emptyString = '';

static function init() {

add_action( 'wp_footer', array( __CLASS__, 'output' ) );

}

static function output() {

// Don't echo anything

echo self::$emptyString;

}

doNothing::init();

The key being __CLASS__ instead of self on the add_action line. When using static classes add_action and add_filter don’t like self however, if your class is not static, therefore, instantiated you can use add_action( $this, 'function' ) no problem. Seems odd, but that’s how it is.

Layers on Canvas

TLDR;

Can’t be done natively, use this instead: layeredCanvas

HTML5 Canvas doesn’t implement a layers mechanism. In order to implement this you can do it in 2 different ways:

Multiple canvas elements approach

Think of a layer as an individual canvas and then absolute position one on top of the other. Then to lay it out just wrap on a div with position relative:

<div style="width: 300px; height: 300px; position: relative">
	<canvas id="layer1" width="300" height="300" style="position: absolute;"></canvas>
	<canvas id="layer2" width="300" height="300" style="position: absolute;"></canvas>
	<canvas id="layer3" width="300" height="300" style="position: absolute;"></canvas>
</div>
<script>
function layer1() {
	canvas = document.getElementById( "layer1" );
	ctx = canvas.getContext( '2d' );

	ctx.fillStyle = "#E5E059";
	ctx.fillRect( 50, 50, 150, 150 );
}
function layer2() {
	canvas = document.getElementById( "layer2" );
	ctx = canvas.getContext( '2d' );

	ctx.beginPath();
	ctx.fillStyle = "#88A09E";
	ctx.arc( 275, 275, 150, 0, 2 * Math.PI );
	ctx.fill();
}
function layer3() {
	canvas = document.getElementById( "layer3" );
	ctx = canvas.getContext( '2d' );

	ctx.fillStyle = "#C70039";
	ctx.beginPath();
	ctx.moveTo(100, 100);
	ctx.lineTo(100, 300);
	ctx.lineTo(300, 300);
	ctx.closePath();
	ctx.fill();
}

layer1();
layer2();
layer3();
</script>

</div>

function layer1() {

canvas = document.getElementById( "layer1" );

ctx = canvas.getContext( '2d' );

ctx.fillStyle = "#E5E059";

ctx.fillRect( 50, 50, 150, 150 );

}

function layer2() {

canvas = document.getElementById( "layer2" );

ctx = canvas.getContext( '2d' );

ctx.beginPath();

ctx.fillStyle = "#88A09E";

ctx.arc( 275, 275, 150, 0, 2 * Math.PI );

ctx.fill();

}

function layer3() {

canvas = document.getElementById( "layer3" );

ctx = canvas.getContext( '2d' );

ctx.fillStyle = "#C70039";

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(100, 300);

ctx.lineTo(300, 300);

ctx.closePath();

ctx.fill();

}

layer1();

layer2();

layer3();

</script>

What’s crappy about this is if you want to save the image you have to do a screenshot and then cut it, or you can only save one canvas element at a time.

Single canvas element approach

Natively, there is no way of doing this, but with a little bit of abstraction, it isn’t a problem. Think of a layer as a function, now you call the functions in order and you are mostly layered:

<canvas id="layeredCanvas" width="300" height="300"></canvas>
<script>
function layer1( ctx ) {
	ctx.fillStyle = "#E5E059";
	ctx.fillRect( 50, 50, 150, 150 );
}
function layer2( ctx ) {
	ctx.beginPath();
	ctx.fillStyle = "#88A09E";
	ctx.arc( 275, 275, 150, 0, 2 * Math.PI );
	ctx.fill();
}
function layer3( ctx ) {
	ctx.fillStyle = "#C70039";
	ctx.beginPath();
	ctx.moveTo(100, 100);
	ctx.lineTo(100, 300);
	ctx.lineTo(300, 300);
	ctx.closePath();
	ctx.fill();
}

canvas = document.getElementById( "layeredCanvas" );
ctx2d = canvas.getContext( '2d' );

layer1( ctx2d );
layer2( ctx2d );
layer3( ctx2d );

</script>

function layer1( ctx ) {

ctx.fillStyle = "#E5E059";

ctx.fillRect( 50, 50, 150, 150 );

}

function layer2( ctx ) {

ctx.beginPath();

ctx.fillStyle = "#88A09E";

ctx.arc( 275, 275, 150, 0, 2 * Math.PI );

ctx.fill();

}

function layer3( ctx ) {

ctx.fillStyle = "#C70039";

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(100, 300);

ctx.lineTo(300, 300);

ctx.closePath();

ctx.fill();

}

canvas = document.getElementById( "layeredCanvas" );

ctx2d = canvas.getContext( '2d' );

layer1( ctx2d );

layer2( ctx2d );

layer3( ctx2d );

</script>

This is still a bit crappy … lets make it slight more layer-like. We can make an array of functions and run them in sequence. This is much better because now we can remove (or change the index) an element from the array effectively replicating a layer feel:

<canvas id="layeredCanvas" width="300" height="300"></canvas>
<script>
render = function( layers ) {
	for ( var i = 0; i < layers.length; i++ ) {
		layers[ i ]();
	}
};

canvas = document.getElementById( "layeredCanvas" );
ctx = canvas.getContext( '2d' );

layers = [];
layers.push( function() {
	ctx.fillStyle = "#E5E059";
	ctx.fillRect( 50, 50, 150, 150 );
} );

layers.push( function() {
	ctx.beginPath();
	ctx.fillStyle = "#88A09E";
	ctx.arc( 275, 275, 150, 0, 2 * Math.PI );
	ctx.fill();
} );
layers.push( function() {
	ctx.fillStyle = "#C70039";
	ctx.beginPath();
	ctx.moveTo(100, 100);
	ctx.lineTo(100, 300);
	ctx.lineTo(300, 300);
	ctx.closePath();
	ctx.fill();
} );

render( layers );

</script>

render = function( layers ) {

for ( var i = 0; i < layers.length; i++ ) {

layers[ i ]();

}

};

canvas = document.getElementById( "layeredCanvas" );

ctx = canvas.getContext( '2d' );

layers = [];

layers.push( function() {

ctx.fillStyle = "#E5E059";

ctx.fillRect( 50, 50, 150, 150 );

} );

layers.push( function() {

ctx.beginPath();

ctx.fillStyle = "#88A09E";

ctx.arc( 275, 275, 150, 0, 2 * Math.PI );

ctx.fill();

} );

layers.push( function() {

ctx.fillStyle = "#C70039";

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(100, 300);

ctx.lineTo(300, 300);

ctx.closePath();

ctx.fill();

} );

render( layers );

</script>

DONE! Not too bad … using this principle I created a more elegant approach that allows you a couple more neat little things like show/hide … try it, fork it, use it: layeredCanvas

Federico Jacobi

Coder + Designer

Month: January 2016

Foundation 6 + Block Grid + WordPress Gallery

Killer steak sauce (pseudo chimichurri)

Static classes on WordPress plugins

Layers on Canvas

TLDR;

Multiple canvas elements approach

Single canvas element approach

Archives

Categories

Meta