Email iconarrow-down-circleGroup 8Path 3arrow-rightGroup 4Combined Shapearrow-rightGroup 4Combined ShapeUntitled 2Untitled 2Path 3ozFill 166crosscupcake-icondribbble iconGroupPage 1GitHamburgerPage 1Page 1LinkedInOval 1Page 1Email iconphone iconPodcast ctaPodcast ctaPodcastpushpinblog icon copy 2 + Bitmap Copy 2Fill 1medal copy 3Group 7twitter icontwitter iconPage 1

As part of our website redesign, which has acted as the jump-off for our new content management system, JellyBean CMS we have put together a bundle that aims to handle all the media requirements for a project. This post covers our approach to handling images in JellyBean CMS because we wanted to ensure from the outset the CMS provided adequate support (and optimisation) for creating mobile-friendly websites.

For content managers

This bundle aims to provide an easy to use interface for users to manage images and associate those images with any piece of content within the CMS. To do this we are using the brilliant plupload widget from the creators of the well known WYSIWYG editor TinyMCE that gives a great experience across browsers & platforms.

For designers

Symfony makes it very easy to expose semantic configuration for each package. In this case, making it really easy to define the image sizes available in the application and how they are generated with options for cropping, output mime-type, resizing etc. Additionally there is full control for how mobile presets are generated for each image and what determines they will be displayed. The Twig extension included in the bundle makes it easy to choose the image type that will be served, leveraging the packages selection of mobile optimised images where appropriate. There is even a little command line tool to regenerate all your presets should you change the size presets (although I probably wouldn’t use it if you have as many images as these guys

For developers

Thanks to integration with the Imagine package this functionality can be implemented agnostic of the image processing library available (currently supporting GD, Imagick and Gmagick). Using Symfony’s dependency injection container and configuration it is trivial to swap out the PHP classes handling finding and serving the media files, or change the image uploader if plupload doesn’t tickle your fancy. The Doctrine image entity in the package can be easily associated with any of your models, and the custom form type makes it easy to implement the plupload widget in your templates.

For visitors

Perhaps most importantly this bundle has been developed with the user, and their context in mind. Serving images to mobile devices has proven tricky for many developers/designers – if the challenges raised by user context (speed of data connection), screen size/resolution, and device power weren’t enough, throw art direction from designers, user generated content, and the ideas surrounding content parity for mobile users into the mix.

In respect to designing websites for multi screen sizes, it’s really bloody difficult!

David Bushell, The Mobile Fallacy

Our solution uses a cookie set in javascript that measures the user’s screen resolution. The file manager component of this package then compares this resolution with images that have been optimised for a defined screen resolution bracket – and serves an appropriately optimised image. Race conditions have been cited as a flaw in this method, however we are firm believers in the mobile first methodology and if there is no cookie present, then the bundle will serve an image optimised for mobile (also configurable).

I don’t think there has yet been a solution that addresses any of these challenges in entirety, however this bundle combines some of the approaches, in a manner that is hopefully the most flexible, as everything in the template is optional. We have aimed to avoid any of the maintainability nightmares faced by manually maintaining image presets, or defining multiple presets for JavaScript based image replacement as suggested by other solutions. Images are selected and served by the server, based on the request. The benefit of this, is that the optimised images are already there, the criteria by which they are selected (we could use a user-agent library for example) is easily changed.

Check out some of these links for some of the background behind responsive image solutions, some of which have inspired this bundle.

Also take a look at some of our writing in mobile development and responsive web design