When adding an image to a page, there are a few important things to take into account. Some tips and tricks to use images in the most effective way can be found below, as well as a series of layouts with the pixel width of the image noted in the layout. All dimensions will be noted in pixels (px) unless otherwise specified.

• Images on the site will constrain to their width. This will mean that when working on content in a card, the width will be set, and then the height of the row will constrain to the largest height in that row. If you have a large paragraph of text that has more line height that the height of your image, the image will have empty space below it. If the image is taller than the content around it, the row will be the height of the image. For these reasons, when planning out your content, the most important measurement for an image is its width. (Exception: Jumbotron)
• If you add an image with a width larger than the recommended with for a space, the picture will resize down to the size of the space (proportionally)
• Images have 2 kinds of uses. Cards and Jumbotrons. The card use applies to any image added with a media card, or through the WYSIWYG with the toolbar. The Jumbotron has a constrained image size (see below).
• If you use an image in the WYSWYG you can set a thumbnail size - this size is determined by the largest side of the image. For example, if you select the 650 x 650 thumbnail and have uploaded a 1300 x 650 image, the resulting thumbnail will be 650 x 325, rather than the square that the dimensions imply.
• Jumbotron - The Jumbotron will be as wide as the window you have open. If you have a more narrow window, you need a more narrow image. If you have the widest window on a 14 in screen, you will need a 2115 x 450 image. We recommend no smaller than 1920 x 450 for the Jumbotron. The wider the image the better, although the height will always be 450 px high. Jumbotron images are also the size used in Hero rows on landing pages.
• Featured Image - The Focal Point Scale and Crop on Featured images is set to 1200 x 400px
• Images will alight to the top left corner of the layout they are in, so if an image has a smaller width than the recommended width in a card, it will be at the top right corner of the layout you have selected.
• We recommend that you do not use varying row widths with complex rows including many cards.
• To have images in a row that are the same size - crop the images to the same pixel size and then upload them to the site and add to your page. A free software that helps with resizing is: https://www.birme.net/?target_width=400&target_height=500 which allows you to set the height and width of the photos you are resizing at the same time.

In the following examples you will see layouts exaggerated for the purposes of displaying these points. You will also see many of the same images displayed in different layouts. These images have been uploaded into the media library once, and then are reusable throughout the site.

Note that all uneven column rows are combinations of ratios used in the equal column row examples.