PS 1.7 images produit affichées en 956px au lieu de 800px

[gouna]

Bonjour,

Mes images zoomées sur mes fiches produit s'affichent en 956px X 956px, alors que le réglage est bien défini sur 800px X 800px

"large_default : 800 px 800 px"

<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 956px;">
 <div><figure class="position-relative rc rc_1_1 rc--lazyload" style="width: 100%; display: inline-block;">
      <img data-src="https://gounacreations.com/7175-large_default/sac-a-dos-enfant-prenom-bleu.jpg" class="img-fluid lazyloaded" width="800" alt="Sac à dos prénom photo bleu" title="Sac à dos prénom photo bleu" src="https://gounacreations.com/7175-large_default/sac-a-dos-enfant-prenom-bleu.jpg">
</figure>
  </div>
</div>

La classe "slick-slide slick-current slick-active" est réglée sur 956px de largeur, je ne vois pas ou modifier cette valeur dans mes fichiers TPL (à moins que ca ne soit dans un fichier JS ?)

Merci beaucoup.

 

Ps : url d'exemple : https://gounacreations.com/sac-a-dos/1598-sac-a-dos-enfant-prenom-bleu.html

[Mediacom87]

il y a 35 minutes, gouna a dit :

style="width: 100%; display: inline-block;">

Regardez dans votre template pourquoi cette ligne de code force la dimension à 100% alors que normalement c’est un max-width qui est de 100%

[gouna]

il y a 17 minutes, Mediacom87 a dit :

Regardez dans votre template pourquoi cette ligne de code force la dimension à 100% alors que normalement c’est un max-width qui est de 100%

Voici mon product-images-modal.tpl :

<div class="modal fade js-product-images-modal" id="product-modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div data-slick id="js-slick-product">
                    {foreach from=$product.images item=image}
                        <figure class="position-relative rc rc_1_1">
                            <img data-src="{$image.large.url}" class="img-fluid lazyload" width="{$image.large.width}" alt="{$image.legend}" title="{$image.legend}">
                        </figure>
                    {/foreach}
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Pas de trace de style="width: 100%; display: inline-block;"  dans "figure class" 

[JulienPct]

Ce style ne serait pas ajouté par slick ? Sachant que slick redimensionne tout pour que les blocs soient de la même taille et occupent tout l'espace ?

[gouna]

Bonjour,

J'utilise une base de thème prestarocket "classic rocket" et effectivement slick est utilisé :

https://addons.prestarocket.com/themes-prestashop/8-theme-classic-rocket.html

Citation

Nouveaux dossiers Js:

Slick Carousel est utilisé pour le curseur de la page d'accueil et les images des produits dans la page de détail du produit ; il est plus léger que le carrousel de la chouette et offre de nombreuses fonctionnalités intéressantes (toucher, options réactives, paramètres des attributs de données)

 

Fichier Js supprimé (dans le dossier _dev) :

velocity.js (nous utilisons slick)

product-select.js (nous utilisons slick)

Par contre je n'arrive pas à modifier le comportement de slick (mes compétences s'arrêtent là sans aide extérieure).

Le problème est présent sur écran de type Pc, sur mobile le format affiché de l'image est dans les bonnes dimensions.

Edited May 13, 2022 by gouna (see edit history)

[JulienPct]

Je penses que si vous changez le style dans votre CSS avec un "!important" à la fin, cela devrait surcharger slick mais le rendu n'est pas assuré.

Slick gère la taille des images pour un rendu homogène, si vous modifiez ce comportement, je ne peux pas assurer un beau rendu.

[gouna]

Bonjour,

Si j'ajoute une règle css :

.img.img-fluid.lazyloaded {
    max-width: 800px;
    height: auto;
}

Mon image est bien redimensionnée en 800x800 (le but recherché), mais je n'arrive pas à la centrer par contre.

Merci pour votre aide précieuse !

[gouna]

En ajoutant une règle max-width sur .modal.show .modal-dialog, cela semble fonctionner.
Je vais limiter cette règle uniquement pour les pages produit afin d'éviter tout problème.

.modal.show .modal-dialog {
    transform: none;
    max-width: 800px !important;
}

Merci !

 

Edited May 15, 2022 by gouna (see edit history)