When to use
Use image gallery to display multiple images in a row. Each image has a text overlay that has a background color and is linked to a webpage. The font size and weight of the text overlay and the opacity of the background color can be customized.
Use the following 9 attributes to customize the image gallery:
The order attribute determines if the images are ordered in a row or in a column. In case the attribute is empty, the default order is row.
The image attribute determines what images to display. Separate the URLs of the images by comma with no space in between.
The link attribute lets you define what page an image links to. The URLs are separated by comma with no space in between.
The title attribute defines the text overlay at the bottom of the image. The default value is “Title 1” and “Title 2“. Titles are separated by the pipe character | with no space in between.
The font-size attribute lets you set the size of the text overlay. The default value is “16px“.
The font-weight attribute defines how bold or light the text appears. The default value is “normal“. You can set it using one of the following numeric values:
- font-weight=”400″ (normal)
- font-weight=”700″ (bold)
or a keyword value:
or a relative value:
The bgcolor attribute defines the background color of the text overlay. The default value is black (#000000). Use the color’s hex value in the #xxxxxx format.
The bg-opacity attribute lets you set the opacity/transparency of the background color of the text overlay. The default value is 0.75. You can give a value between 0.0 and 1.0. The lower the value, the more transparent the background color is.
The quantity attribute specifies how many images in a row. The default value is 2. You can set it to display 3, 4, or 6 images in a row.
Important! This attribute cannot be used alone, if you set it to 3, 4 or 6, you’ll need to update the image, link, and title attributes as well.
You can use any combination of the above attributes. Please contact firstname.lastname@example.org for questions and comments.