Customise lightgallery options

Omeka S
1

Hi all,

While working on some theme customisations I found that you’re not able to change the default configuration for the Lightgallery block. For instance, I wanted to remove the rotate icons and include the zoom in/zoom out function.

The configuration file for the lightgallery can be found in:
omeka-s/application/asset/js/lg-itemfiles-config.js

The helper that includes this part is located in:
omeka-s/application/src/View/Helper/LightGalleryOutput.php

As this is part of the application, you can’t just include a copy of the file in your own theme. The only way I found to make it work is to prevent the helper from being used and basically copy those resources into the theme, so you make your own.

The part where the code is being included is in this page ( in which we should prevent the lightGalleryOutput function from being called )
omeka-s/application/view/common/resource-page-block-layout/lightbox-gallery-item.phtml

We can make a copy of this into our own theme. To make it work, I’ve changed it to to the following (I’ve removed some stuff related to video since I only use it for images, but you can basically follow the template from the helper file LightGalleryOutput.php and modify though you need to modify some variables.)

<?php

$this->headScript()->prependFile($this->assetUrl('vendor/lightgallery/lightgallery.min.js', 'Omeka'));
$this->headScript()->appendFile($this->assetUrl('vendor/lightgallery/plugins/thumbnail/lg-thumbnail.min.js', 'Omeka'));
$this->headScript()->appendFile($this->assetUrl('vendor/lightgallery/plugins/zoom/lg-zoom.min.js', 'Omeka'));
$this->headScript()->appendFile($this->assetUrl('vendor/lightgallery/plugins/video/lg-video.min.js', 'Omeka'));
$this->headScript()->appendFile($this->assetUrl('vendor/lightgallery/plugins/rotate/lg-rotate.min.js', 'Omeka'));
$this->headScript()->appendFile($this->assetUrl('vendor/lightgallery/plugins/hash/lg-hash.min.js', 'Omeka'));
$this->headScript()->appendFile($this->assetUrl('js/lg-itemfiles-config.js'));
$this->headLink()->prependStylesheet($this->assetUrl('vendor/lightgallery/css/lightgallery-bundle.min.css', 'Omeka'));

$resourceMedia = $resource->media();

$html = '<div id="itemfiles" class="media-list">'; 
 foreach ($resourceMedia as $media): 
      $escape = $this->plugin('escapeHtml');
      $source = ($media->originalUrl()) ? $media->originalUrl() : $media->source();
      $mediaCaptionOptions = [
              'none' => '',
              'title' => 'data-sub-html="' . $media->displayTitle() . '"',
              'description' => 'data-sub-html="' . $media->displayDescription() . '"',
          ];
      $mediaCaptionAttribute = ($mediaCaption) ? $mediaCaptionOptions[$mediaCaption] : '';
      $mediaType = $media->mediatype();
      $html .= '<div data-src="' . $source . '" ' . $mediaCaptionAttribute . 'data-thumb="' . $escape($media->thumbnailUrl('medium')) . '" data-download-url="' . $source . '" class="media resource">';
      $html .= $media->render();
      $html .= '</div>';
endforeach;
$html .= '</div>';
echo $html; 
?>

To change the options, you can find the different settings on Settings - lightGallery

For instance, I’ve added these options to the lg-itemfiles-config.js file:

			actualSize: false,
			showZoomInOutIcons: true,
			zoom: true,
			controls: false,
			counter: false,

Perhaps this helps someone trying to achieve the same. (There might be an easier I don’t know about by overwriting or unsetting stuff somewhere, but JavaScript is not my expertise :sweat_smile: )

Happy holidays and wishing all Omeka users a resourceful 2025!

2

This makes sense with the way we’ve currently got lightgallery setup, and is definitely more cumbersome than it needs to be. We’ll revise the view helper to make it a simpler process.

3 Likes