Image sizes - VTUL/dlp-access GitHub Wiki

General Overview

All images are set to scale with the size of the page. It is not necessary to create images that are the exact dimensions of their containers in the website since all images will be automatically scaled or cropped accordingly. However, there may be some cases where a desired image presentation is needed and therefore a custom image size would be needed to achieve the desired results. In these cases, please refer to the documentation below for the image sizes used throughout the digital library platform.

Homepage

  • Cover image - Max size is 1140px x 450px. Images will be cropped and centered automatically to fit this area.
  • Featured items - 241px x 192px. Images will be cropped and centered automatically to fit this area.
  • Sponsor logos - Max size is 255px x 80px. Images will be automatically scaled down to fit the longest dimension.
  • Collection highlights - 252px x 350px. Images will be cropped and centered automatically to fit this area.

Browse collection page

  • Grid view - Max size is 348px x 210px. Images will be cropped and centered automatically to fit this area.
  • List view - Max size is 250px x 180px. Images will be cropped and centered automatically to fit this area.

Collection page

  • Collection thumbnail (upper left corner) - Max size is 360px x 300px. Larger images will be automatically scaled down to fit the longest dimension. Smaller images will be presented at their original size.
  • Item thumbnails - 250px x 200px. Images will be automatically scaled down to fit the longest dimension.

Search page

  • Grid view - Max size is 261px x 170px - Images will be cropped and centered automatically to fit this area.
  • List view - Max size is 250px x 180px - Images will be cropped and centered automatically to fit this area.
  • Masonry view - Based on screen size.

Item page

  • Mirador viewer image area - 1034px x 524px. Images will be automatically scaled down to fit the longest dimension.
  • Related items - 253px x 192px. Images will be cropped and centered automatically to fit this area.