> For the complete documentation index, see [llms.txt](https://salsa-digital.gitbook.io/govcms-site-builder/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://salsa-digital.gitbook.io/govcms-site-builder/unit-3-manage-media/review-configuration-of-image-media-display/exercise-3-1-example-use-of-image-styles.md).

# Exercise 3.1: Example use of image styles

In the Event content type, we have an image field. The same image may display as a Thumbnail (left in the screenshot below) or Full content image (right in the screenshot below). The image is scaled down, resized and cropped. Each image has a copy stored in the filesystem.

| Example: thumbnail                                         | Example: Full content image                                   |
| ---------------------------------------------------------- | ------------------------------------------------------------- |
| ![Image of Thumbnail display](/files/-LzEemMkxmhSp9dQjQ6J) | ![Image of Full content display](/files/-LzEemMlhHMKTu9HWUAr) |

You may explore how the Event content type displays these images based on the Display Mode.

1. Navigate to *Structure* → *Content types* → **Event** → **Manage display** → **Teaser Small**.
2. Locate the Image field.

Explore how it’s rendered by using the **Thumbnail** *Display mode* from the **Image** *Media entity* (see previous exercise).

![Image of image display](/files/FNveJEfxMRqsq5CGzhRR)

## Naming image styles

Image styles allow you to scale, crop and resize images without changing the original image. By default, in GovCMS seven sizes are defined:

1. Featured
2. Landscape
3. Large (480×480)
4. Linkit result thumbnail
5. Medium (220×220)
6. Square
7. Thumbnail (100×100)

The **Thumbnail (100×100)** style, for example, is shown with the teaser for image posts and **Square** is used when listing Events.

When you change an image style configuration, the image module automatically refreshes all created images.

Every image style must have a name, which will be used in the URL of the generated images. Image styles are generally named in one of three ways:

1. Using a generic style label/name, such as “Featured” or “Thumbnail”. This is the most flexible and can be reused in different locations.
2. Using its ‘location’ within the image style name, e.g. “Events Banner”.
3. Using the image size to name it, such as “Large (480×480)”.

You can name your image styles differently, but we recommend setting up a naming convention.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://salsa-digital.gitbook.io/govcms-site-builder/unit-3-manage-media/review-configuration-of-image-media-display/exercise-3-1-example-use-of-image-styles.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.