> 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-2-add-and-configure-a-media-field.md).
# Exercise 3.2: Add and configure a media field
In this exercise you will add an Image media field to a content type and learn how to configure it. There are four steps involved:
1. Create an image style
2. Configure an Image Media entity view mode to use an Image style
3. Check permissions
4. Add image field to content type
Image styles are set and configured in the *Image styles admin page*.
## 1. Create an image style
1. Go to *Configuration* → *Media* → **Image styles**.
2. To create our new image style, click on the **Add image style** button at the top of the page.
3. Name it **Job Posting Image** (given the image style will be applied to the “Job posting” Featured Image field.)
4. Click the **Create new style** button to save the new image style. You’ll then be taken to the **Edit style Job Posting Image** page as seen below.
5. The next step is to add the Scale effect. Under **Effect** select **Scale** from the dropdown menu.
6. Click **Add**. You’ll then be taken to the **Add scale effect** page.
7. Enter the following settings:
* **Width**: 1200
* **Height**: leave empty This allows you to have a flexible image height and keep the original proportions of the image.
* Leave the **Allow Upscaling** checkbox unselected Image upscaling usually leads to poor image quality.
* Click Add effect.
8. Your *image style* has been saved. You can make additional changes and then click the **Save** button to save those changes.
## 2. Configure an Image Media entity view mode to use an Image style
1. Navigate to the *Structure* → *Media types* → *Image* → *Manage display* (/admin/structure/media/manage/image/display). You should see some out-of-the-box available view modes.
2. Scroll to the bottom of the page and expand the **Custom display settings** pane. You can see a few *View modes* preselected by default. Each selected checkbox here represents an enabled *View mode* at the top of the page.
Since we need to apply our custom *Image style*, we have to create a new *View mode* so that we don’t affect the display of existing images that are configured to display with other *View modes*.
3. Click on the **Manage view modes** link (see the previous screenshot) in a new tab/browser window.
4. Click the **Add view mode** button.
5. Select **Media** from the list.
6. Give it a name “Job Posting featured” and click the **Save** button.
7. Return to the previous browser tab/window - go back to step 2b above and refresh the page to get the updated list of *View modes*.
8. Repeat step 2b above by scrolling down and expanding the *Custom display settings* pane. You should now see the Job Posting featured *view mode* as a checkbox option. Select it and save the page.
9. Note, that the **Job Posting featured** tab is now available at the top. Click it to navigate to the view mode configuration page.
10. At the moment, the Image field is the only one available for display and it is set to show as the originally uploaded image, without any *image style*. We need to change it to apply our custom *Image style*.
11. Click the gear link on the right to change from the Original image to the *image style* **Job Posting Image.**. Press the **Update** button to save the changes.
12. Confirm the image style option has changed:
13. Press the **Save** button to save the changes.
## 3. Check permissions
1. Go to **People** → **Permissions** and double check the permissions for the content type: *Job posting*.
2. Make sure the *Content Author* role has permissions to *Create*, *Edit* any and *Delete* any *Job posting*.
3. Click Save permissions
## 4. Add image field to content type
Go to *Structure* → *Content types* → *Job Posting* → **Manage fields** page. Add a field following these steps:
1. Click the **Add field** button.
2. In the “Reuse an existing field” selector, choose **Entity reference: field\_featured\_image**.
3. Ensure the label reads “Featured Image”.
4. Click the **Save and continue** button.
5. In the next page, select the **Create referenced entities if they don't already exist** toggle in the Reference type fieldset.
6. Select Image as **Media type**.
7. Leave the remaining values to their defaults and **Save settings**. This will take you back to the **Manage fields** page.
8. Navigate to the **Manage form display** (secondary tabs).
9. Locate the **Featured image** field, set the *Widget* to **Entity Browser**.
10. Click on the cogs icon to configure the Entity Browser.
11. Change the Widget for the field as displayed below, then click on **Update**.
---
# 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-2-add-and-configure-a-media-field.md?ask=&goal=
```
`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.