Support » Plugin: WP Retina 2x » polyfill

Viewing 15 replies - 1 through 15 (of 22 total)
  • Plugin Author Jordy Meow

    (@tigroumeow)

    Actually I was talking about implementing it today, on another support thread. I will add this method asap 🙂

    Hi there,

    Since there’s a lot of development going in the responsive images field, I was wundering how I can combine the new <picture> markup method of the new Picturefill 2.0 polyfill with your plugin.

    Basically I have been using your plugin to render the @2x retina images in the media library and showing them on retina displays using the Retina.js method in the settings. That worked however it caused images to download twice, where Picturefill 2.0 is designed to avoid that.

    On a new WordPress project I switched to the new <picture> markup described here and am trying to implement it with retina images too.

    <?php
    $alt 			= $image['alt'];
    $imgsrcmd 	= $image['sizes']['medium'];
    $imgsrclg 	= $image['sizes']['large'];
    ?>
    <picture>
    	<!--[if IE 9]><video style="display: none;"><![endif]-->
    	<source srcset="<?php echo $imgsrclg; ?>, <?php echo $imgsrclg; ?> 2x" media="(min-width: 480px)">
    	<source srcset="<?php echo $imgsrcmd; ?>, <?php echo $imgsrcmd; ?> 2x">
    	<!--[if IE 9]></video><![endif]-->
    	<img srcset="<?php echo $imgsrclg; ?>, <?php echo $imgsrclg; ?> 2x" alt="<?php echo $alt; ?>">
    </picture>

    If I use the above method, my guess would be that I don’t have to use a WP Retina 2x method to show them, because that’s what the Picturefill markup already does right?
    Well with the debug mode turned on and with None method selected, none of the Retina images are displayed.

    Somehow the 2x markup should translate into appending the @2x extension to the srcset path but it does not.

    Anyone else trying to workout how these two techniques can play nicely together?
    Many thanks!

    Plugin Author Jordy Meow

    (@tigroumeow)

    The problem is that people need to write this markup this themselves since WordPress will not implement this before a very long time in the editor.

    What I am going to do is to update on-the-fly the HTML-code using that markup, then I will load the picture-fill library myself.

    I am working on it so don’t worry, it’s coming soon. But you will have nothing to do on your side, just keep your posts the same way 🙂

    Okay that’s good to hear, but what do you mean exactly with:

    just keep your posts the same way

    Keep it like this you mean?

    <picture>
    	<!--[if IE 9]><video style="display: none;"><![endif]-->
    	<source srcset="<?php echo $imgsrclg; ?>, <?php echo $imgsrclg; ?> 2x" media="(min-width: 480px)">
    	<source srcset="<?php echo $imgsrcmd; ?>, <?php echo $imgsrcmd; ?> 2x">
    	<!--[if IE 9]></video><![endif]-->
    	<img srcset="<?php echo $imgsrclg; ?>, <?php echo $imgsrclg; ?> 2x" alt="<?php echo $alt; ?>">
    </picture>

    Plugin Author Jordy Meow

    (@tigroumeow)

    The plugin will rewrite the <img .. /> tags, that’s what I meant, so basically, if you use the WordPress editor everything will be rendered properly.

    If you write the <picture> yourself, then fine, the plugin will not replace them but will have the retina files created and the polyfill loaded 🙂

    Ah ok, so it only swaps the retina images when they’re placed within the WordPress editor?

    I don’t mind writing the <picture> markup myself, especially if you have different image sizes for certain media queries like in my example, but how can I use the created retina files in my own markup?

    Plugin Author Jordy Meow

    (@tigroumeow)

    It doesn’t swap anything at this time. Whatever you input in the editor stays the same. When it’s delivered to the visitors, it gets updated depending on the method you are using, and in the picture-fill case the img’s will be replaced by the picture markup.

    The images are switched dynamically by the javascript polyfill.

    The plugin creates the retina images based on the images sizes that you have set-up in your WP (it’s explained in the FAQ). Indeed, if you always have different format for each image and you don’t use the WP image sizes at all, then it gets really complicated and you have to do it manually.

    Okay thanks for clearing that up!
    Is there a function in your plugin (or could you make one) that I can use that will output the image path to the @2x retina version of an image if it exists?
    Something like:

    <?php
    $imgsrclghd = wp_retina_2x($imgsrclg);
    ?>
    <source srcset="<?php echo $imgsrclg; if ($imgsrclghd) { echo ',' . $imgsrclghd . ' 2x';  } ?>" media="(min-width: 480px)">

    That way you can get full custom control of your markup.
    Thanks!

    Are there any updates on this?
    Right now images within <picture> elements are not rewritten with the srcset attribute added to the img tags with the HTML srcset (W3C Draft) option selected.
    Thanks!

    Plugin Author Jordy Meow

    (@tigroumeow)

    I am going to implement the picture polyfill soon.

    Ok thanks, meanwhile I created a workaround that works quit well too.
    For those interested; in my example I use a ACF field for the image and check if there’s a retina file available and if so, use that in the new Picturefill 2 markup below:

    <?php // get image
    $image 	= get_field('image');
    $alt 			= $image['alt'];
    $imgsrcmd 	= $image['sizes']['medium'];
    $imgsrclg 	= $image['sizes']['large'];
    // Get Retina images
    if (function_exists('wr2x_get_retina')) {
    	$imgmd_retina = wr2x_get_retina( trailingslashit( ABSPATH ) . wr2x_get_pathinfo_from_image_src($imgsrcmd) );
    	$imgmd_retina_src = trailingslashit( get_site_url() ) . ltrim( str_replace( ABSPATH, "", $imgmd_retina ), '/' );
    	$imglg_retina = wr2x_get_retina( trailingslashit( ABSPATH ) . wr2x_get_pathinfo_from_image_src($imgsrclg) );
    	$imglg_retina_src = trailingslashit( get_site_url() ) . ltrim( str_replace( ABSPATH, "", $imglg_retina ), '/' );
    } ?>
    <picture>
    	<!--[if IE 9]><video style="display: none;"><![endif]-->
    	<source srcset="<?php echo $imgsrclg; if ($imglg_retina) {echo ', ' . $imglg_retina_src . ' 2x'; } ?>" media="(min-width:510px)">
    	<source srcset="<?php echo $imgsrcmd; if ($imgmd_retina) {echo ', ' . $imgmd_retina_src . ' 2x'; } ?>">
    	<!--[if IE 9]></video><![endif]-->
    	<img srcset="<?php echo $imgsrclg; if ($imglg_retina) {echo ', ' . $imglg_retina_src . ' 2x'; } ?>" alt="<?php echo $alt; ?>" />
    </picture>

    Only thing that doesn’t seem to work yet is that the src attribute of the img tag is still showing the non-retina image on my Retina devices:
    <img alt="Alt text" srcset="http://mydomain.com/media/picture-1024x668.jpg, http://mydomain.com/media/picture-1024x668@2x.jpg 2x" src="http://mydomain.com/media/picture-1024x668.jpg">

    In the Picturefill 2 documentation it says: When natively supported, srcset will allow the UA to override requests for higher-resolution options based on a bandwidth limitations or a user preference (see #9 in the Responsive Images Use Cases and Requirements).

    Any idea why it isn’t working yet?
    Thanks

    Plugin Author Jordy Meow

    (@tigroumeow)

    PictureFill supports for the plugin is coming now… It’s beta, please test it 🙂

    Nice! Gonna try it right away!
    So I don’t have to add picturefill.js myself? Which Picturefill version are you using by the way? The 2.0.0 or the 2.1.0 beta?

    Plugin Author Jordy Meow

    (@tigroumeow)

    I am using the beta! Not sure if everything works perfectly yet, but at least picturefill is loaded. Then if your page has IMG tags, then will be rewritten in order to support the retina files if you have them. I think we will need to make this method better and better, it might not handle every every case.

    To be honest, that would be great if other developer could help me on that one from time to time, when it doesn’t work.

    I would love to help you out, altough I’m still haven’t figured out how Picturefill 2 is suppose to work precisely…
    I tested the new plugin version with the Picturefill method, and I have a few remarks;

    1) The Retina Column has disappeared from my Media Column even with the Hide ‘Retina’ column option unchecked.
    2) I have a Lazy Load script in my FlexSlider where I need to call the picturefill({reevaluate: true}); function, but that throwes me a picturefill is not defined error. How can I make sure that call is made after the script has been loaded?
    3) No retina images are shown when I use the following markup:

    <picture>
    	<!--[if IE 9]><video style="display: none;"><![endif]-->
    	<source class="first" srcset="http://mydomain.com/media/picture-1024x668.jpg" media="(min-width:510px)">
    	<source class="first" srcset="http://mydomain.com/media/picture-480x313.jpg">
    	<!--[if IE 9]></video><![endif]-->
    	<img class="first" src="http://mydomain.com/media/picture-1024x668.jpg" alt="my alt text" />
    </picture>

    The above does however gets rewritten into this:

    <picture>
    	<!--[if IE 9]><video style="display: none;"><![endif]-->
    	<source class="first" srcset="http://mydomain.com/media/picture-1024x668.jpg" media="(min-width:510px)">
    	<source class="first" srcset="http://mydomain.com/media/picture-480x313.jpg">
    	<!--[if IE 9]></video><![endif]-->
    	<img class="first" srcset="http://mydomain.com/media/picture-1024x668.jpg, http://mydomain.com/media/picture-1024x668.jpg 2x" src="http://mydomain.com/media/picture-1024x668.jpg" alt="my alt text" />
    </picture>

    But shouldn’t the <source> elements also get rewritten? I think the <img> tag is only a fallback when browsers don’t read the <source> tags?

    I was also reading this issue on Github, not sure if that has got something to do with it?

    Thanks!

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘polyfill’ is closed to new replies.