1

Magento 2.2.4,

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

enter image description here

  • So it's not just me. I thought I edited view.xml while half asleep. – Mohammed Joraid Jun 29 '18 at 2:42
3

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; ?>
  • 1
    If you could kindly elaborate on where to place that code, that would make your answer super helpful. Appreciated. – Mohammed Joraid Jul 3 '18 at 2:34
  • Updated answer. – Quisse Jul 3 '18 at 8:25
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

  • It has already been set as false <var name="caption">false</var> – 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 3 '18 at 2:26
0

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

0

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

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.