Image Display Types in Showoff Libraries

When adding images to your library entries, how the image is displayed can significantly impact the overall look and feel of your website. Showoff provides several image display options that control how the lead image appears in grid or list views, allowing you to tailor the visual presentation to suit the content.

How It Works

By default, images are scaled to fit their container, but you can select a display type to control how the image is cropped, stretched, or contained. Choosing the right display type ensures that your images look polished, professional, and consistent across the site.

Available Display Types

1. Default

   • Automatically scales the image to fit the container.

   • Maintains the image’s aspect ratio without forcing cropping.

   • Works well for general images where no specific scaling preference is needed.

2. Cover

   • The image fills the entire container, maintaining its aspect ratio.

   • Portions of the image may be cropped to ensure full coverage.

   • Ideal for background-style images or photos that need to completely fill a card or block.

3. Contain

   • Ensures the entire image is visible within the container.

   • The image may not fill the entire space, leaving some empty margins around it.

   • Perfect for logos or graphics where you don’t want any part cut off.

Best Practices

• Test multiple display types: Preview your press release entries in different display options to determine which works best for your content.

• Consistent formatting: Use the same display type across similar library entries (e.g., all press releases) to maintain a uniform appearance.

• Consider image composition: For photos with important elements (faces, text, logos), avoid “Cover” if cropping would cut off key details. Use Contain or carefully crop your images beforehand.

• Responsive design: Remember that images may appear differently on mobile devices. Always preview on multiple screen sizes to ensure your chosen display type works well across devices.

1. Default

The image is stretched to fit, in this case, stretched to fit the height. Perfect for photos.

2. Contain

The image will not be cropped at all. Perfect for logos. If this was a photo you would have a white gap above and below the image.

3. Cover

The image will be stretched and zoomed in to fill the box, there will never be any white spaces around this image.

Tip: For entries like sponsor logos, “Contain” is often the best choice. For feature images or large visuals, “Cover” can create a more immersive and visually appealing layout.