Site de démonstration Gantry 5

Introduction

etl particles image grid

La particule En Toutes Lettres Grille Images vous permet de configurer rapidement une grille d'images propre et organisée. Beaucoup d'options sont disponibles, y compris le choix pour l'utilisation de RokBox ou Lightcase..

Note: Pour profiter de la fonctionnalité de popup en cliquant sur les images, si vous sélectionnez le menu déroulant RokBox, l'extension RokBox doit être installée et active. Si vous sélectionnez le popup LighCase , vous devez activer l'atom Gantry 5 Lighcase dans votre Layout (Page setting).



Configuration

 particle image grid

Options pricipales

Ces options affectent la zone principale de la particule et non les éléments individuels.

particle FR imagegrid 1

OptionDescription
Nom de la particle Entrez le nom que vous souhaitez attribuer à la particule. Il apparaît uniquement dans l'administration.
CSS Classes Entrez la (les) classe (s) CSS que vous souhaitez utiliser dans le contenu de la particule.
Style de la particule Sélectionnez le style prédéfinit de mise en page que vous souhaitez utiliser pour l'élément. Vous pouvez choisir: Style 1, Style 2, Style 3 ou Style 4.
Extension Sélectionnez l'extension popup que vous souhaitez utiliser pour l'élément. Vous pouvez choisir:  Lighcase ou Rokbox.
Image Border Radius Sélectionnez le Border Radius (rayon de bordure) que vous souhaitez utiliser pour toutes les images. Vous pouvez choisir:  Border Radius none, Border Radius 8px ou Border Radius 12px.
Image Padding Sélectionnez le padding (espace entra chaque image) que vous souhaitez utiliser pour votre grille. Vous pouvez choisir: Padding none, Padding 0.5px (utile pour Style 4), Padding 4px, Padding 8px.
Titre Entrez un titre pour la particule.
Title CSS classes Entrez toutes les classes CSS que vous souhaitez appliquer au titre de la particule.
Description Entrez une description pour votre particule.
Grille Entrez le nombre de colonnes que vous souhaitez pour afficher votre grille.
Nom de l'Album Entrez un nom pour l'album d"images présentées dans votre grille (doit être unique dans votre page). Utile pour faire défiler les images dans le popup.
Légende Si la case à cocher est sélectionnée, les légendes apparaitront en dessous des images (à l'intérieur pour le style 4).
Texte sous la grille Entrez n'importe quel texte ici que vous souhaitez faire apparaître dans la zone de bas de page de la particule.

Options des images

Ces éléments constituent les éléments individuels présentés dans la particule.

particle FR imagegrid 2

OptionDescription
Titre Entrez le nom (Titre) que vous souhaitez attribuer à l'élément.
Sous-Titre Entrez le sous-titre que vous souhaitez attribuer à l'élément.
Montrer (Sous)Titre Si la case à cocher est sélectionné, Title et Sous Titre apparaitront pour l'image
Votre Image Sélectionner votre image
Légende Ajoutez une légende à l'image (vu aussi dans le popup).
Lien vers ... Choisissez d'afficher une image (Popup image) ou d'ouvrir un lien personnalisé (Lien) sur l'action du 'clique sur l'image'
Popup image Si vous souhaitez afficher une autre image dans la fenêtre 'popup', Sélectionnez la ici (Si champ laissé vide, Votre image sera sélectionné)..
Lien Spécifiez l'adresse du lien (url) quand vous cliquez sur l'image (si 'Lien vers Lien' est sélectionné).
Cible (pour le lien) Choisir entre fenêtre parente (Self) ou Nouvelle fenêtre  pour la cible.

Exemples

Grille images - Style 1 - Opacité - popup Lightcase

Paramètres principaux:

  • CSS Classes : none
  • Style 1
  • Extension LightCase
  • Border Radius 8px
  • Padding 4px
  • Titre CSS class center box4 nomarginall
  • Grille 3 Colonnes
  • Album cat-fr-1 (doit être unique unique)
  • Légende: non

Paramètres Images:

  • Montrer (Sous)Titre: oui
  • Légende: Définie
  • Lien vers ...: Popup Image
  • Lien: vide
  • Cible (pour le lien):Parente

Grille images - Style 2 - Zoom - popup Rokbox

Paramètres principaux:

  • CSS Classes : none
  • Style 2
  • Extension Rokbox
  • Border Radius none
  • Padding none
  • Titre CSS class center box4 nomarginall
  • Grille 3 Colonnes
  • Album cat-fr-2 (doit être unique unique)
  • Légende: non

Paramètres Images:

  • Montrer (Sous)Titre: oui
  • Légende: Définie
  • Lien vers ...: Popup Image
  • Lien: vide
  • Cible (pour le lien):Parente

Grille images - Style 3 Polaroid Zoom - popup Rokbox

Paramètres principaux:

  • CSS Classes : none
  • Style 3
  • Extension Rokbox
  • Border Radius none
  • Padding none
  • Titre CSS class center box4 nomarginall
  • Grille 3 Colonnes
  • Album cat-fr-3 (doit être unique unique)
  • Légende: oui

Paramètres Images:

  • Montrer (Sous)Titre: oui
  • Légende: Définie
  • Lien vers ...: Popup Image
  • Lien: vide
  • Cible (pour le lien):Parente

Grille images - Style 4 opacité legende centré - popup Lightcase

Paramètres principaux:

  • CSS Classes : none
  • Style 4
  • Extension Lightcase
  • Border Radius none
  • Padding 0.5px
  • Titre CSS class center box4 nomarginall
  • Grille 3 Colonnes
  • Album cat-fr-4 (doit être unique unique)
  • Légende: oui

Paramètres Images:

  • Montrer (Sous)Titre: oui
  • Légende: Définie
  • Lien vers ...: Popup Image
  • Lien: vide
  • Cible (pour le lien):Parente

Grille images - Style 4 - Lien

Paramètres principaux:

  • CSS Classes : none
  • Style 4
  • Extension Lightcase
  • Border Radius none
  • Padding 0.5px
  • Titre CSS class center box4 nomarginall
  • Grille 2 Colonnes
  • Album vide
  • Légende: oui

Paramètres Images:

  • Montrer (Sous)Titre: Non/Oui
  • Légende: Vide/Définie
  • Lien vers ...: Lien
  • Lien: https://en-toutes-lettres.fr/
  • Cible (pour le lien):Nouvelle fenêtre

Grille images - Style 4
Style imagegrid-firstlarge

Section style: no margin, no padding


Paramètres principaux:

  • CSS Classes : imagegrid-firstlarge
  • Style 4
  • Extension Lightcase
  • Border Radius none
  • Padding 0.5px
  • Titre CSS class center box4 nomarginall
  • Grille 2 Colonnes
  • Album cat-fr-4n (doit être unique unique)
  • Légende: oui

Paramètres Images:

  • Montrer (Sous)Titre: oui
  • Légende: Définie
  • Lien vers ...: Popup Image
  • Lien: vide
  • Cible (pour le lien):Parente

Grille images - Style 4
Style imagegrid-lastlarge

Section style: no margin, no padding


Paramètres principaux:

  • CSS Classes : imagegrid-lastlarge
  • Style 4
  • Extension Lightcase
  • Border Radius none
  • Padding 0.5px
  • Titre CSS class center box4 nomarginall
  • Grille 2 Colonnes
  • Album cat-fr-4n (doit être unique unique)
  • Légende: oui

Paramètres Images:

  • Montrer (Sous)Titre: oui
  • Légende: Définie
  • Lien vers ...: Popup Image
  • Lien: vide
  • Cible (pour le lien):Parente