Idées pour un blog (2)

30/08/2012 18:05

Mettre en valeur l'article suivant ou précédent

La plupart des thèmes proposés permet de naviguer entre les posts avec sous l'article les liens suivant/précédent ou les titres des articles... Mais ça ne donne pas forcément envie aux visiteurs de cliquer.

Il est pourtant possible d'afficher un résumé avec l'image de couverture du post précédent et/ou du post suivant... Et ce grâce à l'utilisation du code twig qui permet d'afficher dynamiquement les éléments du blog.

aperçu d'un encart "article suivant" sur mon blog Si tu suis mon regard

Cela fonctionne simplement avec un objet Navigation qui comprend deux attributs : PreviousPost et NextPost (article précédent et article suivant). Chaque attribut a plusieurs propriétés : Permalink (lien), Title (Titre), Snippet (extrait)... Mis bout à bout, cela donne pour le titre par exemple le titre de l'article suivant ainsi : Navigation.NextPost.Title

Inclus dans le code HTML, cela peut donner ceci pour un encart présentant sous l'article l'article suivant :

Extrait code HTML :

{% if Navigation.NextPost is not empty and Navigation.NextPost.Cover is not empty %}
  <div class="excerpt">
       <!-----image de couverture---->
       <div class="picture"> 
       <img alt="{{ Navigation.NextPost.Title }}" src="{{ Navigation.NextPost.Cover|resize(220)|crop }}" />    
       </div>
       <!-----titre et extrait---->
       <div class ="resume">
        <h3>
        <a href="{{ Navigation.NextPost.PermaLink }}" title="Voir l'article">{{ Navigation.NextPost.Title }}</a>
        </h3> 
        <p class="meta"><span>{{ Navigation.NextPost.Date|date("d m Y") }}</p>
        <p>{{ Navigation.NextPost.Snippet }}</p>
        </div>
   </div> 
{% endif %}

Extrait code CSS : Pour la mise en forme avec le CSS, les classes de style permettent de positionner l'image et de justifier le texte.

.excerpt .picture {position: relative; float: left; margin-right: 15px; min-height: 150px;}

.excerpt .resume p{text-align:justify;}

Cela marche aussi avec l'article précédent en remplaçant NextPost par PreviousPost.

L'extrait de code HTML se place où vous voulez soit avant ou après le bloc commentaires, dans une colonne, dans le pied de page ou pourquoi pas dans l'en-tête lors de l'affichage d'un seul article (repérer ou ajouter {% if is single %} {% endif %})

La nouvelle plateforme offre davantage de possibilités et, à mon modeste niveau, je n'en ai découvert qu'une petite partie pour l'instant.