Image Gallery

When to use

Use image gallery to display multiple images in a row. Each image has a text overlay with a background color and links to a webpage.

Basic usage

Code

[image-gallery]

Rendering

Attributes

Use the following 5 attributes to customize the image gallery:

image

The image attribute determines what images to display. Separate the URLs of the images by comma with no space in between.

Code

[image-gallery image="https://www.library.illinois.edu/bhrsc/wp-content/themes/main-theme-bhrsc-child/image/landing-page-left.jpg,https://www.library.illinois.edu/bhrsc/wp-content/themes/main-theme-bhrsc-child/image/landing-page-right.jpg"]

Rendering

link

The link attribute let you define what page an image links to. The URLs are separated by comma with no space in between.

Code

[image-gallery link="https://www.library.illinois.edu,https://www.illinois.edu"]

Rendering

title

The title attribute defines the text overly at the bottom of the image. The default value is “Title 1” and “Title 2”. Titles are separated by comma with no space in between.

Code

[image-gallery title="About,Support"]

Rendering

bgcolor

The bgcolor attribute defines the background color of the text overlay. The default value is black (#000000). Use the color’s hex value in #xxxxxx format. The transparency of the color is reduced to 75%.

Code

[image-gallery bgcolor="#DD3403"]

Rendering

quantity

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.

Code

[image-gallery quantity="3" title="About,Support,Showcase" link="https://www.library.illinois.edu/scholarlycommons/about/,https://www.library.illinois.edu/scholarlycommons/support/,https://www.library.illinois.edu/scholarlycommons/showcase/" image="https://www.library.illinois.edu/scholarlycommons/wp-content/uploads/sites/91/2022/03/sc-about.jpg,https://www.library.illinois.edu/scholarlycommons/wp-content/uploads/sites/91/2022/03/sc-support-scaled.jpg,https://www.library.illinois.edu/scholarlycommons/wp-content/uploads/sites/91/2022/03/sc-showcase-scaled.jpg"]

Rendering