Article sur 2 colonnes

Petit article pour tester le principe de la mise en colonne (basé sur une proposition trouvée sur le forum “Créer ses squelettes” du site de SPIP).

Pour pouvoir finaliser un site sur lequel je travaille actuellement (Les Mémoires du Touradon) j’avais besoin de trouver une solution pour mettre en page les articles afin qu’ils entrent parfaitement dans la mise en forme graphique du site.

Pour cela j’ai besoin de découper l’article en deux colonnes, l’une se trouvant sur la partie droite de la page et l’autre sur la partie gauche.

En cherchant sur le site de SPIP et celui de SPIP-CONTRIB j’ai trouvé cette solution [1].

Comme elle n’est pas complètement présentée sur le forum je me propose de le faire ici afin qu’elle puisse servir à tous ...

Pour voir la chose en action ...

Méthode utilisant un tableau pour l’affichage en 2 colonnes

1 - Créer le fichier mes_fonctions.php3 (si vous ne connaissez pas on en parle ici)

2 - Puis à l’intérieur de ce fichier copier/coller le code suivant :

/*
 *   +----------------------------------+
 *    Nom du Filtre : afficher_en_colonnes                                               
 *   +----------------------------------+
 *    Date : mardi 1er novembre 2004
 *    Auteur :  "buzz"  : buzz@buzzkompany.net
 *    D'après une proposition de Nicolas Krebs sur le forum Créer ses squelettes http://www.spip.net/threadspip2015-2998.html                                     
 *   +-------------------------------------+
 *    Fonctions de ce filtre :
 *     Il sert a présenter un article sur deux colonnes sur une page
 *   +-------------------------------------+ 
 *  
 * Pour toute suggestion, remarque, proposition d'ajout
 * reportez-vous au forum de l'article :
 * http://www.uzine.net/spip_contrib/article.php3?id_article=759
*/


function afficher_en_colonnes($texte) {
$page = explode('-----', $texte);
$num_pages = count($page);
$resultat = "<table width=\"100%\"><tr>";
for ($i = 0; $i < $num_pages; $i++) {
$resultat .= "<td valign=\"top\" width=\"45%\">".$page[$i]."</td><td width=\"10%\"></td>";
}
$resultat .= "</tr></table>";
return $resultat;
}

3 - Enfin dans votre page article.html, au sein de votre squelette, vous remplacez le #TEXTE par [(#TEXTE*|afficher_en_colonnes|propre)].

4 - Lors de la rédaction de votre article, la césure de texte se fera en plaçant 5 tirets consécutifs dans votre texte.

5 - L’affichage actuel en tableau est généré par le code HTML compris dans le code contenu dans le fichier mes_fonctions.php3, j’y ai mis un espacement de 10% entre les deux colonnes. Il vous est possible de modifier cette mise en page en modifiant ces éléments.

Méthode utilisant une feuille de style pour l’affichage en 2 colonnes

1 - Créer le fichier mes_fonctions.php3 (si vous ne connaissez pas on en parle ici)

2 - Puis à l’intérieur de ce fichier copier/coller le code suivant :

/*
 *   +----------------------------------+
 *    Nom du Filtre : afficher_en_colonnes_CSS                                               
 *   +----------------------------------+
 *    Date : mardi 1er novembre 2004
 *    Auteur :  "buzz"  : buzz@buzzkompany.net
 *    D'apr&egrave;s une proposition de Nicolas Krebs sur le forum Créer ses squelettes http://www.spip.net/threadspip2015-2998.html                                     
 *   +-------------------------------------+
 *    Fonctions de ce filtre :
 *     Il sert a présenter un article sur deux colonnes sur une page
 *   +-------------------------------------+ 
 *  
 * Pour toute suggestion, remarque, proposition d'ajout
 * reportez-vous au forum de l'article :
 * http://www.uzine.net/spip_contrib/article.php3?id_article=759
*/

function afficher_en_colonnes_css($texte) {
        
        $page = explode('-----', $texte);
        
        $num_pages = count($page);

        $resultat = "";
        for ($i = 0; $i < $num_pages; $i++) {
		$resultat .= "<div class=\"buzz\"><span class=\"colonnes\">".$page[$i]."</span></div>";
        }
        $resultat .= "";
        return $resultat;
}

// FIN du Filtre afficher_en_colonnes_CSS

3 - Enfin dans votre page article.html, au sein de votre squelette, vous remplacez le #TEXTE par [(#TEXTE*|afficher_en_colonnes_css|propre)].

4 - Puis installez ce code CSS dans l’un des fichiers de style que vous utilisez sur votre site (moi je l’ai mis dans le fichier habillage.css) afin de pouvoir diposer de la mise en page :

div.buzz span.colonnes {
float: left;
text-align: justify;
width: 42%;
padding: 3%; 
}

5 - La mise en page de vos colonnes ont tout intérêt à être vérifié après avoir écrit votre article afin que la première partie soit plus longue que la seconde (facilité de lecture) ...

