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.
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 http://codeascraft.etsy.com/2010/07/09/batch-processing-millions-of-images/)
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.
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!
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