Block : CSS grid

Contenu

Le contenu de remplissage de cette grille s’obtiens de deux façons (Content type) :

1 – Defined content 
De cette façon, vous définissez le type de contenus devant occuper chaque cellule de votre grille.

• Content identifier (slug) : l’identifiant de votre élément, à définir ici et à reporter dans le constructeur de la grille (voir plus loin, dans les réglages du block)
• Class(es) (texte) : le ou la classe css personnalisée que vous souhaitez utiliser pour cet élément
• Background color (couleur) : définit la couleur de fond de l’élément
• Horizontal align (choix) et Vertical align (choix) : définissent les alignement horizontaux et verticaux de l’élément
• Type (choix) : le type de Component définissant cet élément. Les Components sont détaillés ici.

2 – Post query
Avec cette méthode, vous allez remplir votre grille à partir d’articles, en trois étapes :

1. définir votre requête
2. définir un template pour chaque article
3. définir des paramètres spécifiques à chacun de vos articles, notamment l’identifiant unique qui sera à renseigner lors de la construction de votre grille (voir plus loin).

1 – Le constructeur de requête : il est identique à celui utilisé dans le block Category grid

• post type (choix): vous pouvez choisir ici le type de publication à lister. Par défaut : articles. Vous pourrez ainsi sélectionner des types personnalisés si vous en définissez.
• category(s) (choix) : sélectionner ici une ou plusieurs catégories
• logic of select (choix AND/OR/EXCLUSION) : si plusieurs catégories sont sélectionnées, vous pouvez ici ajuster la logique de sélection (AND : cat1 AND cat2, OR : cat1 OR cat2, EXCLUSION : NOT IN cat1)
• order (choix) : choix du critère à retenir pour définir l’ordre de la liste
• order direction (choix) : choix du sens du tri de la liste
• limit : le nombre d’item à sélectionner. Dans la mesure où vous devez ensuite attribuer un identifiant unique à chaque résultat de la requête, la possibilité de choisir tous les résultats a été désactivée, et un maximum a été arbitrairement fixé à 50. Cette valeur se calquera automatiquement sur le nombre d’instances du groupe répétable « Content » (voir plus loin)
• exclude current post (choix) : permet d’éliminer l’item courant de la liste

Les critères suivant permettent d’affiner la sélection en imposant des critères basés sur des champs personnalisés.

• meta relation (choix) : définit la logique de traitement des différents critères qui seront définis dans les champs suivants
• meta object : vous pouvez définir jusqu’à 3 critères de selection. Pour chacun, il faut préciser
  – key : l’identifiant du champ personnalisé
  – value : sa valeur
  – compare : son opérateur de comparaison
  – type : le type de valeur

2 – Vous pouvez définir votre template html qui sera utilisé par chacun des items de la liste via le champs Post template (code).

vous pouvez utiliser des alias pour afficher des données dynamiques dans les champs le permettant :

{TITLE} : le titre de l’article
{THUMBNAIL} : la vignette (« image mise en avant ») de l’article
{EXCERPT} : l’extrait de l’artticle
{CONTENT} : le contenu de l’article
{DATE} : la date de l’article
{SHORTDATE} : la date courte de l’article (jour – mois)
{URL} : l’adresse de l’article
{FIELD/acf_field_name/FIELD} : la valeur d’un champ personnalisé ACF. Dans le cas d’une image ou d’un fichier, c’est l’url qui est retournée

3 – Définir les réglages indépendants de chaque items de la liste via le groupe répétable Content. Pour que l’ensemble soit fonctionnel, vous devez renseigner une itération de ce groupe par item de la liste.

• Content identifier (slug) : l’identifiant de votre élément, à définir ici et à reporter dans le constructeur de la grille (voir plus loin, dans les réglages du block)
• Class(es) (texte) : le ou la classe css personnalisée que vous souhaitez utiliser pour cet élément
• Background color (couleur) : définit la couleur de fond de l’élément
• Horizontal align (choix) et Vertical align (choix) : définissent les alignement horizontaux et verticaux de l’élément

Réglages

Ces réglages permettent de construire la grille elle même et de lui attribuer certaines propriétés d’affichage.

• Min height (nombre) : défini la hauteur minimale de la grille, en vh (100vh = la totalite de la hauteur de la fenêtre)
• Max height (nombre) : défini la hauteur maximalede la grille, en vh
• Row gap (nombre) : défini l’espacement entre les lignes de la grille, en px
• Column gap (nombre) : défini l’espacement entre les colonnes de la grille, en px
• Grid placement (table ) pour version desktop et mobiles.

Ce dernier paramètre est ce qui va vous permettre de définir les dimensions de votre gille :

1. Le nombre de colonnes définira ses unités de subdivision horizontale,
2. Le nombre de lignes définira ses unités de subdivision verticale,
3. Chaque cellule correspondra à une subdivision de votre grille.
4. Vous devrez assignez à chaque cellule un des identifiants d’item, défini dans l’onglet contenu, en respectant certaines conditions

• un seul identifiant par cellule
• un identifiant peut occuper plusieurs cellules adjacentes et uniquement adjacentes, définissant une zone devant entre carrée ou rectangulaire. Ces zones peuvent donc occuper une ou plusieurs lignes, et une ou plusieurs colonnes

Par exemple, si ma grille doit renfermer 7 items ayant pour identifiants item1, item2, item3, item4 et item5, item6 et item7, la grille définie par le tableau ci-dessous pourra être construite.