Adding Images

Using imagery or photography on your webpages can help guide users through your content - and show off our students, faculty, and their work!

General Tips and Best Practices

Inline Images

This image is added to the editable page region. Use the image button in the toolbar to add an image, then select the image and choose half column or full column. Add a short, descriptive caption to the image, and choose whether to display the caption below the image. 

This is the photo caption with the following link: this is a link and this text is part of the ca...This is the photo caption with the following link: this is a link and this text is part of the caption.

Large Image Call to Action Option

The 2019 Large image CTA widget works in both a full width page such as a Specialized landing page, Core Site Landing Page or the Homepage OR it works just as nicely in a full-column width content area on inner pages.

How to do it:

Upload an image to the images manager, in the LiveWhale dashboard. Tag the image with “CTA” and any other tags to identify this particular image. The image title and caption will appear over the image.

To add a red button over the image, include a link on the last line of the caption, then make it bold.

Next, go to the page where you’d like to include this image. Go to the “Insert” option in the toolbar and add a widget to the page. Then choose the 2019 Large Image CTA widget from the list of global widgets. It will show a random image from this group tagged with CTA. You can add a widget tag to filter a particular image.

  • <section class="large-cta" style="background-image: url('/live/image/gid/6/width/1440/height/730/30821_cta.rev.1570815902.jpg')"><div class="large-cta__overlay"><h3 class="large-cta__headline">Large Image CTA Title</h3><div class="large-cta__caption">This is the caption. Eget nullam dictum vel dolor consectetuer. Faucibus tristique vitae. Blandit varius elit ultrices nullam wisi. Libero scelerisque vel ut lobortis faucibus purus per tempor. Fringilla ut praesent.<br/><br/><strong><a href="#0" target="_blank" rel="noopener">Take action now</a></strong></div></div></section>