web-dev-qa-db-fra.com

Magento 2 - Fotorama

J'ai un problème avec ProdcutSlider sur la page de détails de produits. Je ne sais pas comment régler la largeur et la hauteur du conteneur.

J'ai trouvé une configuration pour le plugin Fotorama mais il n'y a rien sur la largeur et la hauteur.

Mes images de produit ont une autre dimension.

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

qui sont les dimensions du plugin.

Les dimensions de mon image sont 530px x 350px, il y a donc trop d'espace blanc (haut/bas).

Des idées?

jqueryslidermagento2fotorama
11
user5138425

Vous devez éditer le fichier suivant: app/design/vendor/Magento_Catalog/templates/product/view/gallery.phtml

Ici vous pouvez ajouter vos options

<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

Écraser vendor\magento\theme-frontend-luma\etc\view.xml

J'ai par exemple les éléments suivants: 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>

Cela réduira le fotorama__stage - il s'ajuste en fonction de la taille de l'image.

1
adprocas

La solution de Florin Marin a fonctionné pour moi, mais sans modifier la largeur de fotorama, j’en creusais davantage et pour moi - le meilleur résultat a été d’ajouter cela à mon fichier thématique less _theme.less

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

Je change aussi la taille des images dans app/design/frontend/[Custom_Vendor]/[CustomTheme]\etc\view.xml de la même manière que adpro dans sa réponse.

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

en mode développeur, supprimez pub/static/frontend/* et après les modifications apportées au fichier xml, redimensionnez les images: php bin/magento catalogue: images: redimensionner

0
BartZalas