• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Image Styles

    What is it?

    Images are based on a 4:3 aspect ratio. Banners are the exception as they fit a more specific purpose.

    How does it work?

    Image styles use a Focus scale and crop algorithm to look for faces in the image and crop around those so faces are not cut out of images. Sometimes this is too hard for the algorithm to do if the image is overly complex or poorly lit. You can still manually crop images in Photoshop and upload those.

    Using Image Styles

    There is an activity in the Site Editor training which covers how to use image styles.

    Updating image styles after replacing images

    If you replace an existing image via the Image Browser, any image style versions of the original image will not automatically be updated, for instance banners. To trigger these image styles to be regenerated with the newly replaced image go to Configuration > Media > Image Styles. Edit the style that you have a stale image for (e.g. Banner) and click 'Update Style' without making any changes. This will trigger the process to generate new images for this image style.

    NOTE: This is a short term work around until the replace function in the Image Browser is updated to trigger image styles to regenerate.

    Style Demo

    Below this page is a listing of the variations you can use. We recommend you use small to medium image styles for your content.


    Read more information about filesize and dimensions.

    Previous (Search Engine Optimisation)Next (For Developers)