Des articles différents dans une même rubrique

Utiliser les mots-clés pour varier les mises en page

13 octobre 2005,
par Romy Têtue

Mots-clefs associés à cet article :

Pour varier la mise en page de sites SPIP, jutilise quelques mots-clés pour attribuer des styles CSS ou des squelettes différents.

Nous savons comment SPIP permet de différencier la mise en page selon les rubriques, mais cette fois-ci, il s’agit de mettre en page différemment des articles même au sein d’une même rubrique. Par exemple, dans un site consacré au cinéma, la rubrique traitant du film « La Maman et la Putain », devra contenir deux articles : une page textuelle résumant le film, et une galerie de photos du film. Ah oui, bonne idée... mais comment faire ?

Nous allons nous servir de mot-clés, pour affecter des looks différents aux articles. Créez un nouveau mot-clé « image » et attachez-le à chaque article dont vous souhaiterez une mise en page différente des autres articles du site.

Il faut ensuite créer deux looks différents : celui qui sera affecté aux articles pourtant le mot-clé numéro 1 « image », et le second qui sera affecté par défaut à tous les autres articles.
Il y a là plusieurs façons de procéder, selon que l’on intervienne uniquement sur l’apparence (dans la feuille de style CSS) ou directement sur le contenu (dans les squelettes donc).

méthode 1 : deux styles CSS différents

Cette méthode convient lorsqu’on ne souhaite qu’une différenciation esthétique, qui peut être obtenue par quelques nuances de style CSS. Par exemple : le titre de l’article résumant le film devra être noir, tandis que celui de la galerie d’images devra être gris.

1. Commençons par la feuille de style : il s’agit de créer une variante du style existant.
Dans la feuille de style principale, les titres sont déjà ainsi définis en noir :
h1.titre { color: black; }

Grâce à un style spécifique, ici nommé "image", nous déclarons ensuite une variante :
#image h1.titre { color: gray; }

Procédez de même si vous souhaiter assortir le sous-titre, et pour toute autre variante souhaitée : c’est-à-dire faite précéder chaque nouvelle définition de style par #image.

2. Il suffit ensuite d’appliquer cette variante aux pages souhaitées, grâce à toute petite une boucle insérée au bon endroit du squelette article.html, c’est-à-dire directement dans la balise body, comme suit :

<body <BOUCLE_style(MOTS) {id_article} {id_mot=1}>id="image"</BOUCLE_style>>

En clair : si l’article appelé est lié au mot-clef numéro 1, le code généré sera le suivant : <body id="image"> et toutes les variantes définies à #image seront appliquées à l’ensemble de la page ; sinon le code sera simplement <body>, sans aucune incidence particulière.

Vous pouvez évidemment appliquer ce style de la même façon à toute autre squelette (rubrique, breve, site, etc.) de votre choix.

méthode 2 : deux squelettes différents

Cette méthode convient si l’on a besoin d’afficher différemment les contenus d’une page à l’autre. Par exemple : le titre de l’article résumant le film viendra en premier, en haut de page, tandis la galerie d’image l’affichera discrètement en bas, en légende sous les images.

