To help keep your site neatly organized and flowing easily for reading, all images in GovHub sites display at specific sizes.
You can embed stand-alone images into the “What You See Is What You Get” (WYSIWYG) text editor of certain content types.
Recommended minimum dimensions: images embedded in the text editor
|
When you embed an image in a text editor, you have the option of three embed alignments: full width, left, or right. The alignment you choose determines how large the image will display. The image will scale proportionally to the system-determined width, keeping the original aspect ratio of the image. This chart shows the actual largest dimensions at which an image will appear in each of the described situations:
Note: Images smaller than the available space will not grow to fill the space. |
Images that smaller than the available space will not scale up and will leave empty gaps on the page. |
The images in blocks placed on a Landing Page will scale to a specific size and crop to a specific aspect ratio. By default, these images will crop towards the center of the image, but you can adjust the focal point on each individual image. The image will always fill the available space, showing as much of the image within the crop as possible.
Images that do not meet the following minimum dimensions will scale up and may appear pixelated. |
The following display at a 4:3 aspect ratio:
Spotlight
Promo
Tile without text
Since Tiles with the “Image” layout are most often used for logos, try to use a more square (rather than wide) logo layout, when possible. You’ll probably need to add some white space around it to make sure no part of the logo is lost when the image is cropped into a square.
Images will grow to fill space, pick a large image with the approximate aspect ratio to ensure the best result.
Recommended minimum dimensions: common Micro-content images
|
Heroes (both large and condensed) display with a flexible crop, which depends on content and viewport width. The image pins to the center, so it’s best to crop it so the focus is in roughly the center of the image. Sometimes it can help to offset the focus a little to the left (if using the large display) or to the right (if using the condensed display) to address where it overlaps behind the text area.
Recommended minimum dimensions: Hero image
|
Do not use a Hero image for imagery that requires a specific crop, such as text or an image with a watermark in the corner. The visible portion of the image changes with amount of text, display style, and window width. |
Images in Tiles display at a 4:3 ratio. When choosing an image, keep in mind that the top and bottom will be cropped.
Recommended minimum dimensions: Tile image with text
|
The following types of micro-content display with a 4:3 ratio, but do not use a 4:3 image style:
No image style
Uses a 3:2 ratio
Recommended minimum dimensions: Call to Action
|
The ratio of images used in a Link Collection varies on placement and the type of image used
This chart shows the actual largest dimensions at which an image will appear in each of the described situations:
Note: When embedded in the WYSIWYG, some images have a 4:3 ratio (720 x 540) and others have a 1:1 ratio (720x720). The ratios are not dependent upon alignment or specific settings in the Link Collection. At this time, we are not sure of what causes the difference. |
This chart shows the actual largest dimensions at which an image will appear in each of the described situations:
Note: Images smaller than the available space will grow to fill the space. |
Some content types have a specific image field.
The “Portrait” field on the Bio node crops to a circle on the Bio details page and in Bio teasers.
Recommended minimum dimensions: Bio Portrait images
|
The “Thumbnail” field on the Event node crops to a circle on the Event details page. It does not currently display on Event teasers.
Recommended minimum dimensions: Event thumbnail images
|
The “Logo” field on the Program or Service node crops to a circle on the Program or Service details page. It does not currently display on Program or Service teasers.
Recommended minimum dimensions: Program or Service Logo images
|
Displays at a 1:1 ratio
Recommended minimum dimensions: Book cover images
|