3 added 10 characters in body
source | link
http://riehling.mrcoolblog.com/non-classeprojets/scenographie/test-retina/
http://riehling.mrcoolblog.com/non-classe/test-retina/
http://riehling.mrcoolblog.com/projets/scenographie/test-retina/
2 Add details from comments to the question, formatting
source | link

I intend to develop a retinaRetina ready theme.

  I uploaded retina.min.jsretina.min.js on my theme folder  : http://riehling.mrcoolblog.com/wp-content/themes/riehling/js/retina.min.js

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

In my functions.phpfunctions.php, I useI've added the following code, which I found somewhere on Internet :

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

However, it doesthe image is not display it being handled by the Retina JS script: http://riehling.mrcoolblog.com/non-classe/test-retina/

What am I doing wrong ?

http://riehling.mrcoolblog.com/non-classe/test-retina/

Thank you for your helpI'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">

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 use the following code, which I found somewhere on Internet :

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, it does not display it : http://riehling.mrcoolblog.com/non-classe/test-retina/

What am I doing wrong ?

Thank you for your help !

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:

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/non-classe/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">
1
source | link

Retina JS not working

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 use the following code, which I found somewhere on Internet :

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, it does not display it : http://riehling.mrcoolblog.com/non-classe/test-retina/

What am I doing wrong ?

Thank you for your help !