Design System

A-Z Database List

LibGuides A-Z Database List management, descriptions, thumbnails, etc. In Progress

Thumbnail Images

All database thumbnails must meet the following criteria:

• Aspect ratio — 179:100
• Border — 1px solid black on all sides
• Screenshot — current database interface

Helpful Tips

1. Setting up the screenshot
   • Use Window Resizer (Chrome extension) to resize the viewport of your browser so it matches the required 179:100 aspect ratio.
     • Recommend setting the resizer to 1250x698 and then scaling the image down.
2. Scaling down the screenshot
   • Use Preview (Mac) or RedKetchup to reduce the size of the screenshot.
     • Recommend scaling down to 358x200, which is 2x the required 179x100 size. This allows for the image to remain relatively crisp when displaying it a smaller size.
3. Adding a border to the screenshot
   • ​​​​​​​Use Lunapic — Border Tool to add a black border of 1px thickness to all sides of the screenshot.
4. Setting the height and width of the screenshot in LibGuides
   • ​​​​​​​​​​​​​​When uploading the thumbnail to the database asset in LibGuides, be sure to set the dimensions of the image:
     • Height: 100
     • Width: 179