polyfill
-
Perhaps you want to use this – http://scottjehl.github.io/picturefill/
It would make a nice addition to the srcset method.
-
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…
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!
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 🙂
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!
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.
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 callwp_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!
There is a function like that 🙂
wr2x_get_retina( $path )You can try this function. If it returns null, then there is no retina.
The topic ‘polyfill’ is closed to new replies.
