WordPress.org

Ready to get started?Download WordPress

Forums

WP Retina 2x
[resolved] polyfill (23 posts)

  1. Nikolay Yordanov
    Member
    Posted 9 months ago #

    Perhaps you want to use this - http://scottjehl.github.io/picturefill/

    It would make a nice addition to the srcset method.

    https://wordpress.org/plugins/wp-retina-2x/

  2. Jordy Meow
    Member
    Plugin Author

    Posted 9 months ago #

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

  3. Twansparant
    Member
    Posted 9 months ago #

    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!

  4. Jordy Meow
    Member
    Plugin Author

    Posted 9 months ago #

    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 :)

  5. Twansparant
    Member
    Posted 9 months ago #

    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>
  6. Jordy Meow
    Member
    Plugin Author

    Posted 9 months ago #

    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 :)

  7. Twansparant
    Member
    Posted 9 months ago #

    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?

  8. Jordy Meow
    Member
    Plugin Author

    Posted 9 months ago #

    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.

  9. Twansparant
    Member
    Posted 9 months ago #

    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!

  10. Twansparant
    Member
    Posted 9 months ago #

    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!

  11. Jordy Meow
    Member
    Plugin Author

    Posted 8 months ago #

    I am going to implement the picture polyfill soon.

  12. Twansparant
    Member
    Posted 8 months ago #

    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

  13. Jordy Meow
    Member
    Plugin Author

    Posted 8 months ago #

    PictureFill supports for the plugin is coming now... It's beta, please test it :)

  14. Twansparant
    Member
    Posted 8 months ago #

    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?

  15. Jordy Meow
    Member
    Plugin Author

    Posted 8 months ago #

    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.

  16. Twansparant
    Member
    Posted 8 months ago #

    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!

  17. Jordy Meow
    Member
    Plugin Author

    Posted 8 months ago #

    Picturefill method loads the Picturefill script but also transform automatically the normal img tags in order to include the retina files generated by the system. Most people don't do anything, they just let the plugin manage everything.

    In your case, it seems you are using the picture tag yourself :) Unfortunately, in yesterday's version, the plugin was also modifying the fallback img tag you have in picture. Now (I just made a new release) the plugin checks that too and will not modify your code within a picture!

    There was also another bug that was affecting the boolean settings, so everything was believed false ;) It's fixed now, everything should appear again.

    Can you try to load the script after picturefill? I am not sure how you can control that but there must be way...

  18. Twansparant
    Member
    Posted 8 months ago #

    Thanks! The boolean settings work again :)

    and will not modify your code within a picture!

    But what if you DO want this? I want to use both the recommended Picturefill 2 <picture> markup like in my example AND use your WP Retina 2x plugin to add the appropriate @2x image files within that markup?
    That's still not possible right?

    Thank, appreciate your time!

  19. Jordy Meow
    Member
    Plugin Author

    Posted 8 months ago #

    If you create the <picture> markup yourself is that because you know what you are doing :) Therefore, the plugin will not mess with that.

    The plugin will only modify the <img> to use the srcset instead of the src. Of course, it will not modify the <img> within a <picture> because they are probably fallbacks for <=IE9 :)

  20. Twansparant
    Member
    Posted 8 months ago #

    Ok, I understand, but that way you can't use the new proposed Picturefill method for responsive images AND use your plugin at the same time, that would be a pitty?

    You either want to be able to use this markup with different image files for every size:

    <img sizes="(min-width: 40em) 80vw, 100vw"
    srcset="examples/images/medium.jpg 375w, examples/images/medium.jpg 480w, examples/images/large.jpg 768w" alt="Alt Text">

    or this markup with media queries:

    <picture>
    	<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
    	<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
    	<source srcset="examples/images/medium.jpg">
    	<img srcset="examples/images/medium.jpg" alt="Alt Text">
    </picture>

    Both of which are not possible right now...

    In the <img> markup there isn't a src to replace but there already is a srcset you want to keep intact.
    In the <picture> markup it won't change anything at all.

    In my opinion, the plugin should also check the image paths inside srcset of <picture> elements and add the @2x paths if they exist.
    Or at least, there should be a function call available that does this, so you can use it in your templates.

    I'm not criticising you by the way, I completely understand this is all new and complicated, but it would be cool if these 2 could work together!

  21. Jordy Meow
    Member
    Plugin Author

    Posted 8 months ago #

    Actually we haven't been clear :) There is a src to replace for example. Okay I will try to explain it better.

    --

    Look at it from another point of view, the normal WP user point of view. He buys a theme somewhere and create posts with the WP editor and stuff. Never he will be aware of srcset, picture, even normal img.

    But we both know that those posts will contain <img> tags. That's where the plugin kicks in, it detect those tags, remove the src and replace it with the srcset (where it include both the normal image and retina file). The user doesn't know anything at all but it works magically!

    --

    Now, your case. Your are definitely an (very) advanced user. You know about the markups and it seems you do everything manually. You then actually don't really need the plugin (except maybe the part where it generates the retina images), in that case you can change the last method: "none" and you can include the polyfill yourself.

    You can also keep the method selected. Your old img tags will be retinized without you doing anything. For the new tags, if you use <picture>, they will remain untouched by the plugin (because obviously for the plugin the user knows what he is doing).

    In short: the plugin retinized the standard img tags (take out the src, replace it with a complete srcset). If it detects picture tags, it doesn't change any in them (because this is under control of the user). This works perfectly for WP. User in need to perfect control can do it manually.

    --

    Okay I just wanted to make it super clear (especially if other people come here). Now I feel like you want to actually use those "complicated" markups but also have the plugin add the retina in top. That's really close to impossible, and even if it works I would have to add dozens of options and there will be still many issues depending on how you use those tags, unfortunately. Those new markups give us a lot of freedom and people will use them very differently.

    In short, everything works together, you don't agree? But the plugin doesn't add retina image in the new markups, only in the standard markups (img). You are the only one with control over those special markups.

  22. Twansparant
    Member
    Posted 8 months ago #

    Okay I get it and understand. I'm probably aiming too high :)
    But still I think it would be kind of handy if there would be a function call wp_retina($img) which you could use to check if there's a retina version of an image available. Something like:

    <picture>
    	<source srcset="<?php echo $img_extra_large; ?>, <?php wp_retina($img_extra_large); ?>" media="(min-width: 1000px)">
    	<source srcset="<?php echo $img_large; ?>, <?php wp_retina($img_large); ?>" media="(min-width: 800px)">
    	<source srcset="<?php echo $img_medium; ?>, <?php wp_retina($medium); ?>">
    	<img srcset="<?php echo $img_medium; ?>" alt="Alt Text">
    </picture>

    Thanks again!

  23. Jordy Meow
    Member
    Plugin Author

    Posted 8 months ago #

    There is a function like that :)

    wr2x_get_retina( $path )

    You can try this function. If it returns null, then there is no retina.

Reply

You must log in to post.

About this Plugin

About this Topic