1

I intend to develop a Retina ready theme. I uploaded retina.min.js on my theme folder:

http://riehling.mrcoolblog.com/wp-content/themes/riehling/js/retina.min.js

In my functions.php, I've added the following code:

add_action( 'wp_enqueue_scripts', 'retina_support_enqueue_scripts' );
function retina_support_enqueue_scripts() {
    wp_enqueue_script( 'retina_min_js', get_template_directory_uri() . '/js/retina.min.js', null, '', true );
}

add_filter( 'wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2 );
function retina_support_attachment_meta( $metadata, $attachment_id ) {
    foreach ( $metadata as $key => $value ) {
        if ( is_array( $value ) ) {
            foreach ( $value as $image => $attr ) {
                if ( is_array( $attr ) )
                    retina_support_create_images( get_attached_file( $attachment_id ), $attr['width'], $attr['height'], true );
            }
        }
    }

    return $metadata;
}

function retina_support_create_images( $file, $width, $height, $crop = false ) {
    if ( $width || $height ) {
        $resized_file = wp_get_image_editor( $file );
        if ( ! is_wp_error( $resized_file ) ) {
            $filename = $resized_file->generate_filename( $width . 'x' . $height . '@2x' ); 
            $resized_file->resize( $width * 2, $height * 2, $crop );
            $resized_file->save( $filename );

            $info = $resized_file->get_size();

            return array(
                'file' => wp_basename( $filename ),
                'width' => $info['width'],
                'height' => $info['height'],
            );
        }
    }
    return false;
}

add_filter( 'delete_attachment', 'delete_retina_support_images' );
function delete_retina_support_images( $attachment_id ) {
    $meta = wp_get_attachment_metadata( $attachment_id );
    $upload_dir = wp_upload_dir();
    $path = pathinfo( $meta['file'] );
    foreach ( $meta as $key => $value ) {
        if ( 'sizes' === $key ) {
            foreach ( $value as $sizes => $size ) {
                $original_filename = $upload_dir['basedir'] . '/' . $path['dirname'] . '/' . $size['file'];
                $retina_filename = substr_replace( $original_filename, '@2x.', strrpos( $original_filename, '.' ), strlen( '.' ) );
                if ( file_exists( $retina_filename ) )
                    unlink( $retina_filename );
            }
        }
    }
}

It does create a @2x file (although I'm quite sure it stretches thumbnails instead of working with the source file, which is wide enough).

However, the image is not being handled by the Retina JS script:

http://riehling.mrcoolblog.com/projets/scenographie/test-retina/

I'm using <?php the_post_thumbnail( 'medium' ); ?> to display the image and the output looks like this:

<img width="236" height="310" src="http://riehling.mrcoolblog.com/wp-content/uploads/f2-236x310.jpg" class="attachment-medium size-medium wp-post-image" alt="Tiger" srcset="http://riehling.mrcoolblog.com/wp-content/uploads/f2-236x310.jpg 236w, http://riehling.mrcoolblog.com/wp-content/uploads/f2-768x1009.jpg 768w, http://riehling.mrcoolblog.com/wp-content/uploads/f2-472x620.jpg 472w, http://riehling.mrcoolblog.com/wp-content/uploads/f2.jpg 944w" sizes="(max-width: 236px) 100vw, 236px">
  • not sure what is it that you expect people here to say to help you. If it is not working you need to debug it, and without relevant debuging information no one that do not have access to your code will be able to debug it for you – Mark Kaplun Sep 20 '16 at 6:40
  • 1
    How are you displaying those images in your template? (Show your code, please.) The docs for retina.js give an example image, <img src="/images/my_image.png" data-rjs="3" /> and say "By using the "data-rjs" attribute, you're telling retina.js that this image would like to opt in. Any images that don't use this attribute will be left alone." There is no data-rjs attribute in images shown. Please include the output in the original question too. It might help someone in the future. – Dave Romsey Sep 20 '16 at 6:44
  • Thank you for your help. Here is my code : <?php the_post_thumbnail( 'medium' ); ?> Here is the output : riehling.mrcoolblog.com/non-classe/test-retina I'd like to know what I am doing wrong and how to get it to work, please. How may I add the "data-rjs" property in the "get_the_thumbnail" function ? – Grégoire Llorca Sep 20 '16 at 8:55
  • If you'd like to run another test, I changed the permalink structure. Here is the new URL : riehling.mrcoolblog.com/projets/scenographie/test-retina – Grégoire Llorca Sep 21 '16 at 14:36
1

The documentation for Retina JS states that images need to have the data-rjs attribute set in order for them to opt in to using the script. This can be done using the third parameter of get_the_post_thumbnail() :

<?php echo get_the_post_thumbnail( get_the_ID(), 'thumbnail', array( 'data-rjs' => '3' ) ); ?>
  • Thank you Dave. Looking at the page code, it seems to do the trick. I do not have a retina device tho. How may I check for sure that the correct image is used ? Because there is no @2x in the <img> tag src. – Grégoire Llorca Sep 21 '16 at 12:32
  • You can use the device emulator in Chrome. I think that the WordPress related aspects to the Retina JS implementation have been addressed at this point though. I checked it out and figured the URLs would change, but they aren't. You might want to try inquiring with the devs of the Retina JS script on github. – Dave Romsey Sep 21 '16 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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