Merge pull request #4014 from magento-performance/MC-15440

MC-15440

Author: vzabaznov

app/code/Magento/Catalog/Block/Product/View/Gallery.php

@@ -207,8 +207,8 @@ public function isMainImage($image)
      */
     public function getImageAttribute($imageId, $attributeName, $default = null)
     {
-        $attributes =
-            $this->getConfigView()->getMediaAttributes('Magento_Catalog', Image::MEDIA_TYPE_CONFIG_NODE, $imageId);
+        $attributes = $this->getConfigView()
+                ->getMediaAttributes('Magento_Catalog', Image::MEDIA_TYPE_CONFIG_NODE, $imageId);
         return $attributes[$attributeName] ?? $default;
     }
 

app/code/Magento/Catalog/Helper/Image.php

@@ -6,6 +6,7 @@
 namespace Magento\Catalog\Helper;
 
 use Magento\Framework\App\Helper\AbstractHelper;
+use Magento\Framework\View\Element\Block\ArgumentInterface;
 
 /**
  * Catalog image helper
@@ -14,7 +15,7 @@
  * @SuppressWarnings(PHPMD.TooManyFields)
  * @since 100.0.2
  */
-class Image extends AbstractHelper
+class Image extends AbstractHelper implements ArgumentInterface
 {
     /**
      * Media config node
@@ -764,7 +765,7 @@ protected function getImageFile()
     protected function parseSize($string)
     {
         $size = explode('x', strtolower($string));
-        if (sizeof($size) == 2) {
+        if (count($size) == 2) {
             return ['width' => $size[0] > 0 ? $size[0] : null, 'height' => $size[1] > 0 ? $size[1] : null];
         }
         return false;

app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml

@@ -124,6 +124,7 @@
                 <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml">
                     <arguments>
                         <argument name="gallery_options" xsi:type="object">Magento\Catalog\Block\Product\View\GalleryOptions</argument>
+                        <argument name="imageHelper" xsi:type="object">Magento\Catalog\Helper\Image</argument>
                     </arguments>
                 </block>
                 <container name="skip_gallery_after.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">

app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml

@@ -12,32 +12,32 @@
  * @var $block \Magento\Catalog\Block\Product\View\Gallery
  */
 ?>
+
+<?php
+    $images = $block->getGalleryImages()->getItems();
+    $mainImage = current(array_filter($images, function ($img) use ($block) {
+        return $block->isMainImage($img);
+    }));
+
+    if (!empty($images) && empty($mainImage)) {
+        $mainImage = $block->getGalleryImages()->getFirstItem();
+    }
+
+    $helper = $block->getData('imageHelper');
+    $mainImageData = $mainImage ?
+        $mainImage->getData('medium_image_url') :
+        $helper->getDefaultPlaceholderUrl('image');
+
+?>
+
 <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
-    <div data-role="loader" class="loading-mask">
-        <div class="loader">
-            <img src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
-                 alt="<?= /* @escapeNotVerified */ __('Loading...') ?>">
-        </div>
-    </div>
+    <img
+        alt="main product photo"
+        class="gallery-placeholder__image"
+        src="<?= /* @noEscape */ $mainImageData ?>"
+    />
 </div>
-<!--Fix for jumping content. Loader must be the same size as gallery.-->
-<script>
-    var config = {
-            "width": <?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'width') ?>,
-            "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
-                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
-            "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>",
-            "height": <?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'height') ?>
-        },
-        thumbBarHeight = 0,
-        loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];
-
-    if (config.navtype === 'horizontal') {
-        thumbBarHeight = config.thumbheight;
-    }
 
-    loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
-</script>
 <script type="text/x-magento-init">
     {
         "[data-gallery-role=gallery-placeholder]": {

lib/web/mage/gallery/gallery.less

@@ -977,12 +977,9 @@
 
 // While first time init
 .gallery-placeholder {
-    .loading-mask {
-        padding: 0 0 50%;
-        position: static;
-    }
-    .loader img {
-        position: absolute;
+    &__image {
+        display: block;
+        margin: auto;
     }
 }
 
@@ -1003,6 +1000,7 @@
         display: block;
     }
 }
+
 .fotorama__product-video--loaded {
     .fotorama__img, .fotorama__img--full {
         display: none !important;