Images & Collections

LiveWhale provides a built-in image library for uploading, organizing, and reusing images across your content. Images can be attached to events (and, in LiveWhale CMS, other content like news stories and profiles), and organized into collections for easier retrieval. In LiveWhale 3.0+, collections can also be marked as Shared, making them available to editors across your entire LiveWhale installation.

Uploading and Editing Images

To add or edit an image directly in the Images manager:

  1. From the LiveWhale back-end, click Images > All Images.
  2. Click Add a new image, or click an existing image title to edit it.
  3. Fill out the image form (see fields below) and click Save this image.

Image Fields

  • Name (required) – this will not be shown on the front-end, but is useful for searching your image library later
  • Caption: A default caption for the image.
  • ALT text: Text for screen readers, distinct from the caption. In LiveWhale 3.0, ALT text can also be customized per usage when attaching an image to an event—so you can set a general default here and refine it in context. You can mark an image as Decorative from this page as well.
  • Credit: A photo credit, if applicable.
  • Tags and Keywords: Help with sorting and search.
  • Location: Optionally plot the image on a map (LiveWhale CMS).

Supported Formats

LiveWhale accepts image uploads in JPG, GIF, and PNG formats. LiveWhale does not currently support WEBP uploads, but will automatically generate WEBP versions of your JPG uploads (and non-transparent PNGs), serving them as low-bandwidth alternatives. See image markup for details.

If an image is uploaded without a title, caption, or credit, LiveWhale will automatically use any of that information found in the image’s IPTC metadata. Images with EXIF orientation metadata (such as portrait-mode phone photos) will be automatically rotated on upload.

The Image Library Modal

When adding an image to an event or other content, clicking Add/change images (or using the WYSIWYG Insert Image tool) opens the Image Library modal. This is where you can upload new images or choose from existing ones.

UI of the 3.0 add/change images modal

A dropdown at the top of the modal lets you filter which images are shown:

  • Current group: Images belonging to the group you’re currently working in.
  • Shared from other groups: All images in Shared Collections from other groups across your LiveWhale installation.
  • All content in your groups: All images across every group you belong to.
  • Individual Shared Collections: Each shared collection from other groups appears as its own option.
  • Individual collections in your current group: Each of your own collections in the current group appears as its own option.

Per-Usage ALT Text (3.0+)

In LiveWhale 3.0, when you attach an image to an event via the Image Library modal, you can customize the ALT text for that specific use without changing the image’s default ALT text. The default set on the image will be pre-filled as a starting point. This makes it easier to write ALT text that’s relevant to the context of each event, rather than relying on a one-size-fits-all description.

Cropping Images

When you add an image to a piece of content (an event, a news story, a profile), LiveWhale always shows the full image on the details page, and a thumbnail in list views and widgets. You have several options for cropping the portion of the image that gets shown, or cropping the underlying image.

Cropping a thumbnail preview

You can select your preferred thumbnail crop from the editor by clicking “Add/change images,” then clicking the crop icon and dragging to select the square thumbnail you’d like.

UI of the thumbnail crop

Cropping an image on a page

When you insert an image into a page in LiveWhale CMS, you can choose a specific crop to use. This will not crop the underlying saved image. Double-click the image after you’ve added it, and click “Crop image.”

UI of the pages crop image

Permanently cropping an image

You can permanently crop an image if you only ever want to use a certain portion of it. You can either do this when you first upload the image, or by clicking “Crop” on the Edit an image page.

UI image of the permanent crop

Note: Be very careful when cropping existing images! If you crop an existing image in LiveWhale, it may adversely affect any content that image is attached to, or pages it’s been used on. We recommend cropping an image only when you first upload it to LiveWhale.

UI of the image crop aspect ratios

You can also lock your crop to a particular aspect ratio. The options for aspect ratios can be customized.

Replacing and Deleting Images

Replacing an image

To swap out an image without breaking any existing links or attachments, find it in the Images manager, click it to open the edit screen, and use Replace this with a new file from your computer. The new file will appear everywhere the original was used.

Deleting an image

Select the image(s) in the Images manager and choose Delete from the dropdown, or open the image and click the Delete link. Deleted images go to the trash and can be restored for up to one year (depending on your configuration). In LiveWhale 3.0+, if your image has been used anywhere you will see a warning before deleting it, and have the option to cancel out or go ahead and delete it anyways.

Note: Deleted images will remain in the trash where they can be easily restored (up to one year, depending on your configuration).

Collections

Collections are a way of organizing images within a group for easier browsing and retrieval. Any editor can create collections in their group.

To create a collection:

  1. Go to Images and select the Collections sub-tab.
  2. Click Add a new image collection, enter a name, and click Save collection.

From the Collections manager you can also remove a collection while keeping its images, delete a collection and all its images, or apply a tag to all images in a collection. Clicking a collection title filters the image library to show only images in that collection.

Shared Collections (3.0+)

In LiveWhale 3.0+, collections can be marked as Shared, making them visible to all editors across your LiveWhale installation when they’re browsing the Image Library modal. This is designed for things like approved campus photography, logos, or headshots that calendar managers want editors to reuse across groups—without having to re-upload or hunt for the right image.

Checkbox for marking a collection as shared

Shared Collections are managed by users with the permission “Manage event types, global tags, global locations, and shared image collections.” Only users with this permission can mark a collection as Shared and add or remove images from it. Any editor can browse and use images from a Shared Collection when adding images to their content.

Removing an image from a Shared Collection does not delete the image, and does not detach it from any content it’s already attached to, it simply removes it from the collection. To permanently remove an image from LiveWhale, it must be deleted from the Images manager.

Shared Collections from other groups appear in the Image Library modal dropdown both as a combined Shared from other groups option and as individual collection entries, so editors can browse a specific shared collection directly.

Galleries (LiveWhale CMS)

LiveWhale CMS includes a separate Galleries content type for displaying curated groups of images as slideshows or albums on the front-end of your site. Galleries are a CMS-only feature and are not part of LiveWhale Calendar, though if you attach multiple images to a single event in LiveWhale Calendar, it will be displayed as a full-screen gallery by default. For more CMS options, see Galleries documentation.

On this page