Multimedia
Images and figures
The figure wrapper defaults to the width of the image or caption text, whichever is greater. Figures and images without the figure wrapper are positioned on the right of the column. Figures and images will always scale to fit the column they are in, a trait necessary for smaller screens and mobile devices.
Images and figures can have the following classes applied to adjust position and size:
- quarter, third, half, twothird: Adjusts the width of the figure.
- right: Positions the image to the right side of the column.
- figure-left, left: Positions the aside to the left side of the column.
- clear: Prevents any content from wrapping to either side of the aside.
- no-clear: Allows content to wrap to either side of the aside.
- caption-right: Positions the image and caption side by side.
Use a space to separate classes. Do not use commas or semi-colons.
Images
By default images are positioned to the left, include a margin and will be scaled down by the browser to never be more than the width of the column.
Figures are positioned to the right side of the column by default, allowing text to wrap to the left.
Figure width
Figure 1: Do
This figure has a width set to the same width as the image.
<figure style="width:300px;">
Figure 2: Don't
This figure has no set width. The width of the figure will be the width of the text.
<figure>
The width of a figure should be adjusted with a css style to match the width of the image. Specifying a pixel width (Figure 1), the width of the image, will prevent a space from being added to the right of the image (Figure 2). The coding to do so is as follows:
<figure style="width: 300px;">
Larger images may benefit from using a class to specify the width. By default, images will always scale down to fit inside the figure wrapper.
Figure position
This figure has a class of left, positioning it on the left side of the column.
<figure class="left" style="width: 300px;">
The position of the figure can be adjusted by applying a class of left, center or right. Positioning left or right will allow text to wrap to the left or right. Applying the center class will prevent text from wrapping.
This figure has a class of center. Applying a width with either a class or a style will allow the browser to automatically render the appropriate margin to center the figure.
<figure class="center" style="width: 300px;">
This figure has a class of caption-right. Applying a width is optional and when doing so it is important to factor in the image and caption will each be 50% of the figure.
<figure class="caption-right">
This figure has a class of caption-overlay. The caption will cover a portion of the image. The look works best for short captions and large images.
<figure class="caption-overlay"
Video
Scaling videos proportionally
Two divs with the classes below should be used to size, position and scale video embeds correctly:
- container-wrapper
- video-container-wide (for widescreen, 16:9) or video-container-full (for standard resolution, 4:3)
The following classes can be added after container-wrapper to scale and position the video.
- twothird, half, third, quarter: Use for video that is narrower than the width of the column. Following content will wrap to the right.
Note: Videos will ignore height and width attributes applied directly to iframes and default to the width of the column. Apply a width class to the container-wrapper element to adjust the size of the embedded video. - no-margin: The margin will be removed from the left and right of the video. Recommended to only be used on full column width videos.
- right: The video will be positioned to the right side of the column with text wrapping around the left.
- clear: The video will drop below the preceding content to it's own line. Content will not wrap around the video.
Embedded video (video-container-wide)
Note: videos may not appear in the correct location in Dreamweaver (the iframe may show up to the far right), but, browsers will render the layout correctly.
Embedded video (video-container-full)
Embedded video description.