Default image styling is built into the UNL templates for you to use. The styling is a simple rounded frame with some padding. 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 images to work in the responsive design template (v3.1), a few guidelines should be followed:

  • Do not use the width and height attributes in your img tag.
  • The padding around images for the frame can vary, so it is recommended to make images the same width as your intended grid at full-size. Refer to the Column Widths for exact pixel sizes. The template will take care of presentational sizes.

Column Widths

.grid1
58px
.grid2
140px
.grid3
222px
.grid4
304px
.grid5
386px
.grid6
468px
.grid7
550px
.grid8
632px
.grid9
714px
.grid10
796px
.grid11
878px

Example

The templates handle images well.

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

Adding a caption

Provide context for an image couldn't be any easier!

Photo of the UNL Campus
The Union Plaza and greenspace at the University of Nebraska–Lincoln are beautiful in the spring.
    
<figure class="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>