Like most CMSs, Expression Engine generates a series of crops from one large ‘master’ file. So rather than one image and it’s double size retina counterpart, we have to think in terms of many file crops and the context of the image.
The script became even more useful because womanshealth.co.uk is a responsive site; so images need to be of varying size depending on the user’s browser window. I eventually added some re-size detection, so even if a browser window started tiny, forcing a thumbnail image to download, you wouldn’t be stuck with a nasty pixelated stretched thumbnail when the window is maximised.
A typical URL from the Expression Engine image plugin we used would look like this…
There is some specific code in my script to parse this pattern; you’ll have to amend this to match your CMS. Also, a crop object is defined (crops) – make sure you change that to match the crops you’re using in your CMS.
To work the script runs at the bottom of the page just before