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!

Here are some good things to keep in mind when working with images in the LiveWhale CMS:

Always upload a large image, even if you only plan to use a small version on your page!

  • The image manager will easily let you resize and move your images to fit in the various areas of your page. As more computers and devices come standard with high-resolution displays, it’s a good habit to keep those original image sizes large! That also makes it easier for you (or the web team) to reuse your images in a slideshow format later.
  • Aim for at least 2000px on the longest side, if you are able.
  • Images can be made into links by clicking to highlight the image, and then pushing the link button in the toolbar.

Always add a caption to your images, and a credit, when possible!

  • You can choose whether or not to display the caption below your photo, but regardless of what you choose, always enter a caption! This helps our users who may be using screen-readers or other assistive devices, or who are accessing the site from low-bandwidth locations.
  • The best captions are usually one or maybe two short sentences - be descriptive, but succinct!

Try to use the built-in buttons in the image manager for “half-column and full-column”, instead of specifying an exact size.

  • As more and more people view the site on a multitude of devices, we can more easily control their experience by using these handy guides. Plus you’ll always be certain that your images aren’t stretched or distorted!

Sort your images into collections and galleries for easy organization and maximum impact.

  • An image collection is a tool that you manage within LiveWhale - they aren’t visible to your users. A good example of an image collection might be “New Staff Headshots, September 2017” - and each staff member has three or four headshots in that collection.
  • Image Galleries are a set of more curated images, with captions, that are displayed to your users. So your image gallery might be called “Meet Our Staff!” - and it would only use one image of each staff member, complete with a caption. 

Know the origins of your photos, and support photographers whenever possible!

  • If you must start from scratch, and search the web for imagery: start with places like Flickr, which will allow you to search for images that are licensed for reuse by Creative Commons.

Remove the image border or draw attention to your image with a yellow box.

In certain circumstances, it might be appropriate to remove the border from your image. For example, if you’re adding a logo and you want it to blend in seamlessly with the white background. You could alternative add a yellow box around the image, if it deserves extra attention. Either of these styles can be applied by clicking on the image, then going to the Formats menu in the toolbar and selecting the right style.

Changing the image style