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 :
1 |
<img change:media="document product/getDefaultVisual; format 'modules.responsive.frontoffice/medium'; class 'image img-responsive'" /> |
Il y a 2 paramètres qui vont nous intéresser plus particulièrement :
1 |
format 'modules.responsive.frontoffice/medium'; |
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
.
1 2 3 4 |
.medium{ max-width: 360px; max-height: 230px; } |
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 :
1 |
class 'image img-responsive' |
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:
1 2 3 4 5 6 7 8 |
<div class="product-big" tal:attributes="id mainVisualBlockDOMId; style style"> <tal:block tal:condition="baseconfiguration/getActivatezoom"> <img change:media="document imageMini; format 'modules.manbow.frontoffice/pic780x761'; zoom 'true'; alt declinedproduct/getLabel"/> </tal:block> <tal:block tal:condition="not: baseconfiguration/getActivatezoom"> <img change:media="document imageMini; format 'modules.manbow.frontoffice/pic780x761'; alt declinedproduct/getLabel"/> </tal:block> </div> |
[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:
1 |
<img change:media="document imageMini; format 'modules.manbow.frontoffice/pic780x761'; zoom 'true'; alt declinedproduct/getLabel"/> |
[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:
1 |
<img change:media="document imageMini; format 'modules.manbow.frontoffice/tototititutu'; zoom 'true'; alt declinedproduct/getLabel"/> |
[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:
1 2 3 4 |
.tototititutu { max-width: 410px; max-height: 360px; } |
[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, …