Comment mettre une bordure aux images de SPIP ?

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 :

<img[ src="(#LOGO_ARTICLE|fichier)"][ alt="(#TITRE|textebrut|couper{60}|attribut_html)"][ width="(#LARGEUR)"][ height="(#HAUTEUR)"] class="thumb spip_logo" />

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_logo { 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.