Images, Galleries, and Collections

Galleries and collections are a few ways of organizing images in LiveWhale.

Adding / editing an image

  1. From the LiveWhale interface, click the “Images” link.
  2. Click “Add a new Image” to add a new image or locate and click the image title to edit.
  3. Fill out the image form with the relevant information (see configurable options below)
  4. When done, click the “Save this image” button.

Supported image formats: LiveWhale accepts image uploads in the JPG, GIF, or PNG formats. We don’t currently support WEBP uploads, but, LiveWhale 1.7.1 and later will take your JPG uploads (and PNG, if they don’t use transparency or animation) and convert those to WEBP versions, serving them up as low-bandwidth alternatives using this formatting.

Form Options

  • Enter a name for this image (Required)
  • Caption: Choose a default caption for your image
  • Description (ALT text): In LiveWhale 2.7.0+ you can set an ALT text for screen-readers that is distinct from your caption. In prior versions, caption was used as ALT text.
  • Credit: Enter a photo credit, if applicable.
  • Plot this image on a map?: If your image has a location, you may plot it on a map. If your LiveWhale installation already has preset locations, you may begin typing into the space provided and locations will be suggested to you. If you cannot find an appropriate location, you may click “add a new Place”. When adding a new place, you must provide a title and address.
  • Tags: Tag the image with any relevant tags. Tags help sort and classify images so that they can be directed to the proper location on your web site. You can click in the field labeled “Tags” and type a keyword; tags will be suggested to you. If you are unsure what tags are available in your group, click “Show all tags” to display them all and select the relevant ones.
  • Keywords: Choose any relevant keywords for this image, so that it can be found in searches. Keywords should be separated by either commas or spaces.
  • Date: Enter a date for the image. If you enter a date in the future, the image will not appear on the public web site until the date is reached.
  • Upload a new image: If adding a new image, under the section labeled “Upload a new image”, choose a file to upload. If you are editing an existing download, this section is labeled “Replace with file”, and choosing a file here can be used to replace the existing image with a new version.
  • If you are editing an existing image, you will also see a “View full image” link allowing you to preview the full-sized image.

Note: If an image is uploaded without a title, caption, or credit and any of that information is found encoded within the image’s IPTC metadata, the metadata field values will be used automatically.

Also, if an image contains EXIF orientation metadata (such as an image taken in portrait mode), LiveWhale will automatically rotate the image to the correct orientation upon upload.

Cropping an image

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 (in LiveWhale 1.7.1+) 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.

Thumbnail crop tool

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.”

Thumbnail crop tool

Permanently cropping an image

In LiveWhale 1.7.1+, 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.

Cropping a saved image

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.

Custom aspect ratios

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

Image collections

Images can be grouped together into collections for easier organization and retrieval.

  • Login to the LiveWhale interface
  • Select the Group from the drop-down menu to add image collections
  • Access your Images Library
  • Select the Collections sub-tab
  • Click Add a new image collection
  • Enter a name of the collection and press the Save collection button
  • The Image Collections manager also contains the following features using the drop-down menu, just check the box(s) and make a selection
    • Remove collection (but keep images)
    • Delete collection and all images in collection
    • Apply tag to all images in collection
  • Clicking the collection title will display the images in the collection through the image library
  • Image collections can also be added to galleries under Choose images from your library by selecting the collection from the drop-down menu

Image galleries

