Image Gallery

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.

Basic usage

Code

[image-gallery]

Rendering

Attributes

Use the following 9 attributes to customize the image gallery:

order

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.

Column

[image-gallery order="column"]

Row

[image-gallery order="row"]

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/mpal/wp-content/uploads/sites/17/2019/08/Theatre-Resources.jpg,https://www.library.illinois.edu/mpal/wp-content/uploads/sites/17/2019/08/dance.jpg"]

Rendering

alt

The alt attribute lets you define the alt text for the images included in the “image” attribute. The ALTs are separated by a comma with no space in between.

Example: [image-gallery alt="img description,img description"]

link

The link attribute lets you define what page an image links to. The URLs are separated by a 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 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.

Code

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

Rendering

font-size

The font-size attribute lets you set the size of the text overlay. The default value is “16px“.

Code

[image-gallery font-size="24px"]

Rendering

font-weight

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=”100″
  • font-weight=”200″
  • font-weight=”300″
  • font-weight=”400″ (normal)
  • font-weight=”500″
  • font-weight=”600″
  • font-weight=”700″ (bold)
  • font-weight=”800″
  • font-weight=”900″

or a keyword value:

  • font-weight=”normal”
  • font-weight=”bold”

or a relative value:

  • font-weight=”lighter”
  • font-weight=”bolder”

Code

[image-gallery font-weight="900"]

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 the #xxxxxx format.

Code

[image-gallery bgcolor="#5f2107"]

Rendering

bg-opacity

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.

Code

[image-gallery bg-opacity="0.35"]

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/mpal/wp-content/uploads/sites/17/2019/08/Theatre-Resources.jpg,https://www.library.illinois.edu/mpal/wp-content/uploads/sites/17/2019/08/dance.jpg, https://www.library.illinois.edu/mpal/wp-content/uploads/sites/17/2019/08/music.jpg" alt="Theatre Resources,dance,music "]

Rendering

 

You can use any combination of the above attributes. Please contact help@library.illinois.edu for questions and comments.