Comment créer et appliquer des styles d’images avec Drupal 7 via l’UI

Comment créer et appliquer des styles d’images avec Drupal 7 via l’UI

03 Nov 2011 |  Drupal

Depuis Drupal 7 la gestion des images et des styles d’images est native, ainsi donc plus besoin d’installer le module imagecache pour retailler, pivoter ou encore redimensionner vos photos. Une fois créée, vous pourrez appliquer vos styles sur n’importe quelle photo, qu’elle soit affichée dans le contenu d’un node ou encore dans le rendue d’une vue. La manip’ est vraiment simple et permet de décliner une photo en une quantité indéfinie de possibilité.

Voici donc un petit guide pour vous montrer comment ajouter de nouveaux styles d’images via l’interface de Drupal et comment vous en servir.

Créer un style d’image via l’interface d’administration

Première étape, rendez-vous sur la page d’administration des styles d’images Administration » Configuration » Media et cliquez sur Image styles. Cliquez sur le lien au dessus des trois styles d’images par défaut nommé Add style, et insérez un titre à votre style d’image. Petit conseil, soyez explicite sur les noms, car plus vous en aurez, plus cela deviendra difficile de vous y retrouver.

Deuxième étape, l’ajout d’effets aux images et pour cela vous avez à votre disposition 6 choix : - Crop : découpe l’image selon une certaine dimension. - Desaturate : désature l’image. - Resize : retaille l’image. - Rotate : retourner l’image en fonction d’un angle. - Scale : retaille l’image en gardant les proportions. - Scale and crop : retaille et découpe l’image.

Choisissez l’effet désiré, entrez les dimensions voulus et sauvegardez.

Troisième étape, la visualisation des résultats. Une fois votre effet validé, vous vous retrouvez sur la page de votre nouveau style d’image. En haut de celle-ci se trouve deux images afin de voir le résultat de votre effet. A gauche l’image original et à droite l’image transformée.

Derniere étape, cliquez sur Update style pour valider les modifications effectuées et pour sauvegarder votre nouveau style que vous retrouvez pour mettre en forme chaque champ image

Appliquer un style d’image

Dans le cas d’un contenu, rendez-vous la page de gestion de l’affichage des champs : Administration » Structure » Content types et cliquez sur Manage display, pour le type de contenu de votre choix. Cliquez ensuite sur la petite icône en forme d’engrenage qui devrait se trouver à droite sur la ligne de votre champ image.

Sélectionnez le style de votre choix, cliquez sur le bouton update et votre style sera maintenant appliqué à ce champ. Pour visualiser les résultat rendez-vous sur la page de votre contenu et voila.

Julien Dubreuil

Vous avez une idée, un projet web à réaliser ?

Ensemble, mettons en oeuvre sa réussite. Je vous accompagne dans vos projets, depuis l'élaboration du cahier des charges jusqu'à la mise en production. Pour plus d'information n'hésitez pas à me contacter.

Contactez-moi