Images

Close this notice

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Beginner

We set styles for images to be responsive by default by applying max-width: 100%;, height: auto;. This will keep your images from expanding outside of their container. If you want to take things a step further you can use the class .wdn-stretch to apply width: 100%, thus always scaling the image to the size of the container.

You can also use the clear-top class to remove top margin on text to align with image on the right.

Default image styling is built into the UNL web framework for you to use. The image styling documented here is intended for inline images in a page. A 'Hero' content type is also available for the large image-and-text-and-CTA designs that are typical at the top of site homepages. Please note, while other markup has been used in the past for this presentational treatment, the markup below is the current supported markup and will be the markup used moving forward.

For large, presentational images, review the UNLedu bands documentation.

Simple frame

Provide a simple, subtle frame around your image.

Important: use a <div class="wdn-frame"> in this case instead of a <figure>. See the accessibility considerations for the frame border for more details.

Photo of the UNL Campus

Example HTML

<div class="wdn-frame">
  <img src="graphics/image_templates/image_tag_ex.jpg" alt="Photo of the UNL Campus" />
</div>

Image frame with caption

In many cases, a caption will provide more context and is important.

Photo of the UNL Campus
The Union Plaza and greenspace at the University of Nebraska–Lincoln are beautiful in the spring.

Example HTML

<figure class="wdn-frame">
  <img src="graphics/image_templates/image_tag_ex.jpg" alt="Photo of the UNL Campus" />
  <figcaption>The Union Plaza and greenspace at the University of Nebraska–Lincoln are beautiful in the spring.</figcaption>
</figure>

Accessibility Considerations: 

  • All images are required to have an alt attribute. Images that are purely decorative and do not contribute to page understanding can have an empty value, or alt="". All other images need to have a descriptive value, for example alt="description of what is happening in the image". The alternative text is sent to assistive technology, including screen readers. The W3 offers a helpful tool to help you decide what your alt text should be.
  • Avoid using text in images, as the text will not be available to assistive technology. Instead place the desired text on top of the image with CSS.
  • Only use a <figure> element to wrap your image if you have a <figcaption> to go with it. If you just want a frame border, use the .wdn-frame class as shown in the first example. This will help ensure the best compatibility with assistive technology. In fact, some assistive technology will ignore the alt text and use the <figcaption> instead. So if your <frame> is missing a <figcaption>, nothing will be read by the assistive technology.
Contributed By: 
IIM

Comments

ljohnson13's photo

Submitted by Leslie Johnson on Tue, 2017-11-28 10:45

How do you align a figure (image frame) without creating columns (essentially so the text wraps around it)?