Magento 2 - Fotorama

У меня проблема с ProductSlider на странице Productdetail. Я не знаю, как установить ширину контейнера & высоты.

Я нашел некоторую конфигурацию для плагина Fotorama, но там нет ничего о ширине и высоте.

Мои Productimages имеют другие измерения.

<div class="fotorama__stage" style="width: 581px; height: 581px; line-height: 581px;">

это размеры из плагина.

Размеры моего изображения 530px x 350px, поэтому слишком много пустого пространства (сверху/снизу).

Есть идеи?

Ответ 1

Вам необходимо отредактировать следующий файл: app/design/vendor/Magento_Catalog/templates/product/view/gallery.phtml

Здесь вы можете добавить свои параметры

<script type="text/x-magento-init">
{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
            "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
            "options": {
                "maxheight": "700", // Add your value here
           }
        }
    }
}

Ответ 2

Перезаписать vendor\magento\theme-frontend-luma\etc\view.xml

У меня есть следующее, например: app\design\frontend\[CustomTheme]\default\etc\view.xml

<?xml version="1.0"?>

<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_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>700</width>
                <height>420</height>
            </image>

            <image id="product_page_main_image" type="image">
                <width>700</width>
                <height>420</height>
            </image>

            <image id="product_page_main_image_default" type="image">
                <width>700</width>
                <height>420</height>
            </image>
        </images>
    </media>
</view>

Это приведет к тому, что размер fotorama__stage будет меньше - он будет регулироваться в зависимости от размера изображения.

Ответ 3

Решение от Florin Marin работало для меня, но без изменения ширины fotorama, поэтому я копал больше и для меня - лучший результат заключался в добавлении этого в мой менее тематический файл _theme.less

        .page-layout-2columns-right .product.media {
                width: 20%
}
        .page-layout-2columns-right .product-info-main {
                width: 78%;
}

Я также изменяю размер изображений в приложении/дизайне/интерфейсе/[Custom_Vendor]/[CustomTheme]\etc\view.xml, как и в adpro в его ответе.

 <images module="Magento_Catalog">
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>150</width>
                <height>150</height>
            </image>

            <image id="product_page_main_image" type="image">
                <width>150</width>
                <height>150</height>
            </image>

            <image id="product_page_main_image_default" type="image">
                <width>150</width>
                <height>150</height>
            </image>
        </images>

в режиме разработчика delete pub/static/frontend/* и после изменений в файле xml resize images: php bin/magento catalog: images: resize

Ответ 4

Решение adpro отлично работает на magento 2.3. большое спасибо!

Ответ 5

Добавьте это в свой файл LESS/CSS и очистите кеш.

.product .fotorama__stage__frame .fotorama__img {
   top: 0 !important;
   transform: none !important;
   -webkit-transform: none !important;
   position: static;
   margin-top: auto !important;
}