Hey TyW,
First of all, thank you so very much for taking the time to write up a tutorial like this! It's easy to understand and a quick read.
We're working with Brooklyn theme over here, and your tutorial doesn't seem to apply – seems Brooklyn's built their img tag a little different then is shown in your tutorial. We have put in some work trying to analyze (💪🤓), however we can't seem to figure it out.
Here's what we've come up with...
Brooklyn seems to have 3 separate img tags in the product-grid-item.liquid file:
Line 50
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">Lines 55-61
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ featured_image.alt | escape }}"
data-image>and Line 65
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
By process of elimination line 50 and line 65 did absolutely nothing... Hence, not it.
Wrapping the div (as instructed) around the image tag (lines 55-61) however, completely broke the template, no longer showing any images whatsoever. Hence we strongly believe it must be that one 😉
Seeing that Brooklyn uses a much more complex way of listing their images, we're guessing the html for the wrapping div would need to be adapted accordingly also.
Got any pointers? Has anyone else figured this out already?
Any answers are most welcome.
Cheers,
Phil
