dougmcdonald.co.uk

Intro

Sencha recently bought out and incorperated into its arsenal of 'io' products the excellent cloud based image tool 'TinySrc'.

TinySrc and now Sencha.io Src allows a developer to provide a URL of an image, a collection of parameters and output a dynamically generated image to the browser. It is often used as a mechanism to allow web developers to upload a single high quality image and serve smaller, lower file size images to mobile devices, but it has many other applications, one of the more simple uses is explored in this article

This article details how to use Sencha.io Src to display a Wordpress 'featured image' to simplify the process any content editor would need to perform in order to display an image whilst keeping to a design.

The problem

When using wordpress, the freedom given to the content editor(s) is brilliant, but what if you want to maintain a specific template/look to your featured images without forcing the editor to stick to a particular aspect ratio? or to maintain thumbnail images to ensure our pages load quickly?

The content editor may have limited knowledge or experience with image manipulation and probably doesn't want to the hassle of having to crop each of their images to a certain width/height. Perhaps they started with a huge 8MB bitmap and don't know how to save it as a lower quality compressed format?

In this example, we begin with a simple Wordpress template snippet which will output out featured image but we also want to ensure the width fits our design. As well as this fixed width, we want to allow the editor(s) the option to upload an image of any size in terms of physical filesize, pixel dimensions and aspect ratio without disrupting our template. Fourtunately Sencha.io Src can do all of this for us!

Sencha.io Src will take an uploaded image from wordpress, scale it according to specific parameters in our template, reduce the filesize and maintain the aspect ratio in one fell swoop, below we find out how.

Example

The image below shows an example 'post listing' page where the featured images are of differing sizes, ratios and formats, yet the output is consistent with the theme.

This is achieved through defining a specific width on the featured image in the wordpress template and passing this to the Sencha.io Src API.

The API will reduce our images sizes and constrain the proportions to give us a consistent output no matter how disperate the source images may appear. This is a godsend when handing over control to editors and hoping to hang onto some form of creative control!

Wordpress Template

The only aspect which is important regararding the wordpress template is to ensure that the image URL is prepended with the Sencha.io Src URL to give the desired scale/ratio you desire.

In the example below, the design I was working with required a fixed width of 150 pixels so the code used was simply to define a width parameter on the Sencha.io Src URL. All additional code has been removed, but this snippet should be placed inside 'the loop' to ensure the variables are available

<?php
  $url = wp_get_attachment_url(
    get_post_thumbnail_id($post->ID));						
  $senchasrcurl = "http://src.sencha.io/150/" . $url;		
  print("<img src=\"" .$senchasrcurl. "\" 
    alt=\"article featured image\"/>");
?>

The Sencha.io Src API offers a wide range of scaling options which can be seen here: http://www.sencha.com/learn/how-to-use-src-sencha-io/. On this occasion, the above Sencha.io Src URL will ensure that any images wider than 150px are reduced down to 150px and any height will be reduced whilst maintaining the aspect ratio. But there is no reason why some of the other options couldn't be used to give a fixed height with scaled down width, the options to choose will depend on your design requirements.

Performance

One benefit of the Sencha.io Src service is that it offers the ability to downsize images on the fly and remove the need to maintain several versions of the same file.

The screenshot below shows two requests to the same image file, firstly the original image at 332x305px @ 27.5Kb and then the subsiquent request to the Sencha.io Src service with a 150px width applied.

Note that the second request returns the same image, scaled down to 150x138px but also reduced from 27.5Kb to 5.6Kb, giving a really neat way to allow clients to upload large images for use as thumbnails, and have the service prepare them for effecive use as thumbnails

Conclusion

The Sencha.io Src cloud service has a really wide range of sizing options which can suit almost any need and the reduction in file sizes can offer increased page performance whilst removing the need to maintain several versions of each file, offering a clean and simple way to utilise your site resources in a variety of situations with the minimum of hassle.

We've seen one very simple usage of Sencha.io Src in combination with Wordpress but the possibilities are almost limitless when you need flexiblity in displaying your images without the overhead of maintenance.