Tagimages

[Magento 2] Les dimensions des images visuels produit

Magento v2.3.3, v2.3.4

view.xml de votre thème

Pour les visuels de la fiche produit, que votre thème hérite de blank ou de luma, voici les dimensions à surcharger dans le fichier app/design/frontend/VotreVendor/votretheme/etc/view.xml (ne tenez pas compte des valeurs que j’ai mis, surtout pour le thumbnail) :

  • product_page_main_image: ???
  • product_page_main_image_default: ???
  • product_page_image_large: les dimensions des visuels zoomés du carousel. Remarque: ne pas surcharger permet, il me semble, d’afficher l’image dans sa taille d’origine dans le zoom.
  • product_page_image_medium: les dimensions des visuels qui s’affichent en carousel
  • product_page_image_small: les dimensions des visuels des miniatures (thumbnails) du carousel

Puis en bash:

Modifier le taux de compression (la qualité) des images

En BO:

Stores > Configuration > Advanced > System > Images Upload Configuration > Quality > 100

Dans le code en créant un module (pas testé):

File : {Vendor}/{Module}/etc/di.xml

File : {Vendor}/{Module}/Model/Product You can set the quality to whatever you want. Then flush image cache.

Utilisation dans un PHTML (pas testé):

Image ID could be used in .phtml template like this:

You can set custom dimensions directly in template file:

You can modify other image options in template file. In order to do it in you need to inject image helper class (\Magento\Catalog\Helper\Image) in your block class.

[Bonnes pratiques] Un peu de documentation sur les images Retina (ou HD Haute Densité)

Du bon paramétrage de la balise meta name="viewport":

Il existe à peu près 50.000 tutos sur le web qui vous apprennent comment mettre en place des images responsive et adaptatives en fonction des résolutions d’écran. Je n’en ai trouvé aucun qui évoque la NéCESSITé ABSOLUE d’avoir une balise meta name="viewport" dans les en-têtes de vos pages afin que les media queries utilisées dans l’élément source (enfant de l’élément picture) soient prises ne compte correctement!

Foutez-moi ça dans les en-têtes de vos pages!:

Afficher des images Retina ou non dans le contenu de vos pages et en fonction du support (smartphone, tablette, ordinateur)

Code testé fonctionnel! Petite archive ZIP pour tester ça de suite.

[RBS Change] Quelques notes sur l’utilisation de l’extension change:media pour afficher des visuels

Utilisation de l’extension phpTal change:media dans Change pour redimensionner les visuels appelés dans les templates et leur attribuer des classes spé.

Dans les templates de bloc, les visuels peuvent être appelés de la manière suivante :

Il y a 2 paramètres qui vont nous intéresser plus particulièrement :

qui va servir à établir des dimensions hauteur et largeur maximales pour cette image (pour un redimensionnement côté serveur). Ici, « medium » est une clé que tu vas retrouver dans le fichier suivant : /modules/responsive/style/frontoffice.image.all.css.

Cette clé peut tout à fait rsservir ailleurs, dans un autre bloc, pour afficher d’autres visuels qui auraient les mêmes dimensions. Et on peut créer d’autres clés pour s’en servir dans les templates.

Le 2ème paramètre important :

permet d’ajouter des classes à l’élément <img />. Car ça ne se fait pas par l’intermédiaire d’un attribut class="".


[4:02 PM] Frank LANG: ok
[4:02 PM] Frank LANG: on a 15mn pour les dimensions d’image
[4:02 PM] Frank LANG: ouvre le template de la fp
[4:02 PM] Nicolas M: wep
[4:02 PM] Frank LANG: ceclui-ci (pour être sûr) : Y:\change30\manbow\themes\responsive\modules\catalog\templates\Catalog-Block-Declinedproduct-Success.all.all.html
[4:03 PM] Frank LANG: ton visuel principal est là
[4:03 PM] Frank LANG:

[4:03 PM] Frank LANG: (ligne 121)
[4:04 PM] Nicolas M: oui j’avais modifié la partie avec le pic780x761
[4:04 PM] Frank LANG: et c’est surtout cette ligne qui va nous intéresser
[4:04 PM] Nicolas M: mais ça a fait tout planter
[4:04 PM] Frank LANG:

[4:05 PM] Frank LANG: l’attribut « format » fait référence à une classe CSS que tu vas retrouver dans un fichier « frontoffice.image.css » dans modules/manbow/style/
[4:06 PM] Frank LANG: Y:\change30\manbow\modules\manbow\style\frontoffice.image.all.css
[4:06 PM] Frank LANG: si tu cherches la classe « .pic780x761 »
[4:06 PM] Frank LANG: eh bin elle existe pas !!!
[4:06 PM] Frank LANG: mais y’en a déjà plein d’autres
[4:07 PM] Frank LANG: en gros, si on reprend la baliswe dans le template, tu pourrais mettre :
[4:07 PM] Frank LANG:

[4:07 PM] Frank LANG: et dans « Y:\change30\manbow\modules\manbow\style\frontoffice.image.all.css »
[4:07 PM] Frank LANG: il faut ajouter :
[4:08 PM] Frank LANG:

[4:08 PM] Frank LANG: avec la largeur max et la hauteur max autorisées pour le redimensionnement qui va s’opérer côté serveur
Frank LANG·4:10 PM
faut faire un compile-all pour que les modifs soient prises en compte
[4:12 PM] Frank LANG: au passage c’est complètement con de nommer ce type de classes avec des dimensions
[4:12 PM] Frank LANG: autant définir peu de dimensions et avoir de sclasses qui s’appellent small, medium, big, avatar, …

© 2020 devfrontend.info

Theme by Anders NorénUp ↑