S'identifier - S'inscrire - Ecrire un article - Contact

Support des formats d'articles dans les modèles

Par Stephane • Tutoriels • Vendredi 09/05/2008 • 7 commentaires  • Lu 4940 fois • Version imprimable

Mots-clés : , , ,


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 :


Commentaires

par olivier le Mercredi 04/06/2008 à 15:57

je comprend bien au début et à la fin. Mais au milieu, je ne sais pas trop ce que ça veut dire.


Re: par Stephane le Mercredi 04/06/2008 à 19:20

Stephane Plus précisément ?


Re: par olivier le Jeudi 05/06/2008 à 12:51

en fait, je ne vois pas trop ou faire les modifs.


Re: par Stephane le Jeudi 05/06/2008 à 12:58

Stephane Le plus simple c'est que tu prennes la nouvelle version de Goofy pour voir ou sont les modifications citées plus-haut. Et tu les mets ensuite au même endroit dans ton modèle perso.


Re: par olivier le Jeudi 05/06/2008 à 14:38

en fait, je pensais faire l'inverse.
Choper goofy nouvelle version et corriger les styles.


Re: par Mitra le Jeudi 05/06/2008 à 14:03

Mitra Olivier,
Je suis allée sur ton site pour voir sur quel modèle tu étais et j'ai vu ça en bas de la page d'accueil :

J'adore:-)


Re: par olivier le Jeudi 05/06/2008 à 14:52

et oui, je suis fier d'être chez Viabloga moi !



Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Discussions actives (+ commentaire)


Ailleurs sur ViaBloga


Archives par mois