---
title: Photo Gallery
tags: Featured Photography
---

# Featured Photography: Photo Gallery
###### **Control Code:** `FP.FG`
<!--
-->
## About This Component

The gallery can be used to display a variety of photo content including supporting text styles. It can also be used as a content carousel in place of a hero element. Horizontal scrolling is available at all breakpoints. We do not recommend adding more than 15 photos for the sake of site page speed.
<!--
### Usage Guidelines

:::info
*TODO: Novartis to write.*
:::

General guidelines for using this component. Include any information the user will need to know but that may not fit into the below annotated breakdown of the individual requirements for the component.

:::info
*Placeholder content below.*
:::

While images can have variable height, we recommend using a single uniform height when using an instance of this component to provide a consistent visual experience with it.

### Related Components

:::info
*TODO: Novartis to write.*
:::

A list of other components that are related. Consider what other components may be useful based on the structure or format of information and if there are any specific limitations that can be overcome by using a different component.

- **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one.
- **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one.

### Accessibility

:::info
*TODO: Novartis to write.*
:::

Specific accessibility considerations and recommendations for this component.
-->
## Primary Configurations

| **Extra Large Breakpoint (Desktop)** |
| -------- |
|  |

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
|  |  |

| **Key** |
| ------- |
|  |

### 1. Gallery Title

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** The type style depends on the [Component Size](#Component-Size) configuration
- Full Width: Heading 1
- 7 Columns: Heading 2
- 5 Columns: Heading 2
- **Color:** NEUTRAL_80 (Off Black), changeable within site color palette
- **SEO HTML Tag:** The default H tag depends on the [Component Size](#Component-Size) configuration
- Full Width: Default H4, changeable within H1 to H6
- 7 Columns: Default H5, changeable within H1 to H6
- 7 Columns: Default H5, changeable within H1 to H6

### 2. Footnote

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** Disclaimers and Notes
- **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette

### 3. FUSE Code

- **Optional:** Can be excluded, component collapses to hide unused space

The FUSE code for this component follows the standard requirements outlined in the [FUSE Code](/cU84_lreQY2OTQupfjeaTg) page of this documentation. Please refer to that page for full details on its configurations and options.

## Photos Configurations

Each configuration here is repeated for each of the photos included in the component, up to a maximum of 15 photos.

- **Number of Photos:** 2-15

### 4. Photo Image

- **Required:** Must be included
- **Dimensions:** Size requirements for the asset depend on the layout sizes chosen for the component. See the [Full Width Photo Size](#Full-Width-Photo-Size) and [Component Size](#Component-Size) sections of this documentation further below for more information.

| Breakpoint | Full Width with Large Images | Full Width with Small Images | 7 Columns | 5 Columns |
|-------------|------------|------------|-----------|-----------|
| Extra Large | Width: 312px<br/>Height: 176px - 234px | Width: 224px<br/>Height: 126px - 168px | Width: 224px<br/>Height: 126px - 168px | Width: 224px<br/>Height: 126px - 168px |
| Large | Width: 256px<br/>Height: 144px - 192px | Width: 184px<br/>Height: 104px - 138px | Width: 176px<br/>Height: 99px - 132px | Width: 176px<br/>Height: 99px - 132px |
| Medium | Width: 232px<br/>Height: 131px - 174px | Width: 168px<br/>Height: 95px - 126px | Width: 152px<br/>Height: 86px - 114px | Width: 152px<br/>Height: 86px - 114px |
| Extra Small | Width: 240px<br/>Height: 135px - 180px | Width: 240px<br/>Height: 135px - 180px | Width: 240px<br/>Height: 135px - 180px | Width: 240px<br/>Height: 135px - 180px |

The image for this component otherwise follows the standard requirements outlined in the [Images](/9XfBsCB3QPyxX5-9wfosjQ) page of this documentation. Please refer to that page for full details on its configurations and options.

### 5. Photo Title

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** Heading 3
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette
- **SEO HTML Tag:** Default H6, changeable within H1 to H6

### 6. Photo Caption

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** Paragraph 3
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

## Additional Configurations

### Component Size

This component can be configured to different sizes, allowing it to be placed on the page side-by-side with other components if needed. Some [Primary Configurations](#Primary-Configurations) above may have different options depending on the size chosen. Please see the [Grid and Layout Guidelines](/wyWz2X5ETqqn8VQo3KLHdQ) page of this documentation for more information on sizing and laying out components in the system.

- **Component Size:** Default Full Width, can be 7 Columns or 5 Columns

#### Extra Large Breakpoint (Desktop)

| Full Width | 7 Columns | 5 Columns |
| ---------- | --------- | --------- |
|  |  |  |

#### Medium Breakpoint (Tablet)

| Full Width | 7 Columns | 5 Columns |
| ---------- | --------- | --------- |
|  |  |  |

#### Extra Small Breakpoint (Mobile)

At the Extra Small Breakpoint, the 7 Columns and 5 Columns sizes become Full Width, stacking with any other component that was to their side.

| Full Width | 7 Columns | 5 Columns |
| ---------- | --------- | --------- |
|  |  |  |

### Full Width Photo Size

When using this component at the Full Width layout size, you can choose to display your photos at two different sizes. By default the photos are displayed at a larger size, which is more pronounced but reduces the number of photos the user can see at once on their screen. Alternatively, photos can be displayed at a smaller size which allows more photos to be seen at the same time.

- **Full Width Photo Size:** Default large, can be small

Below is an example comparing the two sizes at each breakpoint.

#### Extra Large Breakpoint (Desktop)

| Large Photos (Default) | Small Photos |
| ---------- | --------- |
|  |  |

#### Medium Breakpoint (Tablet)

| Large Photos (Default) | Small Photos |
| ---------- | --------- |
|  |  |

#### Extra Small Breakpoint (Mobile)

At the Extra Small Breakpoint this configuration has no effect, as the images only have a single size range to better display on mobile devices.

| Large Photos (Default) | Small Photos |
| ---------- | --------- |
|  |  |

## Resources

### CMS Instructions

#### Photo Gallery Configuration

While creating or editing content, site administrators and content editors can add a **Photo gallery** content block as follows:

**Step 1:** Navigate to the **Content** menu and either click **Add content** to create a new content or click the **Edit** button under Operations for the content you wish to edit:


On the **Layout** tab, click **Add block** at the section you want to add a photo gallery content block. You may need to add a section before adding a block.


In the side panel on the right-hand side of the window click **Create custom block**.


Select **Photo gallery** from the list of available custom blocks.


**Step 2:** Displayed is the window with the photo gallery properties:


Mandatory entries include:

- **Title** - The title of the block as shown to the user.
- **Display title** - checkbox
- **Component size** - Full wigths (default), Seven columns, Five columns
- **Images size** - large (default) or small
- **Title** - text with formatting with text limit 160.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Photos** - From 2 to 50 blocks. For each photo the following entries are mandatory:
- **Block Description** - A brief description of your block
- **Image** - one media item

Optional entries include:

- **Photos** - From 2 to 50 blocks. For each photo the following entries are optional:
- **Title** - text with formatting with text limit 100.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Body** - text with formatting with text limit 240.
- **FUSE Code** - see [FUSE code CMS instructions](/cU84_lreQY2OTQupfjeaTg#CMS-Instructions) for details
- **Vertical spacing** - see [dynamic vertical spacing CMS instructions](/azdwOTghR8uWkILRsGkvwA?both#CMS-Instructions) for details.
- **Reusable** - checkbox. Would you like to be able to reuse this block? This option can not be changed after saving. If this option is selected, the you will be able to select this block from the list (see **Step 1**).

The entries are represented in the photo gallery content block as follows:


**Step 3:** Fill in the fields as required. For example:

- **Title** - Photo gallery.
- **Display title** - checkbox
- **Component size** - full widths
- **Images size** - large
- **Title** - "Photo gallery sample".
- **Photos** - Add three blocks. Do not forget to click the **Add photo** button after filling the fields. For each block fill in the following fields:
- **Block Description** - Sample photo
- **Image** - upload any image using the **Add media** button

After you add photos, click **Show row weights** to rearrange the items.


**Step 4:** Be sure to click the **Add block** button to ensure that your changes are updated.


**Step 5:** The layout tab displays the parameters of the added block. Click the edit icon the edit the block layout.


**Step 6:** Click the **Save layout** button


On the **Edit** tab for the content, make sure that the **Published** checkbox is selected and click **Save**.


**Step 7:** Open the content page using the **URL alias** for the page. URL alias is displayed on the **Edit** tab for the content, refer to the [flexible template CMS instructions](/k-R9oJNzSJG_F4x3P7gIug#CMS-Instructions) for details.


View the updates: