Retina ready for uploaded images which are cropped

Question

I used the search but couldn't get the right answer for my issue.

I developped a theme, which on the portfolio template take the selected featured image of the different portfolio items and crop them to a fixed size (add_image_size) to make them fit to the general grid. Until here no Problem ;)

But what if I want to make all custom uploaded images "retina ready". I know there are some scripts (retina.js) which search on the server if there are a bigger/@2x version of the image and take them. But if the image is cropped by the add_image_size (Ex: the_post_thumbnail('custom-thumb'); ) function, the double/bigger image will have no effect on it?

Am I right? How can I solve this issue?

Answer 1

Sorry I don't have specific code, but this is how I would do it:

Define two upload sizes, one regular and one double sized for retina using 'add_image_size'.

Use the filter 'wp_handle_upload_prefilter' to add the extension '@2x' to only images of the larger size.

Then use retina .js as normal.

This page as some code using that filter to rename uploaded images, you just need to tailor it to only rename specific uploads: http://wordpressapi.com/2012/01/11/change-uploaded-image-name-to-post-slug-during-upload-using-variables/