Harper College

Images

Harper College logo

This is the caption for the image. Replace the default Harper logo image, and be sure to update the alt text.

  • Images should be added to a page using the Image snippet. The image will align to the right by default. The image is 450px wide by default.
  • To replace the placeholder image of the Harper logo, click on the image. Then click on the shaded Insert/Edit Image icon in the toolbar.
  • Navigate to the image you want to appear and insert it to the page.
  • Update the image alt text, providing a short description of the visual content of the image.

Advanced options

To change the width or alignment, click on the Source Code icon in the toolbar, then find the <figure> element. The available styles include:

  • Left aligned image: Within the <figure> element, where it says class="figure-right", change that to class="figure-left"
  • Full-width image: Delete the class="figure-right" entirely.
  • Smaller image: To make the image 250px, change the class to class="figure-right-250" or class="figure-left-250".
  • Adding caption: You can add a caption by adding this element immediately after the <img> element:   <figcaption>Caption text goes here.</figcaption>
    You can also use the Image with Caption component.
Last Updated: 1/22/26