Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Drupal 8

Gérer les styles d'image

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La gestion de l'affichage des images peut être entièrement gérée par Drupal. Découvrez comment traiter et optimiser vos images.
04:38

Transcription

Drupal possède dans sa version de base un système de gestion des images très performant, qui permet de modifier les images à la volée en les redimmensionnant, en les tournant, en appaliquant plusieurs effets sur les images. Pour modifier les styles d'image il faut d'abord pouvoir en créer. Donc, nous allons aller dans « Configuration », donc, dans « Média » « Styles d'images », ici nous retrouvons nos trois styles d'images dont nous avons déjà eu affaire lors de la gestion de l'affichage des champs. Donc, on va ajouter un nouveau style d'image. Donc, là, ce qu'on peut voir, c'est que le style d'image a été créé et qu'on a un aperçu, donc on a l'image originale, on a un exemple, et ici on a l'image après que le style ait été appliqué. Donc, pour chaque style d'image il y a plusieurs effets applicables. Donc, on va commencer par exemple avec une conversion, donc, on peut convertir notre image par exemple, si elle est uploadée en JPEG, On peut convertir notre image en PNG. Donc, on ajoute la conversion, on nous redirige vers un formulaire de paramètres, donc, on va sélectionner comme extension PNG, donc, on va convertir de JPEG à PNG. Donc forcément sur l'aperçu du style on voit pas grande chose pour l'instant. On va « Désaturer », c'est-à-dire enlever la couleur, on ajoute. Donc là, les effets du style sont directement appliqués, puisqu'il n'y a pas d'option précise pour cet effet-là. Donc on voit qu'on passe de l'image en 800 par 600 couleur à une image en 800 par 600 en noir et blanc. Donc, on va appliquer une « Rotation », absolument aucun intérêt, mais c'est pour montrer le fonctionnement, donc on va ajouter un « Angle de rotation » de 180°, on peut également « Générer au hasard » et rajouter une « Couleur d'arrière-plan » au format hexadécimales. Donc, on ajoute l'effet une rotation de 180°, donc, on voit bien que notre image est à l'envers à présent, et on va également ajouter un « Redimmensionnement». Donc, on peut imaginer vouloir une image carrée de 400 par 400, par exemple. On ajoute l'effet, voilà on a une image de 400 par 400 à l'envers, en noir et blanc. Donc, il s'agit la de mon style. On peut ensuite changer l'ordre d'application des différents effets, on met à jour, il ne vous reste plus qu'affecter votre nouveau style à votre affichage. Donc, pour se faire on se rend dans « Structure », « Type de contenu ». On va gérer l'affichage du contenu horloge. Donc, là on est en mode « Défaut », on retrouve notre image. Ici on voit le style d'image en moyen 220 par 220. On va aller éditer les paramètres, notre style d'image apparaît. « Mon style », donc, vous pouvez préciser entre paranthèses les différents paramètres comme ça a été fait par défaut. Ici je connais les effets que j'ai appliqués mon style. Donc, je sélectionne « Mon style », je fais mettre à jour, on enregistre. Ici on fait un retour au site. On va voir que le style a bien été appliqué sur cette image. On a l'image qui est désaturée à l'envers et au format 400 par 400. Donc, je vous conseille d'user et d'abuser de ces styles d'images : ils ont plusieurs avantages : ils permettent de normaliser les images, par exemple, si vous avez des utilisateurs qui envoient des images pour des articles, on peut formater ces images et les forcer à une différente dimmension. Ça sert également à optimiser les images pour le format d'affichage. Par exemple, ici Drupal va envoyer une image de 400 par 400, alors qu'il a en stock une image beaucoup plus grande. Donc ça va optimiser le temps de chargement. Donc, ce qu'on note ici c'est que le ratio de l'image n'a pas été respecté. Donc, on va aller retourner dans « Configuration », « Média », « Style d'image », on va modifier mon style. Et ici à la place du redimmensionnement on va le supprimer, on va sélectionner l'effet « Echelle », on ajoute. Donc, là, il est possible de saisir une seule valeur : donc, on va saisir 400 en largeur. On aura quelque chose d'harmoniser sur la largeur, on voit une série d'images qui seront harmonisées à 400 pixels de largeur, et la hauteur dépendra du ratio de l'image qui a été envoyée. On ajoute l'effet, voilà, donc, ça a été appliqué. On retourne au site. On voit notre image et on voit qu'elle n'est plus étendue et qu'elle fait 400 de large avec nos autres styles appliqués. Donc, tout a bien fonctionné.

L'essentiel de Drupal 8

Créez et prenez en main l’administration de votre site avec Drupal. Publiez différents types de contenu, et donnez l’accès à votre site aux utilisateurs de votre choix.

3h00 (50 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
CMS
Spécial abonnés
Date de parution :10 mars 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !