Depuis la version 2.5, WordPress dispose d’un gestionnaire de médias bien plus flexible que par le passé. Il propose par exemple de gérer l’alignement de vos images dans le contenu de vos articles.
Malheureusement, dans la plupart des cas, ce que vous voyez dans l’éditeur de TinyMCE ressemble rarement à ceux qui est affiché dans votre blog.
Depuis WordPress 2.6, l’éditeur visuel va plus loin et propose d’ajouter des légendes à vos images. Encore une fois, le rendu graphique sur votre blog est rarement à la hauteur…
La raison ?
Elle est très simple. Très peu de thèmes WordPress incorporent les nouvelles classes CSS du gestionnaire de médias !
Pas de panique. Nous allons voir ensemble comment ajouter les bonnes règles CSS pour profiter à 100% des capacités de l’éditeur visuel.
Pour cela, nous allons utiliser le thème par défaut que propose WordPress. En effet ce dernier contient l’ensemble des propriétés CSS nécéssaires.
L’objectif est donc d’ajouter ces règles CSS à votre thème. Pour simplifier la chose, j’ai mis à disposition les lignes CSS à ajouter sur le service pastbin:
Il vous suffit d’ajouter ces lignes à la fin de votre fichier CSS. Pour y parvenir 2 méthodes, soit via votre client FTP et éditeur de texte favori, soit via l’éditeur de thème de WordPress. (Onglet apparence, éditeur de thème)
Démo:
AC Dev » Blog Archive » test theme new feature of WP2.6
[…] Bon j’ai fait les ajouts nécessaire pour rendre le theme a jour Raison […]
Benoît
J’ai remis au goût du jour tous mes thèmes, c’est tout de même bien pratique cette gestion de médias. Quant aux légendes sous les images, c’est une belle avancée aussi.
Il est à noter que le codex indique cette méthode.
Li-An
Merci pour cette précision que je m’empresse d’appliquer.
Said
Merci pour les précisions, j’étais entrain de me prendre la tête depuis quelques jours.
jaly
Bonjour,
Je souhaite publier des photos dans la vie en gris et je ne connais rien à Worpress par quoi commencer.
Merci d’avance jaly
happytobehere
Merci beaucoup pour tout votre travail. Tout est clair.
Elo
Petit problème non-résolu cependant :
Je n’arrive pas à aligner les images côte à côte qd il y a une légende placée sous chaque image … les images sont calées par défaut l’une en-dessous de l’autre, il n’y a pas de class pour gérer cela donc j’ai tenté de rajouter une div englobante avec une liste ul li , et un display inline, mais rien ne bouge …
Une idée qqun SVP ? 🙂
Amaury
Elo > Commence par donner l’adresse de ton site 😉
Ca sera plus simple à débugger…
Mais tu auras certainement plus de réponses à ton problème sur le forum !
Elo
Apparemment le rapport entre les images n’est pas prévu ds le gestionnaire de média, donc j’ai tt simplement généré un tableau avec des cellules et glissé les images dedans pour les aligner comme je le voulais, à l’horizontal ^^
Sinon j’ai débusqué un nouveau soucis : toutes les images intégrées via les gestionnaire sont étirées à 332px, dès lors que j’ai sélectionné l’alignement à gauche ou à droite !
Dans le code source les parametres Width et Height sont bons pourtant, mais qd je fais clic droit sur une image pour connaitre ses propriétés j’ai la largeur 332px qui s’affiche …
J’ai bien cherché, mais je ne trouve nulle part une dimension « imposée » de 332px !
Je ferai bien d’aller poser ma question sur le forum en effet 😉
De tout de rien, c'est la boîte à liens ! | Weezonaute, le blogueur masqué
[…] Comment rendre compatible votre thème avec le gestionnaire de médias de WordPress 2.5 et 2.6 via Amaury SafeSpace Personal Edition, protégez votre ordinateur dans un environnement virtuel via TheBloom […]
Thème Wordpress "Dynamic Vision" en français ! [14/30] | Weezonaute, le blogueur masqué
[…] code Css pour la compatibilité du gestionnaire de média wordpress 2.5 et 2.6, comme le préconise Amaury Thème Dynamic-Vision FR Téléchargé: 1 fois Thème Dynamic-Vision Widget […]
Solution : comment centrer les images dans Wordpress 2.6 ?
[…] trouvé la réponse aujourd’hui sur WordPress Francophone : […] Très peu de thèmes WordPress incorporent les nouvelles classes CSS du gestionnaire de […]
Get Back To Work » Archives » Tips & Tricks #3 : Nouvelles CSS et fonction PHP de Word Press 2.6
[…] Les nouvelles CSS de placement d’image dans WordPress 2.6 Je suis tombé sur cet article de wordpress-fr qui explique pourquoi l’alignement des images ne marche pas pour tout le monde. Depuis la […]
seb
Bonjour Amaury,
sur mon site, j’affiche des images pour lesquelles j’ai rempli le champs « légende ». Celle-ci apparait bien dans l’aperçu tinymce mais en revanche lorsque je publie l’article elle n’apparait pas côté blog.
J’ai beau utiliser ton CSS, rien n’y fais, et pour cause : dans le code source de l’article, il n’y a pas trace de la la légende, elle n’apparait que dans le « alt », le texte alternatif, de l’image.
Que dois-je faire pour que la légende s’affiche ?
Je précise que ce problème était valable sur la version 2.6.1, et qu’il est toujours présent dans la version 2.6.2 que je viens d’installer.
Y’a-t-il une fonction à activer/désactiver comme c’était le cas pendant un temps (voir article) ?
seb
Bon en fait, je viens de penser que ça pouvai venir d’un plugin. Je les ai tous désactivé et effectivement ça venait du plugin « smartypants«
Thème Wordpress "Xplosive-Reloaded" en français ! [15/30] | Weezonaute, le blogueur masqué
[…] est dans le style “magazine”, j’ai aussi ajouté une version avec le CSS de Amaury pour la compatibilité du gestionnaire de médias de WordPress 2.5 et 2.6. Le thème […]
olivier
Bonjour @ tous,
Moi j’ai un autre souci …
Dans un article celui ci :
http://blog.coolgraph.net/?p=1
Le petit logo wordpress est compressé… malgré les attributs largeur hauteur définis… cela fait ça dès que je sélectionne l’alignement à gauche ou à droite.
Lorsque c’est centré pas de souci !
Merci de me venir en aide car c’est vraiment une galère pour moi !
@+
seb
olivier, je me permets de te répondre :
Si tu alignes à droite, tu vois que ton image subit la class « alignleft ».
Or si tu vas dans ton css, tu vois que la class « alignleft » est définie ainsi :
.alignleft{float:left; padding:20px; margin-left:20px; background:url(images/back.gif) no-repeat left; width:100px; font-size:11px;}
Note le « Width:100px »
Voilà pourquoi ton image fait 100 px de large
olivier
Merci Merci Merci mille fois Seb ! d’une par pour ton aide et d’autre part pour ta rapidité ! c’est nickel maintenant … à par la flèche qui se répercute derrière le logo… je ne comprend pas non plus pourquoi… si tu as une idée 🙂
Merci encore
@+
seb
La flèche c’est le background de la class « alignleft ».
Elle apparait car, comme tu peux le constater, aligneleft est définie ainsi :
background:url(images/back.gif) no-repeat left;
voilà
et désolé Amaury de squatter ton blog 😉
olivier
Merci encore Seb ! 😉
bgin
Plus le temps passe et plus je me félicite d’avoir adopté WordPress.
On ne peut que féliciter et remercier Amaury, Xavier et d’autres pour leur travail de soutien.
J’avais remarqué cette distorsion qu’Amury signale entre le rendu de mon blog et l’interface de mise en page des images à partir de la v 2.5
J’ai un peu galéré pour faire l’adaptation au thème Mimbo2.2-Niss.
Désormais, je penserai à venir chercher l’information ici.
Merci encore
delphinE
Bonjour,
je suis désolée d’être une truffette, mais j’ai besoin de votre aide, malgré avoir suivi les conseils donnés dans ce post … mes images restent désespérément alignées à gauche … je pleure pas encore mais presque …
Merci de votre contribution !
delphinE
Bon, en fait, lorsque l’article est publié, ça marche, mais par contre l’aperçu du billet lui ne prend pas en compte les alignements d’images …. pas facile de faire une mise en page…
Et merci ! ça marche !