Welcome, Guest Login

Support Center

Our documentation is moving:

Please check for the most up-to-date LiveWhale CMS and LiveWhale Calendar documentation. The below legacy documentation will remain available as a reference until the documentation migration is complete.

Custom Gallery Type

Last Updated: Jan 03, 2018 08:38AM PST
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.

Installing a Custom Gallery Type

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)

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:
    <img src="{url}" alt="{description}" class="{class}"/>
    {<div class="figcaption"><p class="caption">|caption|</p></div>}

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.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found