L'image par défaut dans les templates de ParoiCMS

Lorsqu'une landing page présente une liste d'autres pages web, comme par exemple une liste d'articles dans un blog, on a souvent besoin d'accompagner le titre de chaque page par une image d'illustration représentant l'article.

Avec ParoiCMS, un document peut avoir une image mise en avant (featured image en anglais). C'est elle qui est la plus pertinente pour servir d'image d'illustration. Mais il arrive que l'utilisateur ne fournisse pas d'image mise en avant, même si le document contient d'autres images, par exemple à l'intérieur de l'éditeur de texte. L'image par défaut répond à cette situation.

Dans l'espace d'administration de votre site web, éditez un document et uploadez une image mise en avant (en haut à gauche de l'écran d'édition du document). Ensuite, dans le template Liquid, inspectez la payload du document :

{{ doc | info }}

Dans la payload, vous trouverez que l'image mise en avant et l'image par défaut sont les mêmes :

Comment est définie l'image par défaut d'un document

Voici comment est définie l'image par défaut d'un document. Dans le schéma du site, le type de document a une liste de champs. Parmi les champs qui peuvent contenir des images, la propriété optionnelle "useAsDefaultImage" sert à spécifier que le champ est utilisé pour fournir une image par défaut.

L'image par défaut est récupérée de la manière suivante :

1. Si la featured image existe, elle est prise comme image par défaut.
2. Sinon, les champs contenant la propriété "useAsDefaultImage" sont ordonnés par cette propriété dans une liste temporaire.
3. Ensuite, l'image par défaut sera celle du premier champ de cette liste contenant une image.
4. Si le champ contient plusieurs images (comme une galerie de médias), alors la première image de la galerie sera prise.
5. Le numéro associé à "useAsDefaultImage" donne l'ordre dans lequel les champs sont traités pour trouver une image par défaut.

Comment utiliser l'image par défaut dans un template Liquid

Dans un template Liquid de ParoiCMS, l'image par défaut d'un document est simplement accessible via la propriété defaultImage.

Par exemple, voici un code qui charge une liste de documents et affiche pour chacun le titre et l'image par défaut :

{% getDocs posts parentId: site.home.posts.id limit: 4 %}

{% for post in posts %}
  <a href="{{ post.url }}">
    {{ post.title }}
    {% if post.defaultImage %}
      {% useImage im uid: post.defaultImage.uid size: "x50x" %}
      <img
        src="{{ im.url }}"
        width="{{ im.width }}"
        height="{{ im.height }}"
        loading="lazy"
        alt="">
    {% endif %}
  </a>
{% endfor %}