Remove caption on product image PDP

Question

Magento 2.2.4,

How to remove the caption which is available on the image?. Is there any configuration available to disable it.

So it's not just me. I thought I edited view.xml while half asleep. — Mohammed Joraid, Jun 29 '18 at 02:42

score 3 · Answer 1 · edited Jul 03 '18 at 13:29

Magento currently has a bug where the default values of the carousel aren't handled properly. You can manually edit a core file (vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml) like this: replace

"options": {
"nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>",
<?php if (($block->getVar("gallery/loop"))): ?>
    "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>,
<?php endif; ?>
<?php if (($block->getVar("gallery/keyboard"))): ?>
    "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>,
<?php endif; ?>
<?php if (($block->getVar("gallery/arrows"))): ?>
    "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>,
<?php endif; ?>
<?php if (($block->getVar("gallery/allowfullscreen"))): ?>
    "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>,
<?php endif; ?>
<?php if (($block->getVar("gallery/caption"))): ?>
    "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>,
<?php endif; ?>
"width": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'width') ?>",
"thumbwidth": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_small', 'width') ?>",
<?php if ($block->getImageAttribute('product_page_image_small', 'height') || $block->getImageAttribute('product_page_image_small', 'width')): ?>
    "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
<?php endif; ?>
<?php if (($block->getVar("gallery/thumbmargin"))): ?>
    "thumbmargin": <?= /* @noEscape */ (int)$block->getVar("gallery/thumbmargin"); ?>,
<?php endif; ?>
<?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
    "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
<?php endif; ?>
<?php if ($block->getVar("gallery/transition/duration")): ?>
    "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>,
<?php endif; ?>
"transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>",
<?php if (($block->getVar("gallery/navarrows"))): ?>
    "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>,
<?php endif; ?>
"navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>",
"navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navdir") ?>"
},
"fullscreen": {
"nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>",
<?php if ($block->getVar("gallery/fullscreen/loop")): ?>
    "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>,
<?php endif; ?>
"navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>",
<?php if ($block->getVar("gallery/transition/navarrows")): ?>
    "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>,
<?php endif; ?>
"navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>",
<?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
    "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>,
<?php endif; ?>
<?php if ($block->getVar("gallery/fullscreen/caption")): ?>
    "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>,
<?php endif; ?>
<?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
    "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>,
<?php endif; ?>
"transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>"
},

with

"options": {
"nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>",
"loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ? 'true' : 'false' ?>,
"keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ? 'true' : 'false' ?>,
"arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ? 'true' : 'false' ?>,
"allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ? 'true' : 'false' ?>,
"showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ? 'true' : 'false' ?>,
"width": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'width') ?>",
"thumbwidth": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_small', 'width') ?>",
<?php if ($block->getImageAttribute('product_page_image_small', 'height') || $block->getImageAttribute('product_page_image_small', 'width')): ?>
    "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
<?php endif; ?>
<?php if (($block->getVar("gallery/thumbmargin"))): ?>
    "thumbmargin": <?= /* @noEscape */ (int)$block->getVar("gallery/thumbmargin"); ?>,
<?php endif; ?>
<?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
    "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
<?php endif; ?>
<?php if ($block->getVar("gallery/transition/duration")): ?>
    "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>,
<?php endif; ?>
"transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>",
<?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ? 'true' : 'false' ?>
"navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>",
"navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navdir") ?>"
},
"fullscreen": {
"nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>",
"loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ? 'true' : 'false' ?>,
"navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>",
"navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ? 'true' : 'false' ?>,
"navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>",
"arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ? 'true' : 'false' ?>,
"showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ? 'true' : 'false' ?>,
<?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
    "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>,
<?php endif; ?>
"transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>"
},

Or create a template which overrides the Magento template and place the changes in that file.

There is a pull request in progress for this issue: https://github.com/magento/magento2/pull/15546

For now you can fix it as follows:

<?php // FIX FOR https://github.com/magento/magento2/pull/15546
if (($block->getVar("gallery/caption"))!==null): ?>
    "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption")? 'true' : 'false'; ?>,
<?php endif; ?>

If you could kindly elaborate on where to place that code, that would make your answer super helpful. Appreciated. — Mohammed Joraid, Jul 03 '18 at 02:34

score 0 · Answer 2 · edited Jun 22 '18 at 13:10

0

Try this: line 202

vendor/magento/theme-frontend-luma/etc/view.xml

<var name="caption">true</var>

to

<var name="caption">false</var>

and cache flush

edited Jun 22 '18 at 13:10

sv3n

11,657
7
40
73

answered Jun 22 '18 at 11:58

Prashant Patel

1,291
11
21

It has already been set as false false – Haritha Jun 22 '18 at 12:01
Also, I have checked changing the showcaption: true, to false lib/web/fotorama/fotorama.js which has disable the caption on image....But is that a right solution? – Haritha Jun 22 '18 at 12:03
1

@Haritha I confirm. This did not work for me either. I already had them (two caption values) set to False. One for the normal image, one for the Full-Screen mode. I set it to true/false, removed cache still caption shows. – Mohammed Joraid Jul 03 '18 at 02:26

score 0 · Answer 3 · answered Dec 26 '18 at 00:43

Seems problem in showCaption

need add also showcaption

in JavaScript exist bug with option showcaption

showCaption vs showcaption - these different param

so, just override

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

copy row with showCaption, and add row with showcaption

And need add settings to view.xml

score 0 · Answer 4 · answered Dec 26 '18 at 06:26

this might be a fotorama.js issue and the best and easiest way to remove it is through your Theme's Custom Style (CSS). Usually it is available on your admin theme panel settings

put this to your custom css:

.fotorama__caption {
        display: none !important;
    }

then save then cache:flush then check if it is removed already

Remove caption on product image PDP

4 Answers4

Linked