1. Nous allons donc créer deux squelettes différents, ainsi nommés : article-texte.html et article-image.html. Le premier, contenant les boucles et balises habituelles, sera utilisé par défaut. Les boucles et balises du second déterminent une mise en page différente du contenu (le titre s’affichera non plus en haut de page, mais en petit sous l’image, et nul besoin des balises #PS, #NOTES, par exemple). Je vous laisse le soin de construire vos boucles et vos squelettes comme vous l’entendez...

2. Puisqu’il s’agit de nouveaux squelettes, il ne faut pas oublier de créer les fichiers PHP assortis (inutile à partir de SPIP 1.9). Commençons par article-texte.php3, qui (sur le modèle de article.php3) devra contenir ceci :

<?php
$fond = "article-texte";
$delais = 24 * 3600;
include ("inc-public.php3");
?>

De même pour article-image.php3 :

<?php
$fond = "article-image";
$delais = 24 * 3600;
include ("inc-public.php3");
?>

3. Pour attribuer ces mises en page, nous utiliserons le fichier article.html, qui contiendra uniquement la boucle suivante (sans head ni body) :

<BOUCLE_article_principal(ARTICLES){id_article}>

<BOUCLE_image(MOTS){id_article}{id_mot=1}>
<INCLURE(article-image.php3){id_article}>
</BOUCLE_image>
<INCLURE(article-texte.php3){id_article}>
<//B_image>

</BOUCLE_article_principal>

En clair : si l’article appelé est lié au mot-clef numéro un, c’est le squelette article-image qui est utilisé, sinon le squelette article-texte.

Attention, la syntaxe d’inclusion est différente dans les versions supérieures à SPIP 1.8.1.

Le tour est joué !

Dans cet exemple, on a créé deux squelettes différents, mais on peut bien évidemment en créer davantage, selon les besoins.

Un exemple ?

On peut mixer ces deux méthodes : utiliser à la fois plusieurs squelettes article différents et des variantes de style CSS pour chacun.

Bien évidemment, j’utilise ces astuces sur ce site, mais je préfère prendre exemple sur un autre site, plus simple et plus éloquent (Colocation des Trois Tiers), où trois squelettes article différents sont utilisés :

Des squelettes pour différents types de page
Texte	Image	Album
`article-texte.html`	`article-image.html`	`article-album.html`

La mise en page utilisée par défaut est celle du squelette `article-texte.html` : une page article ordinaire.	Un mot-clé permet d’attribuer une mise en page particulière pour les images seules : l’image occupe la première place, et titre, auteur et date viennent s’afficher en dessous en légende.	Un second mot-clé permet d’attribuer une troisième mise en page différente pour les galeries d’image, affichant d’abord le cartouche (titre, soustitre, etc.) puis le portfolio, et permettant d’afficher, lorsqu’il y en a un, le texte de l’article en dessous.

Seuls trois squelettes suffisent à varier sensiblement la mise en page de centaines d’articles, sur l’ensemble du site, quelque soit leur rubrique, et ce sont les rédacteurs qui choisissent eux-mêmes parmi ces trois possibilités.

Vos commentaires

1. Le 1er mai 2006 à 01:08, par Bertil En réponse à : Des articles différents dans une même rubrique

juste pour te signaler que pour etre exacte, si-alors-sinon, ta boucle devrait être, il me semble :

<BOUCLE_article_principal(ARTICLES){id_article}>

<BOUCLE_image(MOTS){id_article}{id_mot=1}>
<INCLURE(article-image.php3){id_article}>
</BOUCLE_image>
</B_image>
<INCLURE(article-texte.php3){id_article}>
<//B_image>

</BOUCLE_article_principal>

2. Le 19 décembre 2006 à 00:59, par Bruno En réponse à : Des articles différents dans une même rubrique

Parfait, et très bonne idée la commutation des deux squelettes.

Par contre, je n’arrive pas à réaliser le code des boucles pour 3 squelettes articles différents.
3. Le 17 juillet 2007 à 12:08, par Nico En réponse à : Des articles différents dans une même rubrique

bonjour,

sympatique cet article. Malheureusement il n’est pas adaptable tel quel (en tout cas avec spip 1.9.3 dev). En effet tout fonctionne parfaitement sauf une chose : lorsque l’on rédige un article sur plusieurs pages , les liens vers les pages suivantes n’ont pas l’air fonctionnel ? ( ou alors ca vient de moi ??)

4. Le 20 juillet 2007 à 08:59, par ? En réponse à : Des rubriques différentes les unes des autres

Bonjour,
Je souhaiterais utiliser une feuille de style différente pour mes 5 rubriques principales. J’ai entré ce code dans mon head mais apparement celà ne fonctionne pas... Pouvez-vous m’éclaircir SVP ?

[(#REM) Choix des CSS selon les secteurs ] 
<link rel="stylesheet" href="#CHEMIN{styles/style_perso.css}" type="text/css" />         
         <BOUCLE_vert(RUBRIQUES){id_rubrique}{id_secteur=2}> 
                 <link rel="stylesheet" href="[(#CHEMIN{styles/rubrique2_vert.css}|direction_css)]" type="text/css" /> 
         </BOUCLE_vert>   
         <BOUCLE_bleu(RUBRIQUES){id_rubrique}{id_secteur=3}> 
                 <link rel="stylesheet" href="[(#CHEMIN{styles/rubrique3_bleu.css}|direction_css)]" type="text/css" /> 
         </BOUCLE_bleu>  
                  </B_bleu>
                  </B_vert>

5. Le 24 juin 2010 à 22:03, par A.R. En réponse à : Des articles différents dans une même rubrique
Bonjour, & merci pour ce tuto

Je connais bien le HTML, et suffisamment le CSS. Je comprends le Php. Je suis débutant avec Squelettes et architecture SPIP, que j’appréhende petit à petit, bien qu’ayant fait 2 sites SPIP encore en fonctionnement depuis 2003

Mon problème : Pour des articles spécifiques, j’essaie de mettre une image de fond à mon site. Votre méthode 1 me semblait adaptée. Mais ça ne fonctionne pas. Je vide le cache régulièrement, mes tests sont réalisés en prévisualisation

Mais d’abord, la méthode 1 fonctionne-t-elle sur SPIP 1.8.1 ?
Est-ce que la prévisualisation permet de rendre compte de l’effet ?
Le site étant « en production », je ne peux me permettre de tester sur des articles publiés. J’ai évité l’édition en local car elle est longue à installer et paramétrer pour le résultat escompté.

Mes essais : J’ai placé la boucle dans site.html mais j’essaie aussi avec article.html.

Le code dans mon article est le suivant :
<html><div class="arsene"> <a href="#" target="_blank"><img src="http://fonderie-aix.com/IMG/jpg/ZZ10---aff-test-2-800-72-51.jpg" alt="" border="0" /></a> </div></html>
et dans style.css :
#css_ZZ_2010 .arsene div,img{ position: absolute; top: 0; width: 800px; height: 1132px; text-align: center; margin-top: 20px; margin-left: -400px; left: 50%; overflow: visible; }
Votre avis, SVP ?

Bien à vous, A.RICHARD
6. Le 24 juin 2010 à 22:11, par A.R. En réponse à : Des articles différents dans une même rubrique

Pardon d’être long.

J’ai eu des résultats médiocres en incluant le CSS ci’dessus dans une balise « style » dans le corps de mon article, « à la manière myspace », bien que je déteste ça.

L’image s’affichait mais elle était intégrée à une div limitée par des ascenceurs à droite et en bas malgré du css de type clear:both ou/et float:visible...

Bref... je suis bloqué !

Merci d’avance ! A.RICHARD
7. Le 24 juin 2010 à 22:56, par Romy Têtue En réponse à : Des articles différents dans une même rubrique

La syntaxe des derniers extraits de code a évolué après SPIP 1.8.1 mais ces méthodes restent valables.

@ A.R. : difficile de comprendre quel est votre problème sans voir... et les extraits de code HTML et CSS (pas de SPIP ?) que vous citez ne correspondent pas : peut-être vouliez-vous cibler div.arsene img et non pas #css_ZZ_2010 .arsene div, img ?
8. Le 28 juin 2010 à 12:51, par A.R. En réponse à : Des articles différents dans une même rubrique

Bonjour et merci de votre réponse !

voici un aperçu de ce que j’obtiens :

http://lnk.sk/awfu

Je me demande si dans le cas de l’ajout d’une simple classe, un mot-clé est nécessaire..?

Je me réponds sans être sûr : une technique SPIP risque d’être nécessaire car je risque d’avoir des problèmes de chevauchement : z-index 0 : je recouvre mont texte, et -1, je ne suis pas visible... .

Encore merci.

A.RICHARD
9. Le 28 juin 2010 à 15:24, par Romy Têtue En réponse à : Des articles différents dans une même rubrique

Il faudrait voir... la page HTML incriminée (pas une capture d’écran) ! Vous pouvez exposer votre problème, qui semble peu en rapport avec cet article, dans les espaces d’entraide de SPIP.