Table of Contents
Body classes and data
Classes and dataset have been added to the body tag of the gallery HTML.
These classes and data allow specific pages to be selected when customising with CSS and Javascript. It will not appear in themes that have their own header.tpl unless class="{foreach from=$BODY_CLASSES item=class}{$class} {/foreach}" data-infos='{$BODY_DATA}' is added to the body tag.
It should look something like this:
<body id="{$BODY_ID}" class="{foreach from=$BODY_CLASSES item=class}{$class} {/foreach}" data-infos='{$BODY_DATA}'>
The classes are specific to the page displayed and look like this: class="section-categories category-39 image-143 "
The data-infos uses the same information but as JSON with key/value for selecting: data-infos='{"section":"categories","category_id":"39","image_id":"143"}'
Using the plugin statistics here is an example of what can be seleted using javascript:
<script>
window.onload = function(e){
var body = document.getElementsByTagName('Body');
var json = JSON.parse(body[0].dataset.infos);
var section = json.section;
console.log(section);
var category_id = json.category_id;
console.log("category_id = " + category_id);
var image_id= json.image_id;
console.log("image_id = " +image_id);
if(json.section == 'tags'){
var tag_id= json.tag_ids[0];
console.log("tag_id = " + tag_id);
}
}
</script>
SVG support in gallery
As we added SVG support in Piwigo gallery, this change will affect custom themes.
If theme developers also want to support SVG files, they will need to add this condition to their modified picture_content.tpl file.
{if (isset($current.path_ext) and $current.path_ext == 'svg')}src="{$current.path}"
This is necessary if you modified the default picture_content.tpl file for your theme otherwise, if your theme inherits the default theme, you can leave it as it is.
For the previous image you'll need to add the following condition
{if (isset($previous.path_ext) and $previous.path_ext == 'svg')}{$previous.path}{/if}
And add a class to the img using
class="{if (isset($previous.path_ext) and $previous.path_ext == 'svg')}svgImg{/if}"
Same for the next image.
{if (isset($next.path_ext) and $next.path_ext == 'svg')}{$next.path}{/if}
And add a class to the img using
class="{if (isset($next.path_ext) and $next.path_ext == 'svg')}svgImg{/if}"
We implemented the following classes to support SVG but also any other formats : file-ext-{{the file extention}} and path-ext-{{the file's path extention}}. These will be used to custom the gallery if needed.
We also ask our plugin developers to verify their plugins if they add modification to the pictures visualization in the gallery.