Lorsque l’on affiche le logo d’une rubrique, le logo d’un article ou la vignette d’un document, Spip attribue automatiquement une marge de trois pixels en hauteur et en largeur à l’image en question. Ces paramètres sont attribués à même le code HTML et cela peut être agaçant si on tente de modifier leur affichage par CSS.
La méthode la plus simple
J’avais conçu ce filtre pour retirer ces marges de force. Depuis, j’ai découvert une façon encore plus simple de modifier les marges par défaut des logos.
Il suffit de placer la ligne suivante dans le fichier mes_fonctions.php3 :
C’est tout ! Vous pouvez aussi remplacer le zéro par la largeur (en pixels) de la marge désiré.
Pour plus d’information sur le fichier mes_fonctions et sur les variables de personnalisation, veuillez consulter le manuel officiel de Spip.
Installer le filtre |nomargin
Si la solution cité plus haut ne vous convient pas, ou si vous utilisez une version de Spip antérieure à la 1.6, je vous invite à suivre les instructions suivantes pour installer le filtre |nomargin :
1) Copier le code suivant dans le fichier mes_fonctions.php3 à la racine de votre site.
(Voir au bas de la page « Les filtres de SPIP » pour plus d’information sur le fichier mes_fonctions.php3.)
2) Placer le filtre dans la balise du logo. Parce que le logo s’attends à ce que le premier filtre indique un hyperlien, il faut le mettre en deuxième.
Voici comment l’utiliser si vous n’ajoutez pas d’hyperlien dans la balise :
[(#LOGO_ARTICLE||nomargin)]
Remarquez les deux barrez verticales ( || ) entre ARTICLE et logo. Si vous voulez joindre un hyperlien à votre logo, placez-le entre ces deux barres. Si vous n’utilisez qu’une seule barre le premier filtre ne sera pas appliqué et sera utilisé comme hyperlien.
Vous pouvez ensuite modifier l’apparence de votre logo (marges, encadrement, etc.) en définissant un style « .spip_logo » dans votre feuille de style.
Solution « sans filtre »
On peut aussi circonvenir le problème des marges appliquées par Spip en bâtissant sois-même le logo de son article. Il n’est donc plus nécessaire d’utiliser de filtre compliqué.
Voici donc un exemple de logo utilisant des balises SPIP intégrées dans du HTML :
Comment modifier les marges et l’apparence du logo
Les deux solutions offertes ici (avec et sans filtre) proposent d’utiliser un style CSS personnalisé nommé « spip_logo ». Cette classe n’existe pas par défaut et vous devez la créer vous-même.
En guise d’exemple, voici une définition pour le style spip_logo que vous pourriez insérer entre les balises
et de vos pages :Ce style applique une bordure (border) noire de un pixel et une marge (margin) de deux pixels de chaque côté de l’image. Elle indique aussi à l’image de se placer à gauche des éléments qui la suivent (float) et de laisser ces éléments se placer sous elle au besoin si il y a débordement.
Pour plus d’information sur les styles CSS, incluant comment utiliser des feuilles de styles externes, je vous suggère de lire sur ce sujet sur des sites spécialisés comme AllHTML.
Thierry Gagnon
Studio Eau Moirée
Vos commentaires
# Le 3 mars 2011 à 13:43, par Onyrodine
En réponse à : Filtre nomargin pour la balise #LOGO
J’ai essayé « La méthode la plus simple » en modifiant mes_fon,ction.php et ca ne fonctionne pas. Mon site tourne en SPIP 1.9.2d [11132]. Vous avez aussi se problème ? Une solution ?
Merci
O.
Répondre à ce message
# Le 3 août 2005 à 03:52, par Mobcustom
En réponse à : > Filtre nomargin pour la balise #LOGO
La solution sans filtre est quand même beaucoup plus simple !
# Le 4 août 2005 à 13:39, par ?
En réponse à : > Filtre nomargin pour la balise #LOGO
En effet, mais cette solution n’a été ajoutée à cette contrib qu’à près sa publication. Aussi, la solution « $GLOBALS[’espace_logos’] = 0 ; » n’était pas disponible à l’époque. :P
Répondre à ce message
# Le 9 juin 2004 à 09:51, par Dams
En réponse à : > Filtre nomargin pour la balise #LOGO
Salut,
Une question : est-il possible d’appliquer cette fonction aux images contenue dans le texte d’un article (insertion d’image dans le texte depuis l’espace privé) ? si oui, comment ou as-tu une idée pour un début de solution ?
Amicalement
# Le 11 juin 2004 à 23:58, par Thierry Gagnon
En réponse à : > Filtre nomargin pour la balise #LOGO
Ça fonctionnerait peut-être en appliquant le filtre |nomargin à la balise #TEXTE et en ajoutant ces lignes au filtre :
$texte = (ereg_replace("hspace=’5’","",$texte)) ; //Enlève la marge horizontale des images insérées dans l’article
NOTE : Je n’ai pas encore testé cette hypothèse...
# Le 5 janvier 2005 à 14:20, par yvan
En réponse à : > Filtre nomargin pour la balise #LOGO
Cette exemple fonctionne correctement :
illustration :
Version SPIP : 1.7.2
Site : http://www.lesverts32.org/article.php3?id_article=1
parti texte : [(#TEXTE|limit_images_size260,0,1||nomargin)]
parti mes_fonction.php3 :
$texte = (ereg_replace("hspace=’5’","",$texte)) ; //Enlève la marge horizontale
Répondre à ce message
# Le 3 novembre 2004 à 18:09, par Thierry Gagnon
En réponse à : > Modifications
J’ai ajouté les instructions concernant la variable de personalisation. J’ai aussi retiré du filtre le code qui enlevait le alt=’’ et qui ajoutait une classe CSS désormait superflue.
Répondre à ce message
# Le 17 juin 2004 à 12:32, par RB
En réponse à : > Filtre nomargin pour la balise #LOGO
Est-ce qu’il n’y a pas une erreur quand vous indiquez qu’il faut mettre #LOGO_ARTICLE||logo_nomargin alors que votre filtre s’appelle simplement nomargin.
Pour ma part, cela ne fonctionne que si je mets : #LOGO_ARTICLE||nomargin
# Le 19 juin 2004 à 19:08, par Thierry Gagnon
En réponse à : > Filtre nomargin pour la balise #LOGO
En effet, le texte de la contrib utilisait une ancienne apellation de mon filtre. Elle a été corrigée à ||nomargin.
Merci !
Répondre à ce message
# Le 2 février 2004 à 16:36, par Jérémie
En réponse à : > Filtre nomargin pour la balise #LOGO
J’ai bien compris, il supprime le alt ? C’est non seulement ridicule (title marche très bien avec alt, les deux ont des utilisations et des objectifs tout à fait différents) mais va à l’encontre des normes du W3C... ils font comment maintenant ceux qui ne peuvent afficher les images, ou qui ne peuvent les voir ?
# Le 2 février 2004 à 18:26, par ?
En réponse à : > Filtre nomargin pour la balise #LOGO
Je suis pleinement conscient de l’importance du ALT. Le problème est que Spip ajoute alt="" (alt = vide) à l’image, ce qui est pire que rien, à mon avis, intégrisme W3C nonobstant. ;)
Puisqu’il n’est pas possible de définir de ALT lorsqu’on utilise la balise #LOGO, on peut au moins définit un TITLE dans l’hyperlien. C’est donc un compromis imparfait pour un monde imparfait…
Ceci dit, rien n’empêche le webmestre averti de modifier le filtre à son goût et y mettre
(ereg_replace("alt=''", alt=''" "class='spip_logo'",$texte));afin de garder le alt vide intact.Répondre à ce message
# Le 24 janvier 2004 à 17:38, par Thierry Gagnon
En réponse à : > Styles CSS
À la demande générale, j’ai ajouté des instructions plus complètes sur comment modifier les marges de l’image en utilisant les CSS. :)
Répondre à ce message