ParoiCMS
GitLab npmjs
Accueil ❯ Documentation ❯ Ajouter un champ image dans l'édition d'une page web avec ParoiCMS
← Afficher une liste de documents dans un template ParoiCMS Comment ajouter des champs dans un document avec ParoiCMS →

Ajouter un champ image dans l'édition d'une page web avec ParoiCMS

Il arrive qu'un design prévoit l'affichage d'une image à une position spécifique dans le template d'une page web, comme par exemple pour implémenter un effet parallaxe. Si l'on souhaite donner à l'utilisateur la possibilité de choisir cette image, il faut alors ajouter un champ image dans le type de document de la page concernée.

Dans ce tutoriel, nous allons ajouter un champ servant à uploader une image, au niveau de l'édition de la page d'accueil, dans l'espace d'administration.

Définir un nouveau champ image

Éditez le fichier site-schema.json du site web. Repérez le type de document de la page d'accueil, c'est celui qui contient la ligne "typeName": "home". Il est possible que la propriété "fields" soit déjà présente s'il y a déjà d'autres champs sur la page d'accueil. Dans ce cas, insérez simplement le nouveau champ dans la liste. Sinon, insérez (par exemple, juste sous la ligne "typeName": "home") une liste des champs pour le type de document, de cette manière :

      "fields": [
        {
          "name": "myImage",
          "storedOn": "leaf",
          "storedAs": "mediaHandle",
          "dataType": "media",
          "accept": "image/*",
          "refuse": "image/svg+xml",
          "useAsDefaultImage": 1,
          "visibility": ["table", "overview", "feed"]
        }
      ],

Explications :

À propos de l'image par défaut : la propriété optionnelle "useAsDefaultImage" sert à spécifier que le champ est utilisé pour fournir l'image doc.defaultImage dans les templates Liquid. L'image par défaut est récupérée de la manière suivante : si la featured image existe, elle est aussi l'image par défaut. Sinon, l'image sera celle du premier champ contenant une image et dont la propriété "useAsDefaultImage" est définie. Le numéro donne l'ordre dans lequel les champs sont traités.

Si l'image contient du contenu localisé, comme un texte, définissez "storedOn": "section" et elle sera différente pour chaque traduction du document.

Rafraîchissez l'espace d'administration et éditez la page d'accueil. Notre champ devrait apparaître :

Traduire le libellé du champ image dans l'espace d'administration

Éditer le fichier site-schema.l10n.fr.json. Dans la section "home", ajouter :

      "fields": {
        "myImage": {
          "label": "Mon image"
        }
      }

Rafraîchissez l'espace d'administration : le libellé du champ est maintenant traduit.

Profitez-en pour uploader une image avant de passer à la section suivante.

Utiliser le champ dans le template de la page web

Éditons le template Liquid de la page d'accueil. Il s'agit du fichier theme/templates/home.liquid. Ajoutez quelque part le code pour inspecter la payload du document :

{{ doc | info }}

En affichant le résultat dans le navigateur, on peut repérer notre champ dans la payload :

Voici une manière de l'utiliser pour produire du code HTML :

{% if doc.field.myImage %}
  {% useImage myImage uid: doc.field.myImage.uid size: "x800x" %}
  <img
    src="{{ myImage.url }}"
    width="{{ myImage.width }}"
    height="{{ myImage.height }}"
    alt=""
    loading="lazy"
    data-zoom-src="{{ doc.field.myImage.uid | imageZoomUrl }}">
{% endif %}

À lire aussi