Using Wordpress with Foundation Interchange
I recently created a blog / portfolio website for a friend based around Wordpress and the fantastic Foundation front-end responsive framework. Foundation comes with with a excellent set of components and utilities to help you build a responsive site that works across all devices. One of my favorites is called Interchange, and is how Foundation handles responsive images.
The way you handle your images on a responsive build is key to its success. You don’t want huge images loading on a mobile device as it is a waste of bandwidth. On the opposite side of the spectrum you don’t want really small images loading on desktop as they will look very pixelated and ruin the design. Interchange allows you to get the best of both worlds. It even comes with a no JavaScript fallback.
1
2
<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/medium-image.jpg, (medium)], [/path/to/large-image.jpg, (large)]">
<noscript><img src="/path/to/default.jpg"></noscript>
The way it works is fairly self-explanatory. On load the JavaScript looks at the current device width (and pixel density), and swaps out the image source for the correct one listed in the data-interchange data attribute.
When it come to using Interchange with Wordpress I wanted to make it as simple as possible for the user to upload images. The key was to make Wordpress do the work of creating the different sizes and outputting the required HTML onto the page. To do this I hooked into the native gallery functionality Wordpress comes bundled with. It allows a user to assign a set of media to a specific post, which is then displayed in a gallery on the page.
Below you will see a breakdown of what I added to the theme (mainly to the functions.php file), and a brief explanation of what is going on. Note: The <?php ?> tags have been added to fix the syntax highlighting in Jekyll (startinline option didn’t work), you don’t need to include them.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// functions.php
<?php
if(function_exists( 'add_theme_support')) {
// enable thumbnail support for the portfolio post type
add_theme_support('post-thumbnails', array( 'portfolio' ));
// set our required image sizes to be created (name, width, height)
// note the height is 99999 as we don't care what it comes out as, only the width is important (aspect ratio will be preserved)
add_image_size( 'responsive-large', 1200, 99999);
add_image_size( 'responsive-medium', 1024, 99999);
add_image_size( 'responsive-small', 500, 9999);
}
// not required, but I removed the default gallery to save confusion
remove_shortcode('gallery', 'gallery_shortcode');
// stop default gallery styles from being rendered on use
add_filter( 'use_default_gallery_style', false );
// create a new shortcode for our custom gallery
add_shortcode('custom-gallery', 'custom_gallery');
?>
Now we have the basics setup for the theme, we want to create a function that renders the correct HTML for use with Foundation Interchange.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// functions.php
<?php
// generate a single responsive image tag based off a specific image ID
function generate_responsive_image_tag($image_id){
// grab the image alt tag
$alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
// grab the src for each of the image sizes
$size = 'responsive-small';
$small = wp_get_attachment_image_src($image_id, $size);
$size = 'responsive-medium';
$med = wp_get_attachment_image_src($image_id, $size);
$size = 'responsive-large';
$lrg = wp_get_attachment_image_src($image_id, $size);
// create the final image tag with queries (and noscript fallback)
$html = '<img class="responsive-image" ';
$html .= 'data-interchange="';
$html .= '['.$small[0].', (default)],';
$html .= '['.$med[0].', (medium)],';
$html .= '['.$lrg[0].', (large)],';
$html .= '" alt="'.$alt.'">';
$html .= '<noscript><img class="responsive-image" src="'.$small[0].'" alt="'.$alt.'"></noscript>';
// return the final HTML
return $html;
}
?>
Time to create the HTML that will be rendered when using the custom gallery shortcode [custom-gallery].
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// functions.php
<?php
function custom_gallery($attr){
$post = get_post();
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post ? $post->ID : 0,
'size' => 'responsive-small'
), $attr, 'custom-gallery'));
// get the image ID
$id = intval($id);
// get the post thumbnail ID
$post_thumbnail_id = get_post_thumbnail_id();
// get the attachments in the post
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
// you will need to customise this surrounding HTML depending on the layout required
$output = "<div class='row'>";
// using the Foundation grid for a simple stacked
$output .= "<div class='small-12 columns small-centered'>";
// loop through each image ID generating the required HTML
foreach ( $attachments as $id => $attachment ) {
// skip if we are looking at the post thumbnail image
if ($id == $post_thumbnail_id)
continue; // Don't show the thumbnail
$imagehtml = generate_responsive_image_tag($id);
$output .= "$imagehtml";
}
// close the tags and return the gallery HTML
$output .= "</div>";
$output .= "</div>";
return $output;
}
?>
The last thing we need to do is include the gallery in the page. Now we can either do this manually using the [custom-gallery] shortcode; or in my case I wanted every portfolio post to automatically add the gallery of images associated with it.
1
2
// single-portfolio.php
<?php echo do_shortcode('[custom-gallery]'); ?>
And that’s it. On a portfolio page you can now upload a set of images (using the ‘Add Media’ button) and Wordpress will create the different sizes and output the correct HTML for Interchange automatically. Just make sure you are uploading the highest resolution image possible as you don’t want Wordpress to be up-scaling small images.
One last addition I added was the ability to add responsive images in a standard blog post. Again you insert an image into a standard blog post and the responsive Interchange compatible HTML is returned to the editor. Responsive images all over the place!
1
2
3
4
5
6
7
8
// functions.php
<?php
function interchange_image($html, $id, $caption, $title, $align, $url, $size) {
$html = generate_responsive_image_tag($id);
return $html;
}
add_filter( 'image_send_to_editor', 'interchange_image', 10, 9 );
?>
I hope you found this little bit of Wordpress / Foundation integration helpful. If there are any improvements that can be made feel free to contact me via the contact form.
