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?

1 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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.