Gantry 5 demo website

Introduction

etl particles image grid

The En Toutes Lettres Image Grid particle gives you the ability to quickly set up a clean, organized grid of images. A lot of options are available including usage of RokBox or Lightcase.

Note: To take advantage of the click-to-view feature, If you select RokBox popup, you need the RokBox extension installed and active, If you select LighCase popup, You need the Gantry 5 LighCase Atom active in your Layout (Page setting).



Configuration

particle image grid

Main Options

These options affect the main area of the particle, and not the individual items within.

particle EN imagegrid 1

OptionDescription
Particle Name Enter the name you would like to assign to the particle. This only appears in the back end.
CSS Classes Enter the CSS class(es) you want to use in the content of the particle.
Particle Style Select the style of layout you would like to have used for the item. You can choose: Style 1, Style 2, Style 3 or Style 4.
Extension Select which popup extension you would like to have used for the item. You can choose: Lighcase or Rokbox.
Image Border Radius Select border radius you would like to have used for all images. You can choose: Border radius none, Border radius 8px or Border radius 12px.
Image Padding Select image padding you would like to have used for all images. You can choose: Padding none, Padding 0.5px (usefull for Style 4),Padding 4px, Padding 8px
Title Enter a title for the particle.
Title CSS classes Enter any CSS classes you would like to have apply to the particle Title.
Description Enter a description for your particle.
Grid Enter the number of columns you would like to have items displayed in.
Album Name Enter a name for the album of images featured in the particle's items (should be unique in your page).
Caption If Checkbox selected, Captions appears below (into for Style 4) the image.
Footer Enter any text here you want to appear in the footer area of the particle.

Item Options

These items make up the individual featured items in the particle.

particle EN imagegrid 2

OptionDescription
Item Name Enter the name (Title) you would like to assign to the item.
SubTitle Enter the Subtitle you would like to assign to the item.
Show (Sub)Title If Checkbox selected, Title and Subtitle appears on the image
Your Image Point the item to the image you wish to have featured in this item.
Caption Add a caption to the image. This caption appears when the image is selected on the front end.
Link To Set the popup target for the Image. You can choose between Popup image which opens the link in a popup or Link which opens links in selected link (see below Link)
Popup image Select a new image you would like to have open in the popup (If Empty, Your Image will be selected).
Link Enter the url you want that link to go to.
Target (for Link) Choose betweel Self and New Window as the link's target

Exemples

Image grid - Style 1 - Opacity - popup Lightcase

Paramaters Main:

  • CSS Classes : none
  • Style 1
  • Extension LightCase
  • Border Radius 8px
  • Padding 4px
  • Title CSS class center box4 nomarginall
  • Grid 3 Columns
  • Album cat-en-1 (should be unique)
  • No caption

Paramaters Images:

  • Show (Sub)Title: Yes
  • Caption: filled
  • Link to: Popup Image
  • Link: Empty
  • Target (for Link):Self

New Images grid - Style 2 - Zoom - popup Rokbox

Paramaters Main:

  • CSS Classes : none
  • Style 1
  • Extension RokBox
  • Border Radius none
  • Padding none
  • Title CSS class center box4 nomarginall
  • Grid 3 Columns
  • Album cat-en-2 (should be unique)
  • Caption none

Paramaters Images:

  • Show (Sub)Title: Yes
  • Caption: filled
  • Link to: Popup Image
  • Link: Empty
  • Target (for Link):Self

New Images grid - Style 3 Polaroid Zoom - popup Rokbox

Paramaters Main:

  • CSS Classes : none
  • Style 2
  • Extension RokBox
  • Border Radius none
  • Padding none
  • Title CSS class center box4 nomarginall
  • Grid 3 Columns
  • Album cat-en-3 (should be unique)
  • Caption Yes

Paramaters Images:

  • Show (Sub)Title: Yes
  • Caption: Yes
  • Link to: Popup Image
  • Link: Empty
  • Target (for Link):Self

New Images grid - Style 4 - Opacity (caption inside) - popup Lightcase

Paramaters Main:

  • CSS Classes : none
  • Style 4
  • Extension LightCase
  • Border Radius none
  • Padding 0.5px
  • Title CSS class center box4 nomarginall
  • Grid 3 Columns
  • Album cat-en-4 (should be unique)
  • Caption Yes

Paramaters Images:

  • Show (Sub)Title: Yes
  • Caption: Yes
  • Link to: Popup Image
  • Link: Empty
  • Target (for Link):Self

New Images grid - Style 4 - Link

Paramaters Main:

  • CSS Classes : none
  • Style 4
  • Extension LightCase
  • Border Radius none
  • Padding 0.5px
  • Title CSS class center box4 nomarginall
  • Grid 2 Columns
  • Album none
  • Caption Yes

Paramaters Images:

  • Show (Sub)Title: Yes
  • Caption: Yes
  • Link to: Link
  • Link: https://en-toutes-lettres.fr/en
  • Target (for Link):New windows
Icon link appears if caption is not filled

Images grid - Style 4
Style imagegrid-firstlarge

Section style: no margin, no padding

Paramaters Main:

  • CSS Classes : imagegrid-firstlarge
  • Style 4
  • Extension LightCase
  • Border Radius none
  • Padding 0.5px
  • Title CSS class center box4 nomarginall
  • Grid 3 Columns
  • Album cat-en-4n (should be unique)
  • Caption Yes
  • Grid 2 columns

Paramaters Images:

  • Show (Sub)Title: Yes
  • Caption: Yes
  • Link to: Popup Image
  • Link: Empty
  • Target (for Link):Self

Images grid - Style 4
Style imagegrid-lastlarge

Section style: no margin, no padding

Paramaters Main:

  • CSS Classes : imagegrid-lastlarge
  • Style 4
  • Extension LightCase
  • Border Radius none
  • Padding 0.5px
  • Title CSS class center box4 nomarginall
  • Grid 3 Columns
  • Album cat-en-4n (should be unique)
  • Caption Yes
  • Grid 2 columns

Paramaters Images:

  • Show (Sub)Title: Yes
  • Caption: Yes
  • Link to: Popup Image
  • Link: Empty
  • Target (for Link):Self