Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Idées pour un blog (2)

- Auteur : Si tu suis mon regard

  • 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

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.

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Alice 30/08/2012 18:05

Bonsoir iv-oam ! ;-)
Et ces morceaux de code se placent où exactement ?

Iv-oam 01/09/2012 11:32

J'ai ajouté dans l'article la réponse.
Par exemple, le bloc peut être ajouté après le bloc commentaires généralement écrit ainsi :

Voir l'article http://photonautesassocies.overblog.com/comprendre-le-code-html-suite

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...