Magento 2 - Fotorama

Question

我在产品详情页上使用的ProductSlider遇到了问题，不知道如何设置容器的宽度和高度。

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

我的产品图片有其他尺寸。

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

这是插件提供的尺寸。

我的图片尺寸是530px x 350px，因此上下有太多的白边。

有什么想法吗？

- user5138425

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

- Florin Marin

Answer 2

覆盖 vendor\magento\theme-frontend-luma\etc\view.xml

例如，我有以下内容：app\design\frontend\[自定义主题]\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变小 - 它根据图片大小进行调整。

- adprocas

---

上面的代码改变了图片的大小，但没有改变<div class="fotorama__stage" style="width: 581px; height: 581px; line-height: 581px;">的大小。 - Anshu Mishra

请确保清除所有缓存。我很确定在我正在工作的项目中div确实缩小了，因为这是我的意图。我将尝试记住这是哪个项目并进行确认，但首先应确保清除所有缓存。 - adprocas

是的，我已经清除了所有缓存并清空了pub目录。 - Anshu Mishra

嗨 - 我确实检查了一下，它确实改变了容器的大小。我不确定是否需要额外的CSS。不幸的是，我不再使用Magento，所以无法回顾并给您更多具体信息。 - adprocas

Answer 3

回复内容存在敏感词^**$的宽度，所以我继续寻找更好的结果，最终在我的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 catalog:images:resize

- BartZalas

Answer 4

我尝试了所有这些解决方案，但都没有起作用。通过添加以下CSS，我成功解决了这个问题

.fotorama__stage {
    max-height: 80%;
}

- Akhilesh

Answer 5

我将展示如何正确地完成它，但请记住，这并不支持所有选项，因此如果您需要使用缺失的选项，您还必须扩展块类并自行添加支持！

配置保存在

theme-frontend-blank/etc/view.xml:

...
<vars module="Magento_Catalog">

    <!-- Gallery and magnifier theme settings. Start -->
    <var name="gallery">
        <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
        <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
        <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
        <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
        ...

将view.xml复制到您自己的主题中并覆盖该部分。

您应该更改这些变量。

您可以在fotorama 文档中找到所有可能的选项。

- Black

Answer 6

将此代码添加到您的LESS/CSS文件中并清除缓存。

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

- Abdul

Answer 7

这个解决方案对我有用，希望它也能帮助其他人。

在gallery.phtml文件中的代码后面插入以下代码即可

<script type="text/javascript">
    require(
    [
        'jquery',
        'jquery/ui'
    ],
    function(
        $
    ) {
        $(window).load(function(){
            console.log("readyyy");
            $(".fotorama__stage").height($(".fotorama__img").height());

            $( window ).resize(function() {
                console.log("resize");
              $(".fotorama__stage").height($(".fotorama__img").height());
            });
        })
    });
</script>

- SagarPPanchal