cancel
Showing results for 
Search instead for 
Did you mean: 

Thubnail for product page not showing for single image

Thubnail for product page not showing for single image

I have a mageto store with version magento 2.2.0.

I have faced an issue on product detail page. There is no thumbnail image if there is only one image on product.

 

I want to show thumbnail image even if the product having only one image.

 

Please advice me to solve this issue..

6 REPLIES 6

Re: Thubnail for product page not showing for single image

You need to set below conditions in fotorama.js file under lib/web/fotorama/fotorama.js

 

Override fotorama.js file into your theme at below location,

app/design/frontend/{Vendorname}/{themename}/web/fotorama/fotorama.js

 

Edit below conditions at funtion name with,
function setOptions() {}

Now set, if (size >= 1)  instead of if (size > 1) 

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();
            }
If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Re: Thubnail for product page not showing for single image

The thumbnail image on product page is coming from fotorama.js file.

 

So you need to override that file in either your custom module or your custom theme as well.

 

Below is the process how can you override fotorama.js file into your custom theme.

 

copy existing fotorama.js file to app/design/frontend/{Vendorname}/{themename}/web/fotorama/fotorama.js

 

then locate the function name called setOptions();

 

in setOptions function there is one condition which you need to modify below it is :

 

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();
            }

Currently condition is  if (size > 1) so you need to change it to (size >= 1)

 

then you will see thumbnail for the same.

 

Meanwhile if you wanted to override this js file into your custom module , you can do it by same you just need to copy this js file and paste it to app/code/Vendorname/ModuleName/web/fotorama/fotorama.js

 

Change same condition from above mention and run command called php bin/magento setup:static-content:deploy -f

 

Then check it will works !! 

if issue solved,Click Kudos & Accept as Solution

Re: Thubnail for product page not showing for single image

I have followed your step and override the "fotorama.js" file onto my theme folder 

 

"app/design/frontend/Alothemes/default/web/fotorama/fotorama.js"

 

and change the cfode you have provided and also run command 

 

php bin/magento setup:static-content:deploy -f

 

Still the single image does not show thumbnails..

 

Please advice me where I am wrong..

Re: Thubnail for product page not showing for single image

have you checked size >=1 conditions set inside your js file?

Also run first upgrade command,

 

php bin/magento setup:upgrade 
php bin/magento setup:static-content:deploy -f
If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Re: Thubnail for product page not showing for single image

I had run both the upgrade and static content deploy command but after that also I have not seen thumbnail for single image product.

 

Here is the url of the product page: http://www.e2genesis.com/adobe-after-effects-creative-cloud-for-non-profit-device-license.html

Re: Thubnail for product page not showing for single image

app/design/frontend/___Theme___/Magento_Catalog/templates/product/view/gallery.phtml

 

Edit

 <?php if(count(json_decode($block->getGalleryImagesJson(),true)) > 1): ?>
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
<?php else: ?>
"nav": false,
<?php endif; ?>

 

To

"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",

 

and after edit run  

php bin/magento setup:static-content:deploy -f