Vie de ViaBloga

Mots-clés : Modification des Modèles, Gourou, Pitr, format d'article

---

Cet article est destiné aux personnes qui créent des modèles de mise en page, ou qui ont un modèle de mise en page personnel. Il détaille les modifications nécessaires pour qu'un modèle supporte les formats d'articles.

Le principe :

Lorsque l'utilisateur choisit des formats d'articles dans le menu administrateur > mise en page > présentation du contenu, les objets "summary" des pages de sommaires de rubriques (et la page principale) contiennent des attributs supplémentaires pour définir le format de l'article et sa position (au début d'une ligne de 3 colonnes par exemple). Ces attributs peuvent être utilisés pour spécifier des classes (et avoir des styles CSS différents), ou générer du code différent.

Les nouveaux attributs :

• format : le format de l'article (valeurs: headline, normal, 2cols, 3cols, line)
• start_table : 'on' si l'article est au début d'une série d'articles sur 2 ou 3 colonnes
• start_row : 'on' si l'article est au début d'une ligne d'articles sur 2 ou 3 colonnes
• mid_row : 'on' si l'article est au milieu d'une ligne d'articles sur 3 colonnes
• cell : 'on' si l'article fait partie d'une série d'articles sur 2 ou 3 colonnes
• cell_width: 50% ou 33% si l'article fait partie d'une série d'articles sur 2 ou 3 colonnes respectivement
• end_row : 'on' si l'article est à la fin d'une ligne d'articles sur 2 ou 3 colonnes
• end_table : 'on' si l'article est à la fin d'une série d'articles sur 2 ou 3 colonnes

Les nouvelles "balises HTML"

En pratique, pour les colonnes, il est aisé d'utiliser des tables HTML.

A noter : afin de pouvoir aligner verticalement tous les titres d'articles, les corps des articles, et les bas d'articles, j'ai ajouté des balises spéciales <tr_multiple>, <td_header> et <td_footer>. Ces balises sont ensuite transformées en véritable HTML.

Exemple :

<tr_multiple>
<td>
<td_header>Titre 1</td_header>
Texte 1
<td_footer>Signature 1</td_footer>
</td>
<td>
<td_header>Titre 2</td_header>
Texte 2
<td_footer>Signature 2</td_footer>
</td>
</tr_multiple>

est transformé en :

<tr class="tr_header">
<td>Titre 1</td>
<td>Titre 2</td>
</tr>
<tr class="tr_body">
<td>Texte 1</td>
<td>Texte 2</td>
</tr>
<tr class="tr_footer">
<td>Signature 1</td>
<td>Signature 2</td>
</tr>

Il faut ajouter "pragma html_process_tr_multiple_tags" en haut du modèle pour que celà fonctionne.


Modification de Pitr

Pour illustration, voici comment faire pour ajouter le support des formats d'articles à Pitr :

pragma html_process_tr_multiple_tags

Ajouter des styles pour les formats :

.format_headline h2 {
        font-size:2em;
}
.format_2cols h2 {
        font-size:1.2em;
}
.format_3cols h2 {
        font-size:1em;
}
.format_line h2 {
        font-size:1em;
}

.tr_header, .tr_footer, .tr_body {
        vertical-align:top;
}

Au début de l'objet summary:

<object class=summary count=16>

<if_attribute start_table>
<table style="table-layout:fixed;">
</if_attribute>

<if_attribute start_row>
<tr_multiple>
</if_attribute>

<if_attribute cell>
<td style="width:<attribute cell_width>">
</if_attribute>

<td_header>

A la fin de l'objet summary :

</td_footer>

<if_attribute cell>
</td>
</if_attribute>

<if_attribute end_row>
</tr_multiple>
</if_attribute>

<if_attribute end_table>
</table>
</if_attribute>

Au début de l'objet summary, ajouter la classe format_<attribute format>, et </td_header>

<if_attribute rating==1>
<div class="post hreview format_<attribute format>">
<h2><a class="url fn" href="<attribute news_url>" rel="bookmark" title="Lien permanent">
</if_attribute>
<if_attribute rating!=1>
<div class="post format_<attribute format>">
<h2><a href="<attribute news_url>" rel="bookmark" title="Lien permanent">
</if_attribute>
<attribute title></a></h2>

<if_attribute display_article_sub_title==on>
<if_attribute sub_title!=><h3><attribute sub_title></h3></if_attribute>
</if_attribute>

</td_header>


Au milieu de l'objet summary, ajouter <td_footer>, ainsi que l'attribut description et une classe pour mettre en valeur les articles en Une.

<div class="entry">

<if_attribute rating==1>
<attribute rating_bar>
</if_attribute>

<div class="post_format_<attribute format>"><attribute text>
<attribute description>
<attribute cmd></div>

</div>

<td_footer>

Ajouter une condition sur display_article_page_views :

<if_attribute display_article_page_views==on>
<if_attribute page_views!=> | Lu <attribute page_views> fois</if_attribute>
</if_attribute>

Et voilà !

D'autres articles sur des thèmes similaires :

• Code du Modele Pitr - 05/12/07
• Elargir l'éditeur du modèle de mise en page - 14/06/07
• Accès à la balise head - 03/05/07
• Du web 2.0 sur VinsdeLoire.info - 18/01/07
• Comment modifier les noms de mois avec day_t.month ? - 12/12/07
• Modifier un fichier CSS externe appelé par mon blog. - 26/07/07
• Accès au code source -- résolu - 29/04/07
• Comment ajouter son propre fond background au blog? - 13/07/06
• Code généré par les blocs des modèles de mise en page - 03/11/05
• Comment supprimer l'option "article précédent/suivant" en bas d'article ? - fait - 15/01/09

---