Classes CSS générées par WordPress pour les images

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Classes CSS générées par WordPress pour les images

Dans WordPress, de nombreuses classes CSS sont impliquées dans la gestion des images. Plusieurs options sont disponibles depuis l’interface des médias, chacune ajoutant une classe CSS dans les éléments HTML img ou div (si une légende est spécifiée). Cet article propose un rapide aperçu des classes CSS permettant d’aligner les images avec les styles CSS associés, de gérer les formats d’images ainsi que les légendes. Nous verrons aussi comment, à partir des classes générées automatiquement par WordPress, utiliser les classes multiples — comme .classe1.classe2 { … } sans espace entre .classe1 et .classe2 — pour faire face à tous les cas de figure concernant les formats, les alignements ou la présence ou non de légendes.

"Ajouter une image" depuis l'interface d'administration de WordPress

Classes CSS pour aligner les images

  • Aucun — .alignnone {}
  • Gauche — .alignleft {}
  • Centre — .aligncenter {}
  • Droite — .alignright {}

Les styles associés (à titre indicatif)

img.alignnone {
    margin: 0 1em;
}
img.alignleft {
    float: left;
    margin-right: 1.5em;
}
img.aligncenter {
    display: block;
    margin: 1em auto;
}
img.alignright {
    float: right;
    margin-left: 1.5em;
}

Formats des images

Les formats (tailles) sont précisés dans Réglages → Médias.

  • Miniature — .size-thumbnail {}
  • Moyenne — .size-medium {}
  • Large — .size-large {}
  • Taille originale — .size-full {}

A ce niveau, on peut déjà s’amuser avec les classes multiples en stylant différemment les images selon leurs alignements et leurs formats :

  • .size-thumbnail.alignnone {}
  • .size-medium.alignleft {}
  • .size-large.aligncenter {}
  • .size-full.alignright {}
  • Etc.

Légende (caption)

Lorsqu’on ajoute une légende, notre image est enveloppée dans une balise div ; une balise p englobe la légende. Les classes impliquées dans l’alignement de l’image sont déplacées sur cette balise div qui contient déjà une classe .wp-caption. Ce qui nous donne les combinaisons suivantes :

  • .wp-caption.alignright {}
  • .wp-caption.alignleft {}
  • .wp-caption.alignnone {}
  • .wp-caption.aligncenter {}
  • .wp-caption.alignnone {}

Les classes CSS impliquées dans le format restent chevillées à la balise img. Ce qui élargit encore notre terrain de jeu :

  • .wp-caption.alignright .size-thumbnail {}
  • .wp-caption.alignleft .size-medium {}
  • .wp-caption.alignnone .size-large {}
  • .wp-caption.aligncenter .size-full {}
  • etc.

(Je vous fais grâce de toutes les combinaisons dont l’intérêt est tout relatif).

Classes multiples dans IE6 ?

N’hésitez pas à lire le billet 3 fonctions Javascript pour lutter contre le bug des classes multiples dans IE6 pour utiliser les classes multiples dans IE6 : une fonction simple avec jQuery, une autre plus évoluée (toujours avec jQuery) et une dernière fonction en pur Javascript pour ne pas charger la mule !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Classes CSS générées par WordPress pour les images”

  1. Comme une image dit :

    Ça existe encore, IE6 ? ;-) (Ah oui, 1,06 % des visiteurs de mon burp… IE5 also not dead : 0,02%)

  2. Bruno Bichet dit :

    Comme une image > ça ne mange pas de pain de prévoir le support de IE6 quand c’est possible, comme c’est le cas ici. Il y a encore à notre époque des entreprises où Ie6 est encore utilisé. C’est assez rare, c’est vrai, mais bon, je me dis qu’on est toujours content de trouver une astuce comme celle-ci le jour où il faut faire un taf en tenant compte d’IE6 tout en continuant à travailler correctement pour les navigateurs plus récents :)

  3. […] css4design : Classes CSS générées par WordPress pour les images Dans WordPress, de nombreuses classes CSS sont impliquées dans la gestion des images. Source: css4design.com […]

  4. […] fait une descriptif complet des différentes classes CSS qui sont générées lors de l’utilisation des images et des éléments y […]

  5. […] fait une descriptif complet des différentes classes CSS qui sont générées lors de l’utilisation des images et des éléments y […]

  6. […] Classes CSS générées par WordPress pour les images Dans WordPress, de nombreuses classes CSS sont impliquées dans la gestion des images. Source: css4design.com […]

  7. […] jQuery("#errors*").hide(); window.location= data.themeInternalUrl; } }); } css4design.com – Today, 10:21 […]



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site