Tagretina

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

[CSS] Mediaqueries pour affichage Retina

Code CSS

Source : Retina Display Media Query

Pour l’inclusion de visuels en haute résolution, mais seulement pour les écrans qui peuvent les exploiter :

(le pixel-ratio pour un écran Retina étant 2x)

Pour les autres hautes résolutions :

Liste des périphériques par résolution (avec test du périphérique de surf) :

Source : Device pixel density tests

Devices with -webkit-min-device-pixel-ratio: 1.0

All non-Retina Macs
Apple iPhone (1st generation)
Apple iPhone 3G
Apple iPhone 3GS
Apple iPad (1st generation)
Apple iPad 2
Apple iPad mini (1st generation)
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

Devices with -webkit-min-device-pixel-ratio: 1.3

Asus MemoPad HD 7
Google Nexus 7 (2012 model)

Devices with -webkit-min-device-pixel-ratio: 1.4

Nokia Lumia 520

Devices with -webkit-min-device-pixel-ratio: 1.5

Google Nexus S
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation
Kindle Fire HD
Samsung Galaxy S II
Sony Xperia Tablet Z
Sony Xperia U

Devices with -webkit-min-device-pixel-ratio: 2.0

All Macs with Retina displays
Apple iPhone 4
Apple iPhone 4S
Apple iPhone 5
Apple iPhone 5c
Apple iPhone 5s
Apple iPhone 6
Apple iPad (3rd generation)
Apple iPad 4
Apple iPad Air
Apple iPad mini (2rd generation)
HTC One X
Google Galaxy Nexus
Google Nexus 4
Google Nexus 7 (2013 model)
Google Nexus 10
Motorola Moto X
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
Sony Xperia T

Devices with -webkit-min-device-pixel-ratio: 2.6

Nokia Lumia 930

Devices with -webkit-min-device-pixel-ratio: 3.0

HTC One (M7)
HTC Butterfly
Huawei Honor 6
Apple iPhone 6 Plus
LG G2
Nexus 5
OnePlus One
Oppo Find 7 (X9076)
Samsung Galaxy S4
Samsung Galaxy Note 3
Samsung Galaxy Note 4
Sony Xperia Z
Xiaomi Mi 3

© 2020 devfrontend.info

Theme by Anders NorénUp ↑