6

I want to know how can I display thumbnail image, if the product has only one image . (product detail page)

3 Answers 3

1

You just set checkbox true from admin,

 Catalog -> Product -> Edit Product

Now go to Image and video tab, Click on Your image, popup will display, enter image description here

SAVE PRODUCT.

4
  • hai thanks for your ans. Actually i want to know 'single image' but show in thumbnail
    – kamal
    Nov 1, 2017 at 5:16
  • Just disable/untick thumbnail from image from ROLE section in above popup. Nov 1, 2017 at 5:18
  • hai Sry , i want to show 'single image' thumbnail
    – kamal
    Nov 1, 2017 at 5:21
  • hai my question is edited @Rakesh
    – kamal
    Nov 1, 2017 at 5:39
1

fotorma.js:

if (size >1) {
                o_nav = opts.nav;
                o_navTop = opts.navposition === 'top';
                classes.remove.push(selectClass);

                $arrs.toggle(opts.arrows);
            } else {
                o_nav = false;
                $arrs.hide();
            }

change (size > 1) To (size >= 1)

0
0

Referring to kamal's answer, I made changes in the test server to debug and finally solved the problem. My Magento version is 2.4.3. First, rewrite the fotorma.js file, copy the file to

app/design/[Vendor]/[Theme]/web/fotorama/fotorama.js.

Then find the code at line 2102.

 if (size > 1) {
    o_nav = opts.nav;
    o_navTop = opts.navposition === 'top';
    classes.remove.push(selectClass);

    $arrs.toggle(!!opts.arrows);
} else {
    o_nav = false;
    $arrs.hide();
}

Change this code to

if (size > 1) {
    o_nav = opts.nav;
    o_navTop = opts.navposition === 'top';
    classes.remove.push(selectClass);

    $arrs.toggle(!!opts.arrows);
} else if (size == 1) {
    o_nav = opts.nav = 'thumbs';
    opts.navdir = 'vertical';
    o_navTop = opts.navposition === 'top';
    classes.remove.push(selectClass);

    $arrs.toggle(!!opts.arrows);
} else {
    o_nav = false;
    $arrs.hide();
}

This way the thumbnails are displayed properly.

opts.navdir = 'vertical';

This is the vertical display, if you want to display horizontally, just remove this line of code.

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.