Understanding how to add images to your site (VIDEO)

There are a few different ways to add images in Harvard sites. This quick guide shows the three most common approaches when to use each one and how to avoid cropping and sizing issues. There is more than one way to add an image. In Harvard sites each behaves differently when it comes to cropping sizing and layout. Understanding which method you are using, is the key to getting the result. You expect. 

There are three primary ways to add images: 

Dedicated components like Hero or cards for prominent visuals, Inline in Body text for images that flow with your content, and thumbnail fields in content types to represent pages in listings. Let's look at each. For example, you upload an image here in page edit mode… and it automatically appears in list views as a thumbnail like this. Dedicated components, such as Hero and Card components, are used for prominent or structured visuals. These components include image fields with predefined aspect ratios to ensure consistent layout and presentation. These image fields have crop presets that enforce specific ratios, like wide 21:9 for banners. Always make sure that you upload high-res images to get sharp results. Aim for clear, well-sized images and keep files under 5MB for best performance. 

The second way to add images is to place them inline in body text using the editor. Inline images are used for visuals that live within the flow of content. These images are flexible and do not enforce aspect ratios, allowing them to scale and wrap with text. Insert via the Media button and then format size and wrapping from the toolbar. When you preview the image, it will flow as expected, with no forced crop presets; just scale to fit. 

Way three: Thumb fields in content types. Thumbnail fields define how content is represented in listings and card-based components across the site. These images are not page specific. They are reused anywhere. The content is displayed. Use thumbnail fields in content types such as Pages, News, Events, People, and Resource. It's that easy: Upload, and the image appears automatically in lists. 

Following these guidelines helps ensure images display consistently across components, layouts, and listings. Always upload images that meet or exceed, the recommended minimum size for the component or field. Higher resolution images, ensure sharper results, across responsive breakpoints, and display contexts. Choose image aspect ratios that align with the component or pattern where the image will be used. Wide ratios work best for Heroes and banners. Landscape or square ratios work best for cards, and listings. Matching ratios prevents unexpected cropping or padding. If you need to crop using the platform, you can crop when uploading the image and then manage cropping via Cropping controls: Most image fields and components provide two cropping options after upload: Manual Crop and Scale To Fit. Manual Crop lets you control which part of the image is emphasized. Scale To Fit preserves the full image and adds padding if needed. In these cropping examples it's clear how images may fit into their containers.

In summary: Use images in dedicated components for large visuals, inline for content flow, and in thumbnails for listings. Upload high-resolution images and maintain aspect ratios to avoid cropping. Thanks so much for watching — happy building in HarvardSites!"