Make WordPress size and name images for Retina.js

3 Views

I’m a huge fan of the way retina.js works for high pixel density displays. Essentially, when it’s loading image assets (via <img> or css image) it will check if there’s a @2x suffix version of the image (eg. if there’s a logo.jpg it will automatically show the logo@2x.jpg in its place if it exists.

The WordPress function the_post_thumbnail lets me define various image sizes, but I want to know if there’s a way to have it also create versions of the images that are twice the size with the @2x suffix as well!

Read More

It’s easy to do this for theme files, but would be pretty awesome to allow this for content images as well.

Post Views: 3

Related posts

2 comments

  2. Ok here is my advice.

    Just create the copies of images with double size using wordpress native media settings. And then add the following code in your templates.

    <?php $normal = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
$retina = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); ?>

<img src="<?php echo $normal[0]; ?>" data-at2x="<?php echo $retina[0]; ?> alt="<?php the_title(); ?>" width="xxx" height="xxx"/>

    Here my thumbnail (normal) size is 300x300px and medium thumbnail (retina) has 600x600px size. And also don’t forget to load retina.js otherwise data-at2x= will not work. Good luck!

Comments are closed.