Photo Tiles

A photo tile component is wall of photos that can be clicked to view a larger version with a description. They are useful to display a collection of photos.

To add a photo tiles container, click the + button in a column and select Photo Tiles Container from the popup window.

Once the container is added to the page, click the + button inside it and add a Photo Tile.

To edit existing photo tiles, hover over the block and click the edit button from the context menu.

The photo tiles container form has three fields:

  • Heading is shown above the photo tile collection but is not required.
  • Columns will let you choose how many columns the photos will be displayed in. The options are 2, 3 or 4.
  • Extra Class name is not a field you will need, but allows developers to add additional classes.

The photo tile form contains three fields:

  • The title is the text that will be used as the label of the tile. It is shown when a user is hovering over the photo and above the description in the details popup.
  • The image field will let you select the image for this tile.
  • The content field is a full-featured WYSIWYG editor for the description. This is shown in the detail popup and can be a simple few words, or more robust content with links and buttons.

In addition to editing the contents, the context menu allows you to move the photo tile container to a different location in the layout, copy a block and its contents, or delete the block.

Once you are finished making changes, click Publish or Update on the right side of the page to make your changes live.

Example

Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"

Example

Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"

Example

Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"
A headshot of white women with auburn hair: she wears a gray blazer, white shirt, and a gold necklace. Her hair is down and the background is black
Amie Dryer, a white woman, sits at her desk. She wears her brown hair pulled back and a white blouse with black trim and black polka dots. To her left is her bulletin board and she sits in front of her file cabinet.
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"
A white mug with the 2021 Maryland History Day logo. Logo is a stylized Old Bay can with the words "Maryland History Day 2021"