- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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..
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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(); }
Magento 2 Blogs/Tutorial
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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 !!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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..
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
Magento 2 Blogs/Tutorial
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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