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è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_CSS3 - 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.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
