51

Magento uses the file called view.xml which is maintained at the theme level of the application. So for example, if you are using the default theme luma you should find the view.xml under vendor/magento/theme-frontend-luma/etc/view.xml In this file, you would see <images/> node inside the <media> node. <view xmlns:xsi="http://www.w3.org/...


12

Here's a simple solution that will cause the product's base image to be displayed while the JS is loading. Create the following file in your theme: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml containing: <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> <div ...


7

override the below template for getting gallery images url in product detail page app/design/frontend/Vendor/ThemeName/Magento_Catalog/templates/product/view/gallery.phtml <?php /* @escapeNotVerified */ $json=$block->getGalleryImagesJson(); $array = json_decode($json,true); foreach($array as $item) { $imgurl = $item['full']; echo $imgurl; ...


6

Magento product uses the file view.xml for image size dimensions at path vendor/magento/theme-frontend-luma/etc/view.xml Here you will find node inside the node. Copy the file view.xml and put it in your theme path and make the changes, say app/design/frontend/MyThemePackage/MyTheme/etc/view.xml <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-...


4

In layout made following changes <referenceContainer name="content"> <uiComponent name="test_form"/> <referenceContainer name="test_form"> <block name="gallery" class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery"> <arguments> <argument name="config" xsi:type="array"&...


3

You can follow this link magento 2.2.2 - How to transfer the product thumbnail to the left side Modify your theme view.xml file <vars module="Magento_Catalog"> <var name="gallery"> <var name="navdir">vertical</var> <!-- Sliding direction of thumbnails (horizontal/vertical) --> </var> ...


3

Override template file of gallery in your own theme, copy vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml to your_theme_root/Magento_Catalog/templates/product/view/gallery.phtml Replace in this template (around 80 line): "navarrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/navarrows"); ?&...


3

Try this code: First you need to override below file. After that you can get bundle option images from below code. app/design/frontend/Vendor/Theme_Name/Magento_Bundle/templates/catalog/product/view/type/bundle/option/radio.phtml <?php foreach ($_selections as $_selection): ?> <?php $_imageHelper = \...


3

The icons actually come by cropping a weird background which contain all the icons, located here - pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.png so you will have to adjust background-size, background-position and width and height of following elements to get your desired size of icons. Adjust your code as follows (done for + icon) ....


2

Aaron Allen's answer was great and i used it to figure out how to do it for my custom setup. All i had to do was add the image with some inline css and add padding-bottom: 100% to the loading-mask. ... <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> <div data-role="loader" class="loading-mask" ...


2

Try bellow code for display product images on product detail page. Add code to gallary.phtml <?php foreach($block->getGalleryImages() as $image){ ?> <?php if(!$block->isMainImage($image)):?> <img src="<?php echo $image->getData('medium_image_url') ?>"> <?php endif; ?> <?php } ?> Let me know if ...


2

You can also specify image dimensions directly in template file like this: <?php /** * @var $block \Magento\Catalog\Block\Product\Widget\NewWidget */ $image = 'new_products_content_widget_grid'; $items = $block->getProductCollection()->getItems(); $width = 100; $height = 100; foreach ($items as $_item) { $resizedUrl = $block->resizeImage($...


2

I got the solution after some R&D on fotorama.js I override the file of fotorama.js in My_Theme. app/design/[My]/[Theme]/web/fotorama/fotorama.js I want to Enable both gallery nav arrow and don't want to hide nav arrow when slider goes up and down in vertical way arrow. Also i want to enable that arrow only if image is more than 4. Lets see in ...


2

You can enable on view.xml app/design/frontend/Package/theme/etc/view.xml <var name="magnifier"> <var name="fullscreenzoom">20</var> <!-- Zoom for fullscreen (integer)--> <var name="top"></var> <!-- Top position of magnifier --> <var name="left"></var> <!-- Left position of ...


2

I think you missed something with clearing cache. Copy file to /app/design/frontend/<vendor>/<theme>/web/mage/gallery/gallery.html Clear cache and delete pub/static/frontend Deploy static content (if you in production mode) Clear browser cache.


1

This may help you: Check your /tmp dir space Check it's permission


1

In following thread, you can find other possible reasons and its solution. Magento 2 can not upload product images Hope it helps.


1

Simply go to product edit page and resave. Is it showing now? so you need: php bin/magento catalog:image:resize Also: Any errors in browser console? or system.log and exception.log?


1

After debugging, we found that Magento internally calls various types of images in different files and they are generated. We have implemented a workaround in the following way. override all the image type and use the image dimensions which near the dimension we use in app/design/frontend/Vendor/theme_01/etc/view.xml and override the file which returns ...


1

fullscreen should be an object, since you have set it to a boolean value, it is giving error. Try setting like this: "fullscreen": {},


1

So in order to have the arrows always active on main fotorama image, just edit the line 16 in app/design/{vendor}/{Theme}/web/fotorama/fotorama.js //wrapNoControlsClass = wrapClass + '--no-controls', wrapNoControlsClass = '', this is actually the css class .fotorama__wrap--no-controls in-charge with the slide-in animation of the arrows on hover.


1

You will have to write custom js for it as fotorama by default don't provide functionality to always show arrrows I tried in gallery.phtml variable arrows="always", but its not working. arrows param in gallery.phtml corresponds to data-arrows for fotorama js, which takes only true and false value and tells if to render the arrows or not. You can check ...


1

You can place the file view.xml in your theme's /etc directory with contents like this: <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <media> <images module="Magento_Catalog"> <image id="product_page_image_small" type="...


1

I've used "MSP_LightGallery" Ext. which is available on GitHub.you can download here and modify according to your requirement:- https://github.com/magespecialist/m2_MSP_LightGallery Thanks!!!


1

All the images you normally upload go (and should go ,in case of custom modules too) in pub/media . Thumbnails usually go in pub/media/catalog/product/{product-specific-url} , similarily the category goes in pub/media/catalog/category/{product-specific-url}. If you are wondering how specific urls are working, then it is usually like following; For eg. ...


1

To optimize the speed, You can perform the following steps: Create one JS function to call on hover on product Inage and Pass Product SKU as argument. Create Ajax call to one Ajax Controller Action In Ajax action Load Product and Fetch all the product images and pass response as HTML from action. Insert the Response HTML in Gallery images div with unique ID ...


1

I figured it out: SELECT catalog_product_entity.sku, GROUP_CONCAT(CONCAT_WS(':', catalog_product_entity_media_gallery.value) SEPARATOR ',') AS Gallery, catalog_product_entity.entity_id FROM catalog_product_entity_media_gallery catalog_product_entity_media_gallery INNER JOIN catalog_product_entity catalog_product_entity ON ...


1

Magento 2 doesn't take gallery images directly from url, so first you will need to download them to local storage preferably pub/media/your_folder . And then simply add them as following.[ Please use dependency injection in your code ] // Instance of object manager $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $productId =...


1

you can put check something like that. if($_product->getThumbnail() != $gal_images['file'] || $_product->getSmallImage() != $gal_images['file'] || $_product->getBaseImage() != $gal_images['file']): ?> <?php echo $all_I_mages = $_media.'catalog/product'.$gal_images['file']; ?> <div style="background-image:url(<?...


1

use Magento\Catalog\Model\Product\Gallery\ReadHandler as GalleryReadHandler; public function __construct( ... GalleryReadHandler $readHandler ... ) { ... $this->readHandler = $readHandler; ... } /** * @param $product */ public function addGallery($product) { $this->readHandler->execute($product); } and in your phtml ...


Only top voted, non community-wiki answers of a minimum length are eligible