K2 Templating: Responsive Images

Tutorial by Ryuhei Yokokawa
04.28.2015

In this tutorial, we use K2’s different image sizing options as a way to solve the responsive image dillema.  What is the responsive image dillema?  The mobile version of a responsive website has to download the image that would render correctly in a big desktop machine with a 24″ monitor; images are far too large for the mobile.

We currently only really build responsive sites for our clients.  The amount of data loaded into a mobile version of the site is the same even though it could be smaller.  So, in order to solve this problem, we can load the correctly sized image using Javascript.  The easiest solution currently is to use a Javascript plugin called Picturefill.  https://github.com/scottjehl/picturefill

The advantage of using picturefill.js is that once the <picture> element becomes a real spec, it shouldn’t be too hard to modify the template to its specs.  You can read more about the <picture> element here: http://picture.responsiveimages.org/

One of the great features of K2 is that it auto generates different image sizes from a single large image that you provide (at least for the individual items). I’m not sure that this feature was meant to really be used this way, but as far as I can tell, there is no harm in using it this way. To start, you should think about your media queries or break points. If you’re using bootstrap-responsive.css then your breakpoints are at: 

  • 480px
  • 768px
  • 940px
  • 1210px

(got these values from https://gist.github.com/trey/1684818)

Responsive Image Category Settings

To follow these break points, you can set the Small, Medium, Large, and XLarge image setting on the category of your choosing to these values.  So let’s for the sake of ease assume that you’re trying to serve up a single large image as a header image from item.php.
You might replace your image block with something like this (within item.php):

<?php if($this->item->params->get('itemImage') && !empty($this->item->image)): ?>
<div class="item-imageblock">
  <?php $image_root =  JURI::root(true).'/media/k2/items/cache/'.md5('Image'.$this->item->id); ?>

  <span data-picture data-alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">

    <span data-src="<?php echo $image_root.'_S.jpg';?>" data-media="(min-width: 480px)"></span>
    <span data-src="<?php echo $image_root.'_M.jpg';?>" data-media="(min-width: 768px)"></span>
    <span data-src="<?php echo $image_root.'_L.jpg';?>" data-media="(min-width: 940px)"></span>
    <span data-src="<?php echo $image_root.'_XL.jpg';?>" data-media="(min-width: 1210px)"></span>

    <noscript>
      <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>"/>
    </noscript>
  </span>
  <div class="clearfix"></div>
</div>
<?php endif; ?>

Note in regards to the above code (line 3), K2’s image naming convention is created using MD5 hash, pretty nifty!

Obviously, you’ll still have to add the picturefill javascript for the system to work right, but this is the gist of what you might do.

More Tutorials