Magento 2 - Fotorama

Question

我在Productdetail页面上有一个带有ProdcutSlider的问题.我不知道如何设置容器宽度和高度.

我找到了Fotorama插件的一些配置,但没有关于widht和height的信息.

我的Productimages有另一个方面.

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

这是插件的尺寸.

我的图像尺寸是530px x 350px,因此有太多的空白区域(顶部/底部).

有任何想法吗？

Answer 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
           }
        }
    }
}

Answer 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更小 - 它根据图像大小进行调整。