Images

Use images to break up text, provide additional content, and reinforce the brand. There are several image patterns.

Placeholder Image

The standard image goes to the full width of the column. Use images with a width of 1170 pixels. Use on marketing-style pages to wow the viewer with a dramatic and eye-catching image.

Column Image

Set smaller images to the side. This pattern will work best if the text has a similar height as the image. Remember the exact sizing will depend on screen size.

Select Snippet: "Column Photo Column Text"
Customize column size
Customize Image - resize to the appropriate size as detailed below
Customize text
If including a header in the column, use the Headings Styles to reduce the top margin and top align.

Image Size

11-width grid = 908px wide
10-width grid = 825px wide
9-width grid = 743px wide
8-width grid = 660px wide
7-width grid = 578px wide
6-width grid (2 column) = 550px wide
5-width grid = 413px wide
4-width grid (3 column) = 330 px wide
3-width grid (4 column) = 230px wide
2-width grid (6 column) = 165 px wide
1-width grid (12 column) = 83px wide

placeholder

Fixed Float

Add Img - Fixed Width Align Left Wrap from the style drop to an image and it will float left at fixed width. Add the class inside the image modal window, not in the Style drop down. The size will display at actual size regardless of screen size. This is particularly useful for small graphics that would be pixilated at larger sizes placeholder and for items, such as icons, intended to display at a small size. Alternatively, you can add Img - Fixed Width Align RightWrap to float right.

Responsive Float

The pull-left-responsive image changes width based on screen size. It floats to the left. The max-width is 325px. Add class Img - 35% Width Align Left Wrap block (or Img - 50% Width Align Left Wrap block for a larger responsive image) in the image modal window. Images should top-align with the text.

And now for some filler text from https://css-tricks.com/all-about-floats/ so you can see how text wraps around the float.

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap will allow the words to flow right over the image like it wasn't even there. This is the difference between that image being part of the flow of the page (or not). Web design is very similar….

The pull-right-responsive image changes width based on screen size. It floats to the right. The max-width is 325px. Add class Img - 35% Width Align Right Wrap block (or Img - 50% Width Align Right Wrap block for a larger responsive image) in the image modal window. Images should top-align with the text.

Continuing with the filler text from above

…In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap. Absolutely positioned page elements will not affect the position of other elements and other elements will not affect them, whether they touch each other or not.

There are four valid values for the float property. Left and Right float elements those directions respectively. None (the default) ensures the element will not float and Inherit which will assume the float value from that elements parent element.

Sometimes floating an image can cause too much content to wrap around an image. Add a 12 column snippet and place the content you don't want wrapped around the image.

Sliding Carousel

Images in the sliding carousel should be 300px X 300px.

Slider Carousel

Image Full Width with Caption

Add a two column images with title and additional text. This pattern was originally built for the Profile Page.

Create two columns by adding the Column Snippet
Add Snippet Image Full Width with Caption to each column.

Project Title

Special Thanks to: Professor Name One, Name Two, Name Three, and Name Four. (With Link)

Project Title

Special Thanks to: Professor Name One, Name Two, Name Three, and Name Four. (With Link)

Images - 2 with no gutter

Add a two column project image group as seen on the profile page. Display two images with no gutter and a unified caption. Insert Snippet Images - 2 with no gutter. Then insert a caption underneath the image with the appropriate Style Dropdown.