web-dev-qa-db-ja.com

Magento2-フォトラマ

ProductdetailページのProductSliderに問題があります。コンテナの幅と高さを設定する方法がわかりません。

Fotoramaプラグインの構成をいくつか見つけましたが、幅と高さについては何もありません。

私のProductimagesには別の次元があります。

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

それはプラグインからの寸法です。

私の画像のサイズは530px x 350pxなので、余白が多すぎます（上/下）。

何か案は？

jqueryslidermagento2fotorama
12
user5138425

次のファイルを編集する必要があります：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
           }
        }
    }
}
6
Florin Marin

上書き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が小さくなります。画像サイズに基づいて調整されます。

2
adprocas

この解決策は私のために働きました、それが他の人にも役立つことを願っています。

このコードは、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>
0
SagarPPanchal

Florin Marinのソリューションは私のために機能しましたが、フォトラマの幅を変更することなく、私はもっと掘り下げていました-最良の結果はこれを私の少ないテーマファイル_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

0
BartZalas

正しく行われる方法を説明しますが、これはすべてのオプションをサポートしているわけではないことに注意してください。ブロッククラスを拡張し、不足しているオプションを使用する必要がある場合は、自分でサポートを追加する必要があります。

設定はに保存されます

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を独自のテーマにコピーし、その部分を上書きします。

代わりに、これらの変数を変更する必要があります。

フォトラマで可能なすべてのオプションを見つけることができます ドキュメント 。

0
Black

これをLESS/CSSファイルに追加し、キャッシュをクリアします。

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