Setup Issues Img Tags not replaced

The test page in question can be viewed at
https://www.lifelightlens.com/portfolio/lifelightlens-portfolio/

My theme is Timber fromm pixelgrade. I can send you the theme folder to look at if that would also help.

I just need to know if there is a way to program this using your plugin so the theme can serve proper srcset and @2x images, instead of taking the easy way out and using src=small/large/fullscreen

If not i’ll have to abandon this theme

These are my RWP Settings and i could not find the Debug info, i am guessing my theme doesnt allow Html comments

https://www.dropbox.com/sh/jysk2jvlim852oy/AABFJQc2r2j6ZVNA_Hrd30rfa?dl=0

Autoptimize removes comments when you minify the HTML, so you should turn it off first. If no comments appear after that, RWP wasn’t able to do anything with the images. Since the wrapping div has data-srcsmall/large/full attributes, I would say that the theme is responsible.

I turned off Autoptimize and W3CT, the only comment I see that doesnt appear to be from the theme is

<script type=”text/javascript”>
/* <![CDATA[ */
var cssTarget = “img.”;
/* ]]> */
</script>

If it is the theme wrappers that are interfering with the plugins ability is there a way to bypass them?

If in your opinion it is not possible, ill have to abandon the theme. No idea why anyone would make a photography theme that doesnt serve scaled and @2x images…

Please let me know if there is a work around or if i should move on

Thank you!

tip: AO has an option to keep HTML comments ??

frank (ao dev)

Thanks for the reminder @optimizingmatters ??

Okey, I’ve looked into the theme now and it’s hard to force functionality from a plugin into a theme that is made in a certain way. I’m not saying it’s a bad theme or something like that, it’s just that it handles images on it’s own way.
If you look at the function timber_get_film_strip_image at line 697 in /inc/template-tags.php you can see how it works. A div is created with attributes containing URL:s to a small, large and full size image. The most appropriate one is selected and loaded with Javascript.
So the theme has its own approach to responsive images. I guess that you can hack that function so that RWP generates and returns an <img> instead, but that’s generally a bad idea.

I see. The problem though is that the list never includes @2x images or ones smaller than 400px. So I am serving large images to mobile thumbnails, and if I change the image size in functions.php they are too small in desktop. It is just really rigid and tries to be all things without doing any of them properly.

Because there is only the choice between src=small/large/fullscreen I am unable to add @2x to that list for retina, and it also returns very heavy pages for mobile. Worst of both worlds…

In areas of the site that are not jetpack portfolios such as the thumbnails, filmstrip, and fullscreen, it uses a srcset and everything is good, they just don’t use it in the galleries which is where it is most needed!

<img data-lazy-srcset="https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-150x94.jpg 150w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-300x188.jpg 300w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-150x150.jpg 150w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-300x300.jpg 300w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-768x480.jpg 768w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-1536x960.jpg 1536w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-1024x640.jpg 1024w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-2048x1280.jpg 2048w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-1280x800.jpg 1280w, https://www.lifelightlens.com/wp-content/uploads/2017/07/Image-2-2560x1600.jpg 2560w" sizes="(min-width: 1024px) 1280px, (min-width: 768px) 1024px, (min-width: 480px) 768px, 150px, 150px" width="2800" height="1750" class="lazy project-slide__image rsImg wp-post-image" alt="" style="width: 1240px; height: 775px; opacity: 1;">

This is from the project sliders page which is the intro to galleries, and is the way I think the whole theme should have dealt with imgs.

I have contacted the developers about it, and they agree that it is an issue. They are rewriting the theme to have the galleries run off srcset but who knows when that will be done.

In the mean time is there a filter I can add to have RWP provide srcset in the DIV? Or at least a way to have it call for a srcset instead of img=small/large/fullscreen?

Just looking through, on line 586 it has an option to apply filters for any plugins take on the_content.

Is this a place where RWP filters might have the desired effect if inserted?

Otherwise I am not experienced enough to substitute wp_get_attachment_srcset in for the wp_get_attachment_src

The only other solutions I can think of are to make galleries without the jetpack templates in either WP VISUAL COMPOSER, or in SLIDER REVOLUTION. If they use IMG tags then theoretically RWP should be able to do its magic right? Are you by any chance familiar with either of those and know RWP is compatible?

If not ill check their image markup and see if that is a viable work around.

If there is no solution using RWP, would you be interested in changing the theme function to call a srcset for me and I can pay you?

Also I am really thankful for you taking the time to help me so far. I will be providing a glowing review for you. Is there any way to donate to your plugin or buy you a drink?

I have contacted the developers about it, and they agree that it is an issue. They are rewriting the theme to have the galleries run off srcset but who knows when that will be done.

That sound good, it’s better that they implement a “real” solution. Hope it’s not far away!

Just looking through, on line 586 it has an option to apply filters for any plugins take on the_content.
Is this a place where RWP filters might have the desired effect if inserted?

The problem is that the theme isn’t creating an <img> tag, which RWP looks for and adds srcset and sizes attributes to.

I tried to make a rather hacky solution where I modified the function:
https://gist.github.com/stefanledin/bb3dde9c15a14b3dffdccba9c9410219
It adds an working <img> created by RWP, but it’s not the best solution.

The only other solutions I can think of are to make galleries without the jetpack templates in either WP VISUAL COMPOSER, or in SLIDER REVOLUTION. If they use IMG tags then theoretically RWP should be able to do its magic right? Are you by any chance familiar with either of those and know RWP is compatible?

I’m afraid not, we never use any such plugins. But yes, if they pass an <img> tag through the the_content filter, RWP would try to make it a responsive image.

If there is no solution using RWP, would you be interested in changing the theme function to call a srcset for me and I can pay you?

Also I am really thankful for you taking the time to help me so far. I will be providing a glowing review for you. Is there any way to donate to your plugin or buy you a drink?

Thanks mate! ?? But I haven’t actually helped you solve the problem…

But if anyone is interested in donating, I have this PayPal…

The devs got back to me and they estimate it being done in 6 weeks. So worst case I have to wait a bit.

Thank you for attempting the function! I am going to try it and I hope it works.

Do I replace the code section in templates-tags.php or do I insert it in my child functions.php?

Thanks again my friend ??

Hi again! Sorry for the delay, we’ve entered vacation mode here in Sweden…;)
I guess it would work if you insert it into functions.php.

Thanks for your contribution btw ??