Image

The Image Building Block adds visual information and context to the content on your page. Images should help tell a story, complement your content, help your students understand a concept, or provide purposeful visual queues about course information.

Considerations

  • Do: Name images with a meaningful and descriptive file name (e.g. use butterflies.jpg instead of image1.jpg.
  • Do: Write an alt tag or a caption for each image.
  • Do: Use images that are licensed for free use or that fall under Fair Use laws.
  • Do: Keep image files under 350 KB to make it easier to load on the page.
  • Don't: Overlay text on an image.
  • Don't: Include text within an image that is not written in caption or alt tag.
  • Don't: Use image files that are over 500 KB.
  • Dont': Use copyrighted or watermarked images.

Centered

The Centered Image style sets the image to be 70% of the width of its containing pane, minus any padding that the pane may have built into it.

Explore

Preview

Image centered includes a caption

Code

<div class="uacm-image centered uacm-width-70">
                <figure>
                    #ToDo: Change image placeholder. Start by placing cursor
                    after this arrow &rarr;

                    <img alt="placeholder"
                        src="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Images/Placeholders/Placeholder_03.jpg" />
                    <figcaption>
                        #ToDo: Figure 1: Edit this caption and/or add photo
                        credit/source.
                    </figcaption>
                </figure>
            </div>

Full-Width

The Full-Width Image style sets the image to be 100% of the entire width of its containing pane, minus any padding that the pane may have built into it. 

It is best used with horizontal/landscape-oriented images.
 

Explore

Preview

Image full width includes a caption

Code

<div class="uacm-image full-width">
                <figure>
                    #ToDo: Add an image by clicking
                    <em>outside</em> the left edge of the image until you see
                    the blinking cursor. Remove placeholder image and todo note.

                    <img alt="placeholder"
                        src="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Images/Placeholders/Placeholder_03.jpg" />
                    <figcaption>
                        #ToDo: Figure 1: Edit this caption and/or add photo
                        credit/source.
                    </figcaption>
                </figure>
            </div>