Comment mettre une bordure aux images de SPIP ?

À bas les style=’border-width : 0px ;’ !

3 mai 2006,
par Romy Têtue

Mots-clefs associés à cet article :

C’est un problème de SPIP, dans les versions antérieures à SPIP 1.9, qui concerne toutes les images : c’est la croix et la bannière pour leur mettre une bordure.

Cela vient du code généré par SPIP. En effet, les documents visuels sont habituellement stylés par SPIP avec style='border-width: 0px;' qui fixe leur bordure à zéro. Cela affecte toutes les images, que ce soit les logos (d’articles, rubriques, etc), les images dans le corps du texte, ou celles en portfolio : c’est la croix et la bannière pour leur affecter une bordure !

Vous avez tout essayé : aucune modification des styles ne parvient à coller de bordure à ces fichues images ! Et pour cause : ce style en dur directement dans le code HTML a le dernier mot, point barre [*]. Voyons donc comment contourner cela.

Donner l’illusion d’une bordure...

Dans les squelettes, enveloppez chaque balise appelant une image d’une div dotée d’une bordure.

Par exemple :
dans le squelette HTML :
<div class="encadrer">#LOGO_ARTICLE</div>
dans la feuille de style CSS :
.encadrer { border: 1px solid gray; }

Ça marche, mais c’est alourdir inutilement le code... Cet élément, div, est à utiliser quand il n’y a rien d’autre à quoi se raccrocher [1], ce qui est somme toute assez rare, et n’est pas le cas ici.

Une autre solution ? plus simple encore ! Finalement, pour ne pas s’embêter avec le code, il « suffit » de retoucher vos images de façon à ce qu’elles contiennent une jolie bordure encadrante ;-)

Se passer des balises de SPIP, pardi !

Une solution efficace consiste à se passer des balises de SPIP, puisque ce sont elles qui génèrent ce code contrariant. Cette méthode convient aux sites qui n’emploient pas d’images placées dans le corps de texte (auxquelles ne correspond pas de balise particulière).
1. Supprimez des squelettes toutes les balises qui commandent l’affichage de visuels : #LOGO_ARTICLE, #LOGO_RUBRIQUE, #LOGO_AUTEUR, etc, sans oublier #LOGO_DOCUMENT et #EMBED_DOCUMENT.
2. Codez à la main dans les squelettes, en remplaçant chacune par :

Exemple pour remplacer #LOGO_ARTICLE :

Le filtre |fichier affecté au logo, permet de récupérer directement le nom de fichier correspondant au logo [2]. L’attribut alt contiendra le titre de l’article, coupé à 60 caractères.


3. Enfin, stylez à son goût via la feuille de style CSS. Par exemple : .thumb spip_logos { float: right; border: 1px solid gray; } permettra d’obtenir des logos bordés de gris et flottants à droite.

Surclasser ce style de SPIP

Quel est le problème au juste ? En stylant les images avec style='border-width: 0px;' SPIP fixe définitivement leur bordure à zéro, le style dans le code HTML l’emportant sur les autres définitions de style [*].

On peut surpasser ce style de SPIP en employant la valeur CSS !important [3], à ceci prés que ça n’est pas pris en compte par IE/Win. Par exemple : img { border: 1px solid gray !important; } appliquera une bordure grise à toutes les images... oui, à toutes sans exception, y compris à la puce de vos listes, ce qui n’est certainement pas ce que vous souhaitez...
Le problème est maintenant inverse, mais vous avez quelque peu repris la main : vous pouvez contrecarer cette nouvelle règle par .spip_puce { border: 0 !important; } pour retirer cette bordure de vos puces, et ainsi de suite pour chacune des images que souhaitez... sans bordure.

Corriger le code de SPIP

Ce code généré par SPIP impose une mise en forme non choisie et difficilement modifiable par l’utilisateur : l’absence de bordure aux images et logos, et la quasi impossibilité d’en appliquer.
Cela devrait changer à terme, mais en attendant vous pouvez vous amuser à rechercher les occurrences de style='border-width: 0px;' dans le code source de SPIP pour les supprimer (si je ne me trompe pas, ça se passe du côté de ecrire/inc_documents.php3).
En mettant img { border: 0; } dans votre feuille de style vous obtiendrez strictement le même résultat, à ceci près de non négligeable que vous avez désormais la possibilité de styler les images comme bon vous semble, avec ou sans bordure.

Vos commentaires

  • Le 8 mai 2006 à 03:46, par Romy Têtue En réponse à : Comment mettre une bordure aux images de SPIP ?

    Bonne nouvelle, ce problème est réglé avec SPIP 1.9 ! Yiiipiiiiiiiii ! c’est corrigé : Allez voila c’est dit c’est fait, on n’en parle plus ! (Ticket #249) ouf :o)

  • Le 19 mai 2006 à 09:06, par Sylvain En réponse à : mettre une « autre » bordure aux images de spip ...

    Bonjour,

    C’est super d’avoir centralisé ces astuces. Personnellement, j’ai contourné ce problème en faisant :

    J’avoue que c’est assez inatendu, quand je l’ai écris j’étais certain que ça ne marcherait pas ... et en fait si ;-)

    a+

  • Le 19 mai 2006 à 20:43, par Romy Têtue En réponse à : mettre une « autre » bordure aux images de spip ...

    Oui, exact ! j’avais utilisé cela une fois. Effectivement, c’est assez inattendu, mais ça fonctionne aussi. J’émets toutefois une réserve : je ne suis plus certaine que ça fonctionne de la même façon sur tous les navigateurs.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom