LogoLogo
  • GovCMS8 Site Building Training Manual
  • Contributing and Feedback Guide
  • Software and module requirements
  • UNIT 1: FUNCTIONAL ANALYSIS
    • Overview
    • Layout of a GovCMS page
    • Regions in GovCMS
    • Planning your site
    • About our client
    • Understanding requirements
    • Audience analysis
    • User (visitor) personas
    • Define user stories
    • Roles and Permissions
      • Exercise 1.1: Configure account settings
    • Blocks in GovCMS
      • Exercise 1.3: Place Welcome message block
    • Site navigation
    • Footers
      • Exercise 1.4: Build the related links menu
      • Exercise 1.5: Assign the related links menu block to a region
      • Exercise 1.6: Configure the related links menu block
      • Exercise 1.7: Rearrange the main menu
    • Theme settings
      • Exercise 1.8: Change the logo
      • Exercise 1.9: Create a friendly error page
    • Unit 1 Summary
  • UNIT 2: DESIGNING AND PLANNING CONTENT
    • Designing and planning content
      • Exercise 2.1: Compare content types
    • Planning your site structure
    • Planning data entry and display
    • Discussion
      • Exercise 2.2: Design a content type in minutes
      • Exercise 2.3: Create a content type
    • Add and configure fields
      • Exercise 2.5: Modify an existing field
      • Exercise 2.6: Add a custom text field
      • Exercise 2.7: Review the field list report
    • Manage form display
      • Exercise 2.8: Testing content types
    • Unit 2 Summary
  • UNIT 3: MANAGE MEDIA
    • Manage Media
    • Customise image display with image styles
    • Review configuration of image media display
      • Exercise 3.1: Example use of image styles
      • Exercise 3.2: Add and configure a media field
      • Exercise 3.3 (Challenge): Change image size
    • Unit 3 Summary
  • UNIT 4: TAXONOMY - CATEGORISING CONTENT
    • Taxonomy - Categorising content
      • Exercise 4.1: Add new Vocabulary
      • Exercise 4.2: Add Taxonomy field to content types
    • About input options
      • Exercise 4.3: Add fields to content types
      • Exercise 4.4: Test the new vocuabulary
    • Editorial considerations
    • Prepare documentation for new staff onboarding
    • Content creation forms
    • Unit 4 Summary
  • UNIT 5: TEXT FORMATS AND RICH TEXT
    • Text formats and rich text
      • Exercise 5.1 (Optional): Set up the Rich Text editor
      • Exercise 5.2 (Challenge): Create a new text format
    • About cross-site scripting
    • Text formats
    • Unit 5 Summary
  • UNIT 6: CONTENT LISTING WITH VIEWS
    • Content listing with Views
      • Exercise 6.1: Build the employment news view
    • Views - Part 2
      • Exercise 6.3: A customised News and Media page
      • Exercise 6.4: Reuse a Views template
    • Related content by term
      • Exercise 6.5: Make a list of States/Territories block
      • Exercise 6.6: Build the related content block
      • Exercise 6.7: Configure data field and Event content type
      • Exercise 6.8 (Challenge): Extend Content type
      • Exercise 6.9: Modify an event listing for future dates
    • Customize the content administration experience
      • Exercise 6.10: Administration with View bulk operations
    • Unit 6 Summary
  • UNIT 7: URL ALIASES
    • URL Aliases
      • Exercise 7.1: URL aliases - Patterns
    • URL Redirects
      • Exercise 7.2: Configure redirects
      • Exercise 7.3: Breadcrumbs
    • Menu check
    • Unit 7 Summary
  • UNIT 8: SITE BUILDING EXERCISES
    • Site building exercices workshop
    • Extend content types with new fields
      • Exercise 8.1: Add an external link field
    • Agency reference link
      • Exercise 8.2: Create Agency References
    • Job list dropdown filter
      • Exercise 8.3: Configure the job listing
      • Exercise 8.4: Agency logo in Job Posting view
      • Exercise 8.5: Challenge exercises
    • Discussion
    • Views contextual filters
      • Exercise 8.6: Add About author block to News article
    • Further discussion and exercices
    • Employee list and custom profiles
      • Exercise 8.7: Set up profile fields
      • Exercise 8.8: Create a list of users
      • Exercise 8.9: Edit the existing view to filter out roles
      • Exercise 8.10: Create a custom layout
      • Exercise 8.11 (Challenge): An image gallery
    • Unit Summary
    • Discussion
  • UNIT 9: SEARCH AND RELATED CONTENT
    • Search and related content
      • Exercise 9.1: Explore the default search
      • Exercise 9.2: Set up Job posting content type display in global search
      • Exercise 9.3: Create new search page with Search API
      • Exercise 9.4: Add fields to the index
      • Exercise 9.5: Extend the search with Facets
    • Unit Summary
  • UNIT 10: SITE PERFORMANCE
    • Overview
    • Planning for Peformance
    • Define Goals and Requirements
    • Review current issues and bottlenecks
    • Other performance considerations
    • Unit 10 Summary
    • Glossary of terms
    • Appendices
Powered by GitBook
On this page
  • 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

Was this helpful?

Edit on GitHub
Export as PDF
  1. UNIT 3: MANAGE MEDIA
  2. Review configuration of image media display

Exercise 3.2: Add and configure a media field

PreviousExercise 3.1: Example use of image stylesNextExercise 3.3 (Challenge): Change image size

Last updated 2 years ago

Was this helpful?

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.

Image of Add image style
Image of success notification
Image of success notification
Image of success notification
Image of Media types menu
Image of Manage display / create new view mode
Image of Manage view modes
Image of Manage view modes
Image of Open image link
Image of apply new image style
Image of confirm new style
Image of check permissions for Job posting
Image of reuse existing field
Image of Create referenced entities checkbox
Image of field Widget config