Images in HarvardSites Drupal: Getting the results you expect (VIDEO)

This tutorial helps you understand how images behave in Harvard Sites. If you've ever added an image and it looked different than you expected, That's normal. Once you understand why, it becomes much easier to control.

Images, behave differently, depending on where they're used. Hero images are large and designed to set the tone for the page. Card images are cropped to fit a consistent layout. While inline images often display more of the original image. They can also be resized and aligned within the content. Inline layouts allow images to wrap with text. Images used in lists or grids are handled differently. They may be cropped or scaled to fit the layout depending on how the listing is designed. Images are cropped differently depending on the layout. The system automatically performs cropping as part of its process, it applies layout rules without altering your image. The system determines where these rules should be implemented.

When choosing images, select images with a clear subject and enough space around it. Images that are too tightly framed are harder to use across different layouts Images with space around the subject work more consistently across different components. In this context, this image is used in a hero , and here, it appears differently in a card layout.

Use images that are appropriately sized and remain clear when displayed. Image placement, influences, both Its behavior and appearance. Understanding images leads to consistent results. For more visit the image sections in the User Guide. Use images based on where they appear. Choose images that crop well, stay clear, and support your content. Happy building in HarvardSites.