5

Image Label on Product View

I need to remove the image label/name from product view pages, or determine why they're showing up. I cannot seem to find them referenced in the XML for catalog_product_view.xml, nor in the phtml files.

I searched here and google for this but did not find anything substantial. I can't even find anything related. On this install, I am using the Ultimo theme by Infortis and Magento is version 2.2.4.

The attached screenshot displays what I mean. The image file name is displayed under the image and I need to remove that, but have found nothing in the way of assistance.

[EDIT] It's the Fotorama caption I need to remove. The view.xml for Ultimo has these set to false but they're still not being removed. I tried removing it through the CSS .less files but no go. Flushed caches between all changes.

8

Unfortunately there is not currently a way to remove with admin panel options or layout xml update. Easiest thing to do is just set a display:none property.

& when (@media-common = true) {
    .catalog-product-view {
        .fotorama__caption {
            display: none;
        }
    }
}
  • Which .less file should I use? Will any of them work? – Marisa Jul 12 '18 at 20:42
  • Any of them should work. However, from an organizational standpoint, I like to put general product page changes in Magento_Catalog/web/css/source/layout/_catalog_category_view.less. But that's just personal preference. – Shawn Abramson Jul 12 '18 at 20:43
  • I added it to my theme's _custom.less and flushed the cache but no change. Still in developer mode so I shouldn't need to deploy static content. Would it be worth doing that? – Marisa Jul 12 '18 at 20:57
  • Delete your var/view_preprocessed directory and your pub/static/frontend/Your/theme and then refresh the page. It would also be a good idea to flush your browser cache but you may not need to. – Shawn Abramson Jul 12 '18 at 20:58
  • I'm glad I was able to help. Please don't forget to mark the answer accepted. All the best. – Shawn Abramson Jul 12 '18 at 21:02
2

There is a property "showCaption" which is set to true by default in fotorama.js You can set this to false from gallery.phtml

0

in this file gallery.phtml for your theme write in the css .fotorama__caption { display: none; }

0

I wanted to expand on Popa's answer. The issue with the configuration file (app/design/frontend/{vendor}/{theme}/etc/view.xml) not working is because to the value checks that happen all over the file

file: vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml

<?php if ($block->getVar("gallery/fullscreen/caption")): ?>
     "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>,
<?php endif; ?>

Because the value for $block->getVar("gallery/fullscreen/caption") will be false when set to false in the config file, this option (showCaption) will never show up on the page when the template is rendered. So it defaults back to to the core JS files settings (found in vendor/magento/magento2-base/lib/web/fotorama/fotorama.js).

This is just some bad coding, so there is a way to set the option to show but no way to set it to false.

So the correct way to set this is to copy the app/design/frontend/{vendor}/{theme}/Magento_Catalog/templates/product/view/gallery.phtml to your theme and anywhere in the options JS object place the setting as you like it, with no php conditional check.

{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
            "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
            "options": {
                ...
                "showCaption": false,
                ...
            },
            "fullscreen": {
                ...
                "showCaption": false,
                ...
            },
        }
    }
}

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.