Picturefill Inline Replace

Hi,

What’s your URL? I would like to see how the HTML looks like.

Hey Jordy – the URL is protected – is there a way I can email it to you? Here is the HTML that I’m spitting out…

<section class=”hero wp-content hero–image” style=”background-image: url(‘https://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg&#8217;); background-position: 50% -0.1px;” data-stellar-background-ratio=”0.9″>
</section>

The retina image is there – and I can get it using the wp retina 2x functions. But it doesn’t convert over to the 2x in the src code.

I can see your image is:
https://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg

Is your retina images named MAR_About_GivingBack_Banner_Hero_[email protected]?

The @2x needs to be behind it. If you file is named MAR_About_GivingBack_Banner_Hero_2x.jpg it will not work.

Also, if that’s not the problem, can you try to rewrite:

url('https://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg');

to

url("https://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg");

It’s not a big change, but just to make sure…

Hey Jordy…

I can confirm – I added the Full Sized image manually in the Retina menu and wr2x_get_retina_from_url($url1x) returns the @2x version of the file and I can see it in the system.

I also updated the quotes to use ” instead of ‘ in the background-image: url() field. That doesn’t load because it’s inline CSS so the ” kill the background-image call in the inline CSS.

In either case the Retina image is there – but it doesn’t update. There are no console errors or anything and oddly enough – the Retina 2x log says that it’s replacing them – but they never appear replaced?

Thanks for your help. We have the developer license for this an manage tons of sites so this is a big thing for us to figure out. Appreciate it!

Hi,

Sorry for the late reply. Actually, I am not sure what’s going on – if the Retina logs say that it has been replaced, it means that the HTML was re-written. Now, this process could have been hijacked by many another process, such as Yoast SEO and the rewriting titles feature, it does cancel all further modification in the HTML (I am not sure it was fixed at Yoast). An idea would be to turn off all the plugins to make sure it is not because of one of them.

How do the logs look like for this? I would like to make sure it’s the right message ?? It should be something starting with “The background src … was rewritten to …”.

Sorry about my mention about the quotes, it actually didn’t matter.

Thanks Jordy – Yoast boogered it up – the new version (I installed the Pro) seemed to fix it immediately. Appreciate it!

AD