Skip to main content

index.twig

Le fichier index.twig du composant est un template Twig qui définit la structure HTML et la logique de présentation du composant. Twig est un moteur de template flexible qui permet la création de documents HTML dynamiques en utilisant une syntaxe concise et facile à comprendre.

Afin d'expliquer ce fichier, nous allons prendre pour exemple le composant Gallerie : /Components/subcomponents_website/Gallerie

Structure du Template index.twig​

Le template Twig commence typiquement par l'ouverture d'un conteneur pour le composant, qui peut inclure des classes ou des attributs dynamiques, suivie par la structure HTML interne du composant, et se termine par la fermeture du conteneur.

Ouverture avec Partial _componentContainer.twig​

/Components/subcomponents_website/Gallerie/index.twig
{% include '/Partials/global/_componentContainer.twig' ignore missing with { 
  'is': 'bubble-gallerie',
  'options': options,
  'classes': 'relative ' ~ bgColor
}  only %}
  • is
    Nom du composant, la nomenclature est de la forme bubble-nom-de-composant
  • options
    Contient un tableau d'options, et de paramétrages à appliquer sur le composant. En majeure partie en provenance des ACF de l'onglet options. Cela peut-également avoir été personnalisé en amont dans le fichier functions.php
  • classes
    Permet l'ajout rapide de classes html optionnelles sur le composant.

Fermeture avec Partial _componentContainerClose.twig​

/Components/subcomponents_website/Gallerie/index.twig
{% include '/Partials/global/_componentContainerClose.twig' ignore missing with { 
}  only %}
  • Pas d'options nécessaire ici.

Structure du Template index.twig​

Le template Twig commence typiquement par l'ouverture d'un conteneur pour le composant, qui peut inclure des classes ou des attributs dynamiques, suivie par la structure HTML interne du composant, et se termine par la fermeture du conteneur.

Accès aux Données en Twig​

Dans Twig, vous pouvez accéder directement aux variables passées au template. Dans le cas de notre composant Gallerie, toutes les données nécessaires sont contenues dans la variable $data, qui est définie dans le fichier PHP associé au composant.

Voici un exemple simplifié montrant comment vous pourriez accéder aux données d'une image dans le composant Gallerie :

Notre variable $data contenant un champ répeater nommé items, qui lui contient des sous-champs image, voici un exemple de code twig d'utilisation :

/Components/subcomponents_website/Gallerie/index.twig
{% for item in items %}
  <img src="{{ item.image.url }}" alt="{{ item.image.alt }}" />
{% endfor %}