0

I'm trying to add the tag , loading="lazy" to the template that I've found that prints the image, but it´s not working.

app/design/frontend/Vendor/Theme/Magento_Catalog/web/template/product/image_with_borders.html

<span class="product-image-container" data-bind="style: {width: width + 'px'}">
    <span class="product-image-wrapper"  data-bind="style: {'padding-bottom': height/width*100 + '%'}">
        <h1>Test</h1>
        <img class="product-image-photo" data-bind="attr: {src: src, alt: alt, 'loading': 'lazy'}" />
    </span>
</span>

It's not changing anything. Now I've found that list.phtml template prints the image like this

 $productImage = $block->getImage($_product, $image);
<?php echo $productImage->toHtml() ?>

But this is a block as far as I know, I just don't know where to find that .phtml block, or is it the one that I'm modifying?

Thanks!

2 Answers 2

2

I don't think there is any reason to pass this in as a data-bind attribute, since this is a static value. Try adding it as a regular HTML attribute?

<img class="product-image-photo" loading="lazy" data-bind="attr: {src: src, alt: alt}" />
2
  • did not work either, even my <h1>Test</h1> is not visible Commented Mar 2, 2022 at 18:29
  • oh my bad, I've found that the actual template is this Magento_Catalog::product/image_with_borders.phtml, it's found on ImageFactory Commented Mar 2, 2022 at 20:55
0

I've found the right template, it's here: Magento_Catalog::product/image_with_borders.phtml

You can find it here Magento\Catalog\Block\Product\ImageFactory

on create method:

$data = [
            'data' => [
                'template' => 'Magento_Catalog::product/image_with_borders.phtml',
                'image_url' => $imageAsset->getUrl(),
                'width' => $imageMiscParams['image_width'],
                'height' => $imageMiscParams['image_height'],
                'label' => $this->getLabel($product, $imageMiscParams['image_type']),
                'ratio' => $this->getRatio($imageMiscParams['image_width'], $imageMiscParams['image_height']),
                'custom_attributes' => $this->getStringCustomAttributes($attributes),
                'class' => $this->getClass($attributes),
                'product_id' => $product->getId()
            ],
        ];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.