Galleries (sometimes called slideshows or albums) are a way of organizing images to display in the LiveWhale front-end.

  1. From the LiveWhale interface, click the Galleries tab
  2. If you are adding a gallery, click Add a New Gallery or locate and click the existing gallery to edit.
  3. Fill out the gallery form options (see options below)
  4. When done, click the Save this gallery button.
  • Enter a title for the gallery (required)
  • Star Content: Click the star in the section labeled “Star content” to set as important.
  • Share Content: By default this content will be shareable. To make non-shareable, click the globe labeled “Share content” to un-highlight it.
  • Description: Enter a description of the gallery. This will also appear in the meta description tag when viewing a gallery’s details.
  • Edit Images: If you are editing a gallery, any existing images will be listed. Here you can change image captions, remove images, or reorder them by dragging an image by the crosshairs icon. Additionally, links are provided to set a custom thumbnail crop for each image, as well as to make a custom thumbnail for the entire gallery from one of the attached images.
  • Plot this image on a map?: If your image has a location, you may plot it on a map. If your LiveWhale installation already has preset locations, you may begin typing into the space provided and locations will be suggested to you. If you cannot find an appropriate location, you may click “add a new Place”. When adding a new place, you must provide a title and address.
  • Suggest this item to the following groups: Suggest this gallery to other groups by selecting thse groups under this section
  • Post gallery as: Choose the status for this gallery. “Live” will publish the gallery immediately. “Hidden” will hide it from the web site until you are ready to publish it.
  • Delete: If you are editing an existing gallery, you will also see a “Delete” link next to the status, allowing you to delete this gallery.
  • Tags: Tag the gallery with any relevant tags. Tags help sort and classify galleries so that they can be directed to the proper location on your web site. You can click in the field labeled “Tags” and type a keyword; tags will be suggested to you. If you are unsure what tags are available in your group, click “Show all tags” to display them all and select the relevant ones.
  • Choose images from your library: You may attach images to this gallery. Images are taken from your group’s image library. To choose an existing image from your image library, click on each of the images you wish to add.
  • Add new images from your computer: If you want to upload a new image to attach to this gallery, click “Add images from your computer”. Newly uploaded images will be added to the image library and attached to this gallery.
  • Related content: Add a link to a web address, news story, event, gallery, file , or LiveWhale page to this gallery

Replacing an existing image

When you need to update an image, you can replace it without having to update any links. Find the image in the manager and click it to enter the “Edit an Image” screen. Now, click “Replace this with a new file from your computer” (and make sure to save your changes). Now the image will be replaced anywhere you’ve been using it, no need to update any links.

Deleting an image

  1. From the LiveWhale interface, click the “Images” link from the toolbox.
  2. Select the image(s) to delete in the list by checking the box(s).
  3. Choose “Delete” from the drop-down menu, and click “Go”.

You may also delete the item from the image edit screen:

  1. From the images manager, click the image to delete.
  2. Click the “Delete” link on the right side of the screen.
  3. You will be prompted to confirm this action.

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

  1. From the LiveWhale interface, click the “Galleries” tab.
  2. Locate the gallery(s) to delete in the list and check the box next to it.
  3. Choose “Delete” from the drop-down menu, and click “Go”.

You may also delete the item from the gallery edit screen:

  1. From the galleries manager, locate and click the gallery to delete.
  2. Click the “Delete” link on the side of the screen.
  3. You will be prompted to confirm this action.

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

The galleries widget displays a list of galleries with links to view a slideshow of their images. It is sometimes desirable to embed a gallery slideshow directly in your web page using an inline gallery widget.

Note: If you want to show all images from a gallery (fixed set of preselected images) you would use the inline gallery widget. If you want to show all images by tag, group, etc. then you use the images widget.

Simple implementation: If you want to embed a specific inline gallery directly into a Web page, the Get Code link will provide a bit of XML code that can be pasted into the HTML source of a content area.

Custom implementation: Or, create a custom inline gallery widget using the steps below.

  1. Open the Widget Editor
  2. Click the “Add a new widget” button
  3. Select the widget type, “Inline Gallery”, from the drop-down menu
  4. You can specify the gallery to use by indicating the gallery id. You can obtain the gallery id through the Gallery Manager. Or, select a tag(s), group(s), or use the filtering option to target a gallery
  5. Use the widget configuration options to adjust the width, height, etc...
  6. By default, the “mini” template is used for formatting. Additional gallery type options may be available based on customizations. You may also create a custom gallery type (below).
  7. When you are finished, click “Save this widget”
  8. From your webpage, Click “Edit Page” and click on the gear icon to select your newly created inline gallery widget.

Some content types (events, news, profiles) allow you to attach a gallery instead of a single key image. In your details templates for those content types, <xphp var="details_image"/> will be replaced with the gallery where one has been selected.

