
Drupal Website Photography Guidelines
How to select the best image(s) for your Trent University Drupal website
Quick Links
- Understanding the Photography Zones on Trent University Drupal Websites
- Banner Photography
- Promo Photography
- Pullout Photography
Understanding the Photography Zones on Trent University Drupal Websites
There are 3 main photography zones:
- Banner photo
- Promo photo
- Pullout photo
Each zone is highlighted in yellow, below in the website screen grab, and then described in detail.
Banner Photography
Follow the Trent University photography guideline checklist when taking and searching for new photography for your Drupal website:
- Use the Trent University Photography Catalog to select your imagery
- Media waivers have been signed for all recognizable persons in the photography in the Trent University Photography Catalog, thus Trent University owns the rights to use those digital assets on our website and other marketing material.
- You cannot upload digital assets to your website that Trent University doesn't own the rights/permissions to, via a media waiver form.
- Is the photograph file size large enough?
- The image must be more than 2 MB in size to accommodate the screen resolution needed and at least 1400 pixels wide X 400 pixels high at 72 pixels per inch
- Is the orientation appropriate?
- Select only landscape style photography, portrait style won’t fit
- Is the photograph current?
- No more than 3-5 years old if possible
- Does the subject matter reflect your department visually and accurately?
- Banner images have been strategically sized to take up the full horizontal expanse of your browser window and placed at the top of the webpage so that they are the first visuals that website visitors see when they arrive on your website. They have been designed in a way that make the website user feel as though they are apart of the experience, that they can jump right ino the action. Banner images are a visual representation of your department and should feel inviting, exciting and accurately depict the emotion and experience that a visitor to your department would experience.
- Do:
- Happy smiling faces
- Bright and airy backdrops
- Colorful palette
- Sharp focus
- Action shots
- Distinct focal point
- High resolution
- Trent University staff, faculty and students
- Don't
- Hidden faces
- Backs to the camera
- Overly busy backdrops with no distinct focal point
- Out of focus
- Pixilated low resolution
- Non Trent University staff, faculty or students
- Add typography to the photograph, this is not accessible and will compete with the graphic design on the web page
- Do:
- Can't find a photograph to represent the web page subject matter?
- In some cases it’s necessary to use a generic photograph to represent the subject matter. If that's the case consider a general campus photograph.
- Occasionally a stock photograph is required, but generally not recommended. If it is required, please visit the Thinkstock website to search for an appropriate photograph and send the filename in a request to webrequest@trentu.ca
- Banner images have been strategically sized to take up the full horizontal expanse of your browser window and placed at the top of the webpage so that they are the first visuals that website visitors see when they arrive on your website. They have been designed in a way that make the website user feel as though they are apart of the experience, that they can jump right ino the action. Banner images are a visual representation of your department and should feel inviting, exciting and accurately depict the emotion and experience that a visitor to your department would experience.
Promo Photography
Promo photographs are merely a cropped version of the corresponding banner photographs; there's no need to select a unique photograph for this application.
Pullout Photography
Pullout photographs are:
- 325 pixels wide x 165 pixels high at 72 pixels per inch
- left aligned
- padded in order that text won't overlap the image
The style outlined above is achieved by applying a CSS class to the cropped image named: left-pullout-image and is achieved by:
- In edit mode, navigate to the Body content area and double-click the pullout image and the Image Properties dialog box will appear.
- Click on the Advanced tab.
- In the Stylesheet Classes field, type left-pullout-image
- Click OK