Filtre nomargin pour la balise #LOGO

All contributions published for previous SPIP versions

Enlevez les marges des images générées par Spip.

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 :

$GLOBALS['espace_logos'] = 0;

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.)

/*
 *   +----------------------------------+
 *    Nom du Filtre :    nomargin                                              
 *   +----------------------------------+
 *    Date : mercredi 21 janvier 2003
 *    Auteur :  Thierry Gagnon (info a thierrygagnon point com)                                   
 *   +-------------------------------------+
 *    Fonctions de ce filtre :
 *     Il retire de la vignette d'un logo les propriétés d'espacement horizontale et verticales qu'ajoute Spip. Il place aussi le titre du document dans le ALT de la vignette. (noMargin = pas de marge)
	
 *   +-------------------------------------+ 
 *  
 * Pour toute suggestion, remarque, proposition d'ajout
 * reportez-vous au forum de l'article :
 * http://www.uzine.net/spip_contrib/article.php3?id_article=304
*/

function nomargin($texte) {
  $texte = (ereg_replace("hspace='3'","",$texte)); //Enlève la marge horizontale
  $texte = (ereg_replace("vspace='3'","",$texte)); //Enlève la marge verticale
return $texte;
}

//fin nomargin

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 :

<a href="#URL_ARTICLE"><img src="[./IMG/(#LOGO_ARTICLE|fichier)]" border="0" alt="[venez voir mon article n #ID_ARTICLE)]" class="spip_logo"></a>

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 :

<style type="text/css">
<!--
.spip_logo {
	border: 1px solid #000000;
	margin: 2px;
	float: left;

}
-->
</style>

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

updated on 22 February 2005

Discussion

7 discussions

  • Onyrodine

    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.

    Reply to this message

  • 1
    Mobcustom

    La solution sans filtre est quand même beaucoup plus simple !

    • 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

    Reply to this message

  • 2

    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

    • Ç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...

    • 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

    Reply to this message

  • 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.

    Reply to this message

  • 1

    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

    • En effet, le texte de la contrib utilisait une ancienne apellation de mon filtre. Elle a été corrigée à ||nomargin.

      Merci!

    Reply to this message

  • 1
    Jérémie

    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 ?

    • 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.

    Reply to this message

  • À 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. :)

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom