webentwicklung-frage-antwort-db.com.de

Magento 2 - Fotorama

Ich habe ein Porblem mit dem ProdcutSlider auf der Productdetail Page. Ich kann nicht die Behälterbreite u. -Höhen einstellen.

Ich habe eine Konfiguration für das Fotorama Plugin gefunden, aber es gibt nichts über Breite und Höhe.

Meine Produktbilder haben andere Dimensionen.

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

das sind die maße aus dem Plugin.

Meine Bildmaße sind 530px x 350px, es gibt also zu viel Leerraum (oben/unten).

Irgendwelche Ideen?

jqueryslidermagento2fotorama
11
user5138425

Sie müssen die folgende Datei bearbeiten: app/design/vendor/Magento_Catalog/templates/product/view/gallery.phtml

Hier können Sie Ihre Optionen hinzufügen

<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 überschreiben

Ich habe zum Beispiel folgendes: 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>

Dadurch wird der fotorama__stage kleiner - er passt sich an die Bildgröße an.

1
adprocas

Die Lösung von Florin Marin funktionierte für mich, ohne jedoch die Breite des Fotorama zu verändern. Deshalb grub ich mehr und für mich - das beste Ergebnis war, dies zu meiner weniger thematischen Datei _theme.less hinzuzufügen

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

Ich ändere auch die Größe der Bilder in app/design/frontend/[Custom_Vendor]/[CustomTheme]\etc\view.xml wie adpro in seiner Antwort.

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

löschen Sie im Entwicklermodus pub/static/frontend/* und ändern Sie nach Änderungen in der XML-Datei die Größe der Bilder: php bin/magento catalog: images: resize

0
BartZalas

Fügen Sie dies zu Ihrer LESS/CSS-Datei hinzu und leeren Sie den Cache.

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