---
title: Images
tags: Site Settings
---

# Images

Graphics are images, icons, data visualization, videos etc. that are specific to each brand.

## Images

Place to organize images used in final designs. Charts and graphs imported into final website as images.


## Graphic Icons

Brand-specific graphic icons can be used in the website navigation and components to represent a concept visually. The meaning of icons should be immediately clear to the user.

These icons can come from any source and are imported into the site as a graphic.


## Graphics

There is a selection of universal images and interactive icons available across all brand sites.

### Images

Image width and height can fill a container or be sized proportionality with one of 6 image ratios.


### Interactive Icons

The default interactive icons style for US Pharma is set to [Material Design Rounded](https://fonts.google.com/icons?icon.style=Rounded). This style pairs well with Google fonts and the rounded design of the components.

All user interactions such as menu icons, chevrons, and arrows come from this library. Google Icons can also be used as graphic icons if desired.


## Resources

### CMS Instructions

#### Adding Images to Content

While adding or editing content, content editors can add images to content components into any text field with formatting as follows.

Please refer to the [flexible template CMS instructions](/k-R9oJNzSJG_F4x3P7gIug#CMS-Instructions) for details about adding and editing content.

**Step 1:** Open the content block you wish to edit and scroll to the reqired field. Make sure that the required fields for the block are filled in.

**Step 2:** Click the add media icon:


In the add media window, navigate to the **Image** tab, select the image from the library or upload a new one and click **Insert selected**.


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


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


**Step 5:** 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.

#### Images Configuration

Site administrators and content editors can add images to the image library to use these images further on while creating content.

**Step 1:** Navigate to the **Content -> Media** menu and click **Media library**:


**Step 2:** On the Media Library screen, you can filter media, apply actions to selected media or add new media to the library. Click **Add media** to upload a new item to the library.


Click **Image**:


**Step 3:** Displayed is the window with the image properties:


Mandatory entires include:

- **Name** - text
- **Extra Large Image** - media file up to 256 MB. Allowed types: png, jpg, jpeg, svg. Images must be larger than 20x20 pixels. Images larger than 2400x2400 pixels will be resized.

Optional entries include:

- **Large Image** - media file up to 256 MB. Allowed types: png, jpg, jpeg, svg. Images must be larger than 20x20 pixels. Images larger than 2400x2400 pixels will be resized.
- **Medium Image** - media file up to 256 MB. Allowed types: png, jpg, jpeg, svg. Images must be larger than 20x20 pixels. Images larger than 2400x2400 pixels will be resized.
- **Extra Small Image** - media file up to 256 MB. Allowed types: png, jpg, jpeg, svg. Images must be larger than 20x20 pixels. Images larger than 2400x2400 pixels will be resized.
- **Revision log message** - text.

**Step 4:** Fill in the Name field, upload up to 4 sizes of the image and click **Save**.

The image appears in the media library and becomes available for being added to content.