Magento 2- Fotorama

Question

我对Productdetail页面上的ProductSlider有问题。我不知道如何设置集装箱的宽度和高度。

我找到了Fotorama插件的一些配置，但没有关于宽度和高度的配置。

我的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变小-它会根据图像大小进行调整。

Answer 3

Florin的解决方案对我有效，但没有改变fotorama的宽度，所以我挖掘了更多，对我来说-最好的结果是将这个添加到我的less主题文件_theme.less中

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

我在app/design/frontend/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>

在开发者模式下，删除pub/static/frontend/*，并在xml文件更改后调整图像大小: php bin/magento目录:图像:调整大小