This task is for users with the following roles: OC Site Designer.
Many pages on your site will have built-in images and image fields. The dimensions of these images are set in the Image sizes tab of your theme, and you can select the sizes for a desktop, tablet, and mobile device.
Before editing these sizes, keep in mind that most of them appear in various places. For example, you cannot change the Default page image for OC News Articles only. This is also a good place to check what image sizes your content authors should be using.
These are the image sizes you can change:
- Default page image: used when the page image sits at the top-right of the content area, such as image fields on default templates and as the profile image on department pages.
- Full width page image: used when the image takes the full width of the main part of the content area, such as image fields on content types using a full-width with image template.
- Homepage listing thumbnail: used when images on a homepage listing are one-third of the listing width.
- Homepage listing wide thumbnail: used when images on a homepage listing are half or two-thirds of the listing width.
- Featured content thumbnail: used for images in the featured content row on the homepage.
- Large thumbnail: used when images on a listing or landing page take up the full width of the item, such as lists in a grid format.
- Small thumbnail: used when images on a listing or landing page sit to the right of the item, such as lists in a stream format.
- User profile image: used for images in the Elected Official listings.
- Featured image: used for the featured image field on the OC Elected Official content type.
For each image, you can set the width and height in pixels. You can also check the Auto box for each dimension to allow the system to calculate the value based on the image's original aspect ratio.
If you enter a width of 400px and a height of 300px, the page will use a 400x300 image. If the image is smaller than the container on the page, it will be stretched to fit. Stretched images can lead to a bad user experience, as small images may become distorted. If the image is larger than the container holding it, some cropping will occur.
What else?
- Create, edit, and apply a theme
- Theme layouts and layout components
- Using Styles in Theme Builder
- Configure Styles tab settings
- Add custom CSS and JavaScript to your theme
- Configure homepage top task icons
- About your navigation menu: hamburgers, dropdowns, and mega menus
- Configure top tasks in your navigation menu