In LiveWhale 1.7+, you can also pull that gallery into a widget, by referencing the gallery ID in the news/event widget format ({gallery_id}). For example, your news widget format might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
<arg id="format">
<h4 class="story-title">{headline_clean}</h4>
{<div class="story-text">|summary|</div>}
<field content="true">
<if var="gallery_id"/>
<content>
<widget type="galleries_inline">
<arg id="id">{gallery_id}</arg>
<arg id="type">fullscreen</arg>
</widget>
</content>
</field>
</arg>

LiveWhale comes with a few types of inline gallery styles, but you can create your own to allow your editors to insert slideshows, flipbooks, sliders, or any other type of gallery display you might want.

A custom gallery type requires three files (HTML, JS, and CSS) in order to be activated. You can use the “mini” or “sample” templates from /livewhale/theme/core/galleries as a starting place to design your own.

  1. Copy or create the following files, substituting the name of your new gallery style for “mygallery”
    1. Template: /_ingredients/themes/global/galleries/mygallery/mygallery.html
    2. Script: /_ingredients/themes/global/galleries/mygallery/mygallery.js
    3. Style: /_ingredients/themes/global/galleries/mygallery/mygallery.css (or .less)
      Note: Before LiveWhale 1.6, custom galleries were storied in /livewhale/client/modules/galleries.
  2. Then, modify the HTML, JS, and CSS for your new inline gallery style. Change the .lw_gallery_mini class in all 3 to a class containing your new gallery style’s name. All 3 files are required for new styles.​
  3. If you are currently logged into LiveWhale, log out and in again to ensure that the new style is discovered and becomes available for new widgets.
  4. In your inline gallery widget, use the “type” argument to tell LiveWhale to use the new custom template: <arg id="type">mygallery</arg>. Or select it from the dropdown when adding via the “+” interface.
  5. If you\’d like to make this the new default gallery type, you can edit /livewhale/client/private.config.php to add $_LW->REGISTERED_MODULES['galleries']['custom']['default_type']='mygallery'; // default gallery type for "Get Code" links (default: mini)

In LiveWhale 2.14.0 and later, you can use {header} format variable in your widget_format styling to optionally show a widget header in the gallery output.

Advanced: Customizing the Thumbnail Format

Since LiveWhale 1.6.1, you can globally edit the format of inline gallery thumbnails by creating the file /_ingredients/themes/global/widgets/galleries_inline.format.html and modeling it after /livewhale/theme/core/widgets/galleries_inline.format.html.

For instance, you might use the following in that file:

1
2
3
4
5
6
<li>
  <figure>
    <img src="{url}" alt="{description}" class="{class}"/>
    {<div class="figcaption"><p class="caption">|caption|</p></div>}
  </figure>
</li>

Then, your html template for the gallery could use <ul>{thumbnails}</ul>. Keep in mind, formats set in /theme/global/widgets/[widget type].format.html are global, so only edit that file if you are prepared to change it for all galleries.

Since LiveWhale 1.7, you can set a default inline gallery widget template for your custom gallery type, placing it in the same folder as your other gallery files and calling it [name of gallery].xml.

For instance, for a custom gallery type called “fullscreen,” you might add the following file:

/_ingredients/themes/global/galleries/fullscreen/fullscreen.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<widget type="template">
<title>Fullscreen</title>
<args>
<arg id="type">fullscreen</arg>
<arg id="format">
<div class="fullscreen-gallery-image">
<img src="{thumbnail}" alt="{caption_clean}"/>
<div class="caption">{caption}</div>
</div>
</arg>
<arg id="thumb_width">900</arg>
<arg id="thumb_height">600</arg>
</args>
</widget>

In some cases, you might have gallery types used by your theme (or core types like “mini” or “simple”) that you don’t want editors selecting from the Insert > Slideshow menu.

1
$_LW->CONFIG['HIDE_GALLERY_TYPES']=['mini','home-page']; // hide gallery types from WYSIWYG selector

In LiveWhale 1.7.1+, you can add the above to /livewhale/client/global.config.php to hide those gallery types from the WYSIWYG selector. Note, these types will still be supported when hard-coded into pages/templates, or when users create/edit an Inline Gallery Widget. This configuration is intended simply to hide them from day-to-day editors using Insert > Slideshow.