LiveWhale Support

Documentation»Gallery Types

Gallery Types

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)

Advanced: Customizing the Thumbnail Format

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: 

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

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 

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

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

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.

On this page