0

How to add title tag in product image in product details page?

current img tag in product detail page

<img src="image.jpg" alt="hello" class="fotorama__img" aria-hidden="false">

I want to add title tag like:

<img src="image.jpg" alt="hello" title="hello" class="fotorama__img" aria-hidden="false">

Please let me know any suggestion to do this.

  • Do you want to add a caption to the Image ? – nikin Jul 19 '18 at 5:59
  • I want to add title, not caption. – Purushotam Sharma Jul 19 '18 at 6:02
  • Did you find the way to add title? I have the same problem. – vesna Jun 12 '19 at 12:13
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review – Jai Jun 12 '19 at 12:32
0

The title-tag is good for nothing. Yes google themselves say to add a title to the image. Unfortunately most seo specialists have no idea what they are doing and didn't get that google does not talk about the title-tag at all. Google specifically states that you need to provide the alt-tag!

Lastly, optimizing your image filenames and alt text makes it easier for image search projects like Google Image Search to better understand your images.

https://support.google.com/webmasters/answer/7451184

  • Btw. I used your wording, but title and alt are actually attributes not a tags. – steros Jul 19 '18 at 6:16
0

You want to bring image_with_borders.phtml template file into your theme.

https://github.com/magento/magento2/blob/2.3-develop/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml

Then it's something like this

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>

<span class="product-image-container"
      style="width:<?= $block->escapeHtmlAttr($block->getWidth()) ?>px;">
    <span class="product-image-wrapper"
          style="padding-bottom: <?= ($block->getRatio() * 100) ?>%;">
        <img class="<?= $block->escapeHtmlAttr($block->getClass()) ?>"
            <?= $block->escapeHtmlAttr($block->getCustomAttributes()) ?>
            src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
            max-width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
            max-height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"
            alt="<?= /* @noEscape */ $block->stripTags($block->getLabel(), null, true) ?>
            title="<?= /* @noEscape */ $block->stripTags($block->getLabel(), null, true) ?>"/></span>
</span>

Uses image label. But that might be safer?

But if you want product name try

$block->getProduct()->getName();

but if that doesnt work

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->get('Magento\Framework\Registry')->registry('product');
$name = $product ? $product->getName() : null;

Which isn't perfect but close enough.

The better solution would be to modify Magento\Catalog\Block\Product\Image in an extension and then inject registry

https://blog.qaisarsatti.com/magento_2/magento-2-get-current-product-information/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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