Images

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 templates for you to use. 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.

Photo of the UNL Campus

Example HTML

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

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>

Animated caption

Sometimes, the caption isn't necessary until a user interacts with the image. For this option, it's simply a matter of adding the appropriate class: wdn-caption-animate.

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 wdn-caption-animate">
<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.
Contributed By: 
IIM