...du verbe Drupaler (1er groupe)

Des images dynamique dans Drupal avec le module Responsive images and styles

7. Décembre 2012 - 12:33 -- Jeremy
Dans cet article nous allons voir comment configurer le module Responsive images and styles dans drupal 7 avec le theme Omega pour obtenir des images qui se retaillent en fonction de la taille du navigateur.

Comme d'habitude téléchargez et installez le module sur votre serveur ou faites le avec Drush :

drush dl resp_img
drush en resp_img

Commençons tout d'abord à créer des suffixes de responsive image (chemin => /admin/config/media/resp_img/add).

Nous allons donc créer 4 suffixes (_mobile, _narrow, _normal et _wide) pour le typre de contenu "Article" en se basant sur la taille la plus petite taille du paramètre d'affichage de chaque grille du sout thème Omega.

Le suffixe _mobile est le seul démarrant avec taille à zero car il n'a pas de taille minimum.



Le suffixe _narrow, largeur minimal à 740px



Et ainsi due suite pour le suffixe _normal à 980px et enfin le sufixe _wide à 1220px

Vous pouvez en créer autant que vous avez d'afichage (je me suis basé sur les paramètres de base d'Omega) :

Allez ensuite dans les paramètres du module :

Choisissez comme suffixe par défaut le plus petit de votre affichage et activez le resize forcé comme dans l'image ci-dessous



Créez ensuite autant dde format d'image que vous avez de suffixes. Cette étape est sans doute la plus fastidieuse, mais elle permet en fait d'optimiser les performances du site, car plutôt que de redimensionner une image haute résolution, on va charger une image à la résolution correspondant exactement aux besoin (et donc une image légère). (chemin : /admin/config/media/image-styles).

Nommez les de façons cohérente avec vos suffixes et à l'échelle donnez leur la largeur que vous souhaitez. Par exemple pour le suffixe _narrow j'ai créé un style d'image article_narrow à l'échelle de 150px de large



Une fois tous vos style d'image créés vous devriez avoir une liste semblable à celle-ci



Réglez ensuite dans l'affichage des champs de votre type de contenu, ou via Views le style d'image le plus petit.
Voilà, vous pouvez maintenant créer un article et vous amuser a redimensionner votre navigateur !
4.333335
Average: 4.3 (3 votes)
Votre vote: Aucun(e)

Commentaires

Soumis par Mato (non vérifié) le

Salut, merci pour ce tuto !
par contre comme on peut le voir dans votre quatrieme capture sur ce tuto, il ne veut pas générer les images dans "styles d'images".
En suivant la procédure il me génére uniquement le style wide, je ne sait pas pourquoi et pas les autres.
j'ai essayé de renommer les styles d'images "article-narrow" au lieu de "article_narrow, et là il génére bien l'image.
J'arrive pas à comprendre...si des fois vous avez une idée...
merci a+

Soumis par Jeremy le
Salut et désolé pour le temp de réponse mais j'étais en vacance intensive :)

Si l'image n'est pas générée sur l'image 4, c'est parce que je n'ai pas encore créé l'effet du style d'image !

Pour la syntaxe entre le trait d'union et l'underscore je n'ai pas d'idée sauf peut être que tu a créé le sufixe avec le trait d'union au lieu de l'underscore dans les configurations de responsive image ?

Ajouter un commentaire

Texte simple

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
CAPTCHA
Image CAPTCHA