Pour cela il vous suffit de placer correctement les 5 tirets qui feront la césure de votre texte.

Footnotes

[1proposée par Nicolas Krebs sur le forum SPIP

updated on 12 June 2005

Discussion

12 discussions

  • Bonsoir,

    J’aime beaucoup ce petit bout de code qui me sert sur quelques sites, j’utilise la méthode css…
    Je la préfère aux colonnes CSS3 car ça permet d’enchaîner les colonnes exactement où l’on veut, contrairement aux colonnes CSS3 qui ne laissent pas la main sur le changement de colonne.

    Depuis SPIP 3.1.1 j’ai un petit souci car les 5 tirets sont désormais interprétés comme une ligne de séparation. J’ai donc remplacé les 5 tirets par 5 + et ça fonctionne très bien.

    Mon problème est que ces 5 + apparaissent dans les extraits d’articles pour les listes d’articles. Il m’arrive d’avoir des images dans la colonne de gauche, qui ne ressortent donc pas dans les extraits, et alors immédiatement on a les + suivis de la seconde colonne… Et pourtant les 5 tirets n’apparaissaient pas, eux…

    Je n’ai pas trouvé de solution, les filtres comme replace ou match associés à la balise #INTRODUCTION font tout disparaître, pas seulement les + mais le paragraphe entier. Si quelqu’un peut m’aider à créer le filtre qui n’enlèverai que cette suite de caractère, ça me sauverait la vie ;-p !

    D’avance merci,
    Karen

    Reply to this message

  • Reply to this message

  • 3
    Julien

    Petit soucis.

    Le code semble faire sauter les balises <p>...</p> du premier paragraphe de chaque colonne.

    Comment faire pour les récupérer ?

    • En fait, chez moi il suffit de faire un retour chariot après les 5 tirets pour que les colonnes démarrent toutes à la même hauteur.

    • Julien

      Le retour chariot ne règle pas mon problème, car le premier paragraphes avant même les 5 tirets est aussi altéré. J’ai toujours, pour schématiser:

      <ma_colonne1>
        paragraphe sans balise
        <p>paragraphe avec balise</p>
        <p>paragraphe avec balise</p>
      </ma_colonne1_fin>
      
      <ma_colonne2>
        paragraphe sans balise
        <p>paragraphe avec balise</p>
        <p>paragraphe avec balise</p>
      </ma_colonne2_fin>

      J’ai résolu mon problème en plaçant une ouverture de paragraphe dans le $resultat de la fonction, juste après l’ouverture du span:

      $resultat .= "<div class=\"buzz\"><span class=\"colonnes\"><p>".$page[$i]."</span></div>";

      Julien

    • Julien

      Petite amélioration de la fonction qui permettra d’ajouter dynamiquement une class différente pour vos colonnes.

      Balises (largeur 25% ou passer vos propres paramètres):

      [(#TEXTE*|afficher_en_colonnes{25}|propre)]

      Style (vos différentes class css):

      /*  Faite passer 25 dans le paramètre de la balise pour avoir des colonnes de 25% */
      
      div.buzz span.colonnes-25 {
         float: left;
         text-align: justify;
         width: 25%;
         padding: 3%;
      }
      
      /* Faite passer 50 dans le paramètre de la balise pour avoir des colonnes de 50% */
      
      div.buzz span.colonnes-50 {
         float: left;
         text-align: justify;
         width: 50%;
         padding: 3%;
      }

      Fonction (ajout de la variable $colum):

      function afficher_en_colonnes_css($texte,$column) {
              
              $page = explode('-----', $texte);
              $num_pages = count($page);
      
              $resultat = "";
              for ($i = 0; $i < $num_pages; $i  ) {
                      $resultat .= "<div class="buzz"><span class="colonnes-$column">".$page[$i]."</span></div>";
              }
              $resultat .= "";
              return $resultat;
      }

      Julien.

    Reply to this message

  • 2

    Bonjour,

    Je développe un site avec un défilement horizontal pour afficher des galeries d’images. Parfois il y a tout de même du texte et les 2 colonnes sont alors très utiles. La coupure volontaire est très bien, car cela permet de traiter les 2 colonnes bien mieux qu’un automatisme qui pourrait provoquer des veuves et des orphelines.

    Du coup, avec mon développement horizontal, je verrais bien la possibilité d’avoir un nombre de colonnes «infini», c’est à dire une nouvelle colonne à chaque fois qu’on met 5 traits!

    Mais je ne maitrise pas du tout php.
    Voilà, voilà...

    • François

      Je réponds forcément un peu tard ...
      Au vu du code que j’ai lu, le php découpe le texte en auttant de colonnes que tu veux !
      Peut être que cela t’aura été utile ....

    • Bon sang, mais ça marche! Dans mes tentatives, j’avais juste oublié de donner une largeur suffisante à la page!

      Merci, un peu tard aussi...

    Reply to this message

  • 3

    Bonjour.

    Je suis intéressé par la présentation des articles de la page d’accueil sommaire.html, en 2 colonnes, ET NON les articles entier sur leur page publique.

    Comme vous le savez, en original la présentation des articles est un alignement : un après l’autre sous forme de liste avec le dernier publié en haut.

    Je suis avec SPIP 1.9.1 et vraiment novice et “bidouilleur” avec des bouts de script. J’interviens avec Dreamveawer.

    Mon modeste site est POPULI-SCOOP url : http://www.argotheme.com/organecyberpresse/

    Capture d’écran en image ci-jointe

    Merci d’avance.

    • argotheme

      Salut...

      C’est sur le sommaire.html et NON article.html que je suis intéressé par les 2 COLONNES.
      Comme le montre la présentation (image) de l’accueil, c’est le sommaire pour qui c’est mieux présentable de mettre 2 colonnes.

      Je cherche toujours le bout de script... Et l’emplacement exact où le mettre.

    • Bonjour...
      J’arrive peut-être un peu tard... Quoique, je viens de cliquer sur le site il et toujours sur une colonne....

      Voilà ma solution "provisoire.. un peu de bon vieux html dans le squelette sommaire.html. (dans le “bloc-contenu”)

      <table border=0 cellspacing=5 cellpadding=5 width=100%>
      <tr>
      <td valign=bottom width=60%> 
      	<!---- colonne de gauche:  j'y mets un ou des articles d'éditorial (repérés par un mot clef) ---->
      	<INCLURE{fond=inc/inc-sommaire-edito}{lang}{self=#SELF}>
      </td>
      <td valign=bottom width=40%> 
      	<!---- colonne de droite : j'y mets la liste des articles récents avec les premières lignes de chaque article---->
      	<INCLURE{fond=inc/inc-sommaire-articles}{lang}{self=#SELF}>
      </td>
      </tr>
      </table>

      On peut bien sûr mettre directement ses boucles dans le squelette, mais cette solution est plus élégante.

      Cela implique aussi de modifier (dans le fichier de style) la largeur de l’ensemble .. (au moins 950 pixels sinon, les 2 colonnes seront trop étroites si on conserve la 3° colonne de droite existante)

      Je réfléchis à une solution encore plus élégante en CSS (en appelant pour ce squelette des divisions à l’intérieur du bloc-contenu), mais je me suis heurté pour le moment aux incompatibilités de IE.... donc je laisse en l’état... mais si quelqu’un a une solution, je suis preneur !!!

    • On attend avec impatience et reconnaissance !

    Reply to this message

  • Bonjour,

    Comme cette fonction a l’air de fonctionner sous toutes les versions de SPIP, je l’essaye donc sous la 2.0.9. Or, il s’avère que je ne parviens pas à faire fonctionner la bête. J’ai droit à un beau cadre Erreur : filtre « afficher_en_colonnes » non défini sur la page article.
    Or, dites moi si je me trompe, je prends le code tel qu’il est et je le place dans un fichiers mes_fonctions.php dans le répertoire de mon squelette. Est bien ça ?

    Merci d’avance pour vos réponses.

    Honorius

    Reply to this message

  • 1
    Le Joker

    ca oblige d’ajouter “à la main” une césure (-----) au milieu de l’article !
    Sur un site de 10000 articles, tu vois le boulot ???

    sur le site du herald tribune ( les stories) ils ont trouvé une solution en javascript qui permet un affichage 3 colonnes de manière dynamique. Je me casse le nez dessus pour le moment mais si je trouve le moyen de coder un équivalent en php, il y aura un beau filtre à la clé

    Reply to this message

  • 1
    poiraud

    Bonjour

    C’est la page plan.html que je voudrais mettre en deux colonnes
    alors je N’ai nulle part #TEXTE

    donc je ne sais pas où appliquer le filtre !

    Comment puis-je faire ?

    Merci !

    b.poiraud@wanadoo.fr

    • Salut !

      Ce filtre n’est pas conçu à l’origine pour la mise en page en 2 colonnes d’une page plan d’un site sous SPIP mais plutôt pour une page article voir même une page rubrique incluant un article ...

      Pour faire une mise en page de ta page plan il va falloir jongler plus sur les définitions de tes boucles et un peu de css pour faire apparaître ça sur 2 colonnes !

    Reply to this message

  • 1

    N’y a t il pas moyen d’éviter les 5 tirets ? et que le texte se divise automatiquement ?

    Si je mets 5 tirets “trop tôt” par exemple, dans la colonne de gauche j’aurais un blanc qui pourrait paraître inoportun alors que la colonne de droite irait bien jusqu’au bout de ma page...

    • Salut !

      Non je n’ai pas cherché à faire ce genre de modifications.

    Reply to this message

  • Reply to this message

Ajouter un commentaire

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