Our Drupal template is responsive, which means it displays well on all types of devices, from desktop computers to mobile phones (and in between).
In order to accomplish this, the template adjusts the size and cropping of images to suit each user’s device.
You should keep this in mind when choosing images for your homepage slider and page banners.
In particular, it’s best to avoid using images with text in them because the text will be partially cut off on some devices.
Here is an example:
Here are the same images when viewed on a mobile phone – notice how part of the text is not visible in the image on the left:
This scenario often arises when creating a slide about an event. Rather than use a screenshot of the event’s poster, text and all, we recommend using a different image related to the event if you can (e.g., the poster’s background image, a photo of the event’s speaker, a stock photo). Try free stock-photo sites Pexels or Unsplash, or contact us at artsci.webliaison@utoronto.ca if you’re stuck.
How Homepage Slider & Page Banner Images Are Cropped
By now, we hope we’ve convinced you not to use images with text on them. But you may still want to know how images will display on different devices so you can ensure the most important part of your images is always visible.
We tested homepage slider and page banner images on several devices. Here is what we found:
Homepage Slider Images
- Homepage slider image dimensions: 1920 x 550 pixels
- The focal point of the image is the middle 900 x 400 pixels (approximately)
In this image, green represents the focal point of the image (i.e., the part of the image which is visible on most devices). Red represents the part of the image that may not be visible depending on the size of the user’s screen.
Page Banner Images
- Image dimensions: 1920 x 220 pixels
- Focal point: Middle 1024 x 220 pixels for most desktop/laptop users (middle 360 x 220 pixels for most mobile phone users)
In this image, darker green represents the focal point of the image (i.e., the part of the image which is visible on most devices). Light green represents the part of the image that will be visible on most laptop and desktop computers. Red represents the part of the image that may not be visible depending on the size of the user’s screen.
