Quand on change de template sur son CMS préféré, on pense à beaucoup de choses, … mais il est fréquent qu’au cours de la mise en place de la nouvelle interface des problèmes inattendus se produisent.
C’est ce qui m’est arrivé. Il y a une chose simple à laquelle je n’ai pas pensé : la différence de taille des blocs de contenus entre les deux templates. Constat : le template précédent offrait une largeur plus importante. Effet : photos et vidéos pour nombre d’entre elles dépassent du cadre et empiètent sur la sidebar dans la nouvelle interface.
J’étais parti dans l’idée que pour remédier à cette problématique je devais faire appel à un plug-in wordpress pour redimensionner l’ensemble des éléments évoqués. Le faire manuellement, bien que le nombre d’articles publiés sur ce blog soit réduit, aurait été fastidieux.
En furetant sur internet, une solution simple est venue m’éclairer. Au lieu de faire appel à un mécanisme lourd, on peut faire appel à une technologie bien connue, à laquelle je n’avais pas pensé faire appel : le CSS 🙂
Quelques lignes plus tard, le problème était résolu ! JOIE
/* Resize embed/video */.post embed {width:578px;} /* Applies to all browsers */*.post embed {width:578px;} /* Applies to all IE browsers */_.post embed {width:578px;} /* Applies to all IE browsers 6 and below */.post embed {width /*\**/:578px\9;} /* Applies to IE 8 */
/*Resize image/photos/pictures/ */
.post img { max-width:578px; height:auto; }
J’ai décidé d’utilisé l’argument max- afin de ne pas toucher à la largeur de certaines photos dont la dimension réduite est voulue (ex: galerie flickr, ….)
Laisser un commentaire