12
votes

Magento 2 - Fotorama

J'ai un problème avec le propriétaire des produits sur la page Création de la page. Je ne sais pas comment régler la largeur et les hauteurs du conteneur.

J'ai trouvé une certaine configuration pour le plug-in Fotorama, mais il n'y a rien de largeur et de hauteur.

Mes productimages ont une autre dimension.

qui sont les dimensions du plugin.

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

Des idées?


0 commentaires

6 Réponses :


3
votes

écraser Vendor \ Magento \ theme-fronte-luma \ etc \ vue.xml

J'ai ce qui suit, par exemple: App \ Design \ frontend \ [Customtheme] \ Par défaut \ etc \ vue.xml xxx

ceci provoquera le fotorama__stage plus petit - il s'ajuste en fonction de la taille de l'image.


4 commentaires

Code ci-dessus change la taille de l'image mais pas pour la div


Assurez-vous de rincer tout le cache. Je suis à peu près sûr que la DIV s'est battue sur le projet que je travaillais, comme cela était mon intention. Je vais devoir essayer de vous rappeler quel projet il s'agissait et voyez à coup sûr, mais je commencerais en vous assurant que tout votre cache est rincé.


Oui, j'ai également tous les cache et effacer le répertoire de pub.


Hé - J'ai vérifié cela et cela a également changé la taille du conteneur. Je ne sais pas si le CSS supplémentaire était nécessaire pour cela. Malheureusement, je ne travaille plus avec Magento, je ne peux donc pas regarder en arrière et vous donner plus de détails.



7
votes

Vous devez modifier le fichier suivant: App / conception / Vendeur / Magento_Catalog / Modèles / Produit / Vue / Galerie.Phtml Code>

Ici, vous pouvez ajouter vos options P>

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


0 commentaires

1
votes

Solution de Florin Marin a travaillé pour moi mais sans changer de largeur de fotorama, alors je foutait plus et pour moi - le meilleur résultat l'ajoutait à mon fichier de thème moins thème _theme.less xxx pré>

Je change aussi la taille des images dans l'application / design / frontend / [Custom_vendor] / [Customtheme] \ etc \ View.xml identique comme adpro dans sa réponse. P>

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


0 commentaires

0
votes

Ajoutez ceci à votre fichier moins / CSS et effacez le cache.

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


0 commentaires

0
votes

Je vais montrer comment cela se fait correctement, mais gardez à l'esprit que cela ne prend pas en charge toutes les options, vous devez donc également étendre la classe de bloc et ajouter une prise en charge des options manquantes si vous avez besoin de les utiliser! < p> La configuration est enregistrée dans

Theme-frontend-fronte-frontend-vierge / etc / vue.xml : xxx

copier le vue.xml dans votre thème propre et écrase cette pièce.

Vous devez modifier ces variables.

Vous pouvez trouver toutes les options possibles dans la fotorama Documentation . < / p>


0 commentaires

0
votes

Cette solution a fonctionné pour moi, espérons que cela aidera également les autres aussi.

Placez ce code juste après votre code dans la galerie.phtml Fichier P>

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