Suite de notre tour d'horizon des nouveautés de la version 4.1 d'Automne, toujours en cours de développement, avec aujourd'hui un point sur la gestion des images dans les modules. De nouvelles options vont permettre plus de flexibilité dans la mise en page et plus de contrôle pour le respect des chartes graphiques. Nous en avons aussi profité pour ajouter quelques fonctionnalités supplémentaires, toujours dans l'optique de vous faciliter au mieux la tâche.

Il est courant qu'une charte graphique pour le web stipule différents formats d'images. Les ratios de ces images peuvent aussi varier selon le contexte (1/1, 4/3, 16/9). Jusqu'à présent il n'était pas possible à partir d'une seule image de générer tous les formats dont on avait besoin dans nos rangées de contenu, mais heureusement Automne 4.1 va permettre de se passer de cette limitation à l'aide de deux paramètres bien utiles : la largeur et la hauteur de votre image.

Lors du développement de vos rangées vous avez donc la possibilité à partir de la version 4.1 de spécifier une largeur et/ou une hauteur. Si vous ne précisez qu'un seul paramètre le ratio de l'image est conservé, si vous spécifiez les deux paramètres alors l'image est automatiquement redimensionnée et retaillée (auto-crop). Pour le moment c'est le comportement par défaut, cela sera amené à évoluer dans une prochaine version.

Voici l'aide correspondante que vous retrouverez intégrée dans Automne pour le champ image du module actualités :

{Actualites:Image:image|width,height} : Chemin complet vers l'image (répertoire et nom). Cette variable accepte deux paramètres optionnels largeur (width) et hauteur (height) permettant de redimensionner dynamiquement l'image. Spécifiez pour ces valeurs les dimensions attendues en pixels.

Imaginons maintenant que la charte graphique de votre site d’actualités stipule plusieurs formats d’images :

• 275x190 pour l'actualité à la une ;
• 170px de large pour les vignettes des autres titres ;
• 40px de haut pour les actualités en annexes ;

Grâce à ces nouvelles options, il vous suffira d’écrire dans vos rangées selon le contexte :

• Vignette pour l'actualité en une :

  <img src="{Actualites:Image:image|275,190}" alt="{Actualites:Image:imageLabel}" />

• Vignette pour les derniers titres :

  <img src="{Actualites:Image:image|170}" alt="{Actualites:Image:imageLabel}" />

• Vignette pour les annexes :

  <img src="{Actualites:Image:image|,40}" alt="{Actualites:Image:imageLabel}" />

Lorsque vous spécifiez une largeur et une hauteur, Automne va automatiquement redimensionner les images et les enregistrer sur le serveur.

Ces options sont aussi applicables à l’image de grande taille, même syntaxe donc :

{Actualites:Image:imageZoom|width,height} : Chemin complet vers l'image zoom (répertoire et nom). Cette variable accepte deux paramètres optionnels largeur (width) et hauteur (height) permettant de redimensionner dynamiquement l'image zoom. Spécifiez pour ces valeurs les dimensions attendues en pixels.

Plus besoin de faire appel à des scripts Photoshop ou The GIMP pour générer vos images en différents formats, Automne s’occupe de tout, il vous suffit de fournir une image originale à une taille suffisante. De plus la gestion de la transparence des images GIF et PNG est désormais gérée. Pour information les images publiées sont enregistrées sur le serveur dans le dossier /files/module_codename/public/ à partir de la version 4.1 ou dans /automne_modules_files/module_codename/public/ pour les versions antérieures.

Nous en avons profité pour ajouter un paramètre dans la gestion du champ du module pour vous permettre de spécifier si la légende est obligatoire ou pas. Auparavant la légende était obligatoire et cela n’était pas nécessaire dans tous les cas de figure. Cela va améliorer l’accessibilité de vos images si vous utilisez des images purement décoratives puisqu’il est déconseillé de leur fournir une alternative textuelle par exemple.

Ici j’ai volontairement pris l’exemple du module actualités fourni par défaut avec Automne, cependant ces options sont valables dans n’importe quel module qui contient un champ image ou un champ fichier comme le module médiathèque par exemple :

{Media:Fichier:thumb|width,height} : Chemin complet vers la vignette (répertoire et nom). Cette variable accepte deux paramètres optionnels largeur (width) et hauteur (height) permettant de redimensionner dynamiquement la vignette. Spécifiez pour ces valeurs les dimensions attendues en pixels.

Les plus attentifs remarquerons l’apparition de deux nouvelles variables à votre disposition, comme ça la trousse à outils est complète :

• {Media:Fichier:thumbname} : Nom du fichier de la vignette
• {Media:Fichier:thumbExtension} : Type de la vignette (extension)

A noter qu’il y a toujours un champ vignette et un champ image pour vous permettre de spécifier des images différentes si besoin.

Toutes ces options font que la gestion des images est donc bien plus évoluée dans Automne 4.1 et que vous allez pouvoir manipuler plus facilement les tailles de vos images dans vos pages.

Nous vous donnons rendez-vous pour un prochain billet de cette série sur les nouveautés de la version  4.1 avec une fonctionnalité que beaucoup attendent à savoir l'import/export de modules, qui va permettre à la communauté d'échanger et de remixer ses développements.