Hi Matt,
thanks for the information.
I am very curious about the innovations 
At the moment I am looking for a solution to make my tabs linkable. I mean that each tab can be reached under an url. For example: for tab1 “www.mysite.com/test#tab1” etc.
This works with some templates from Codepen but I can’t add albums to individual tabs, at least not with:
<ul class="tabs">
<li data-album="588036">Sample Images</li>
</ul>
and the previous phplugins entry:
// Use the JavaScript JSON API to get album data;
// logs the response to the browser's debug console.
function scripts() {
$siteURL = siteURL();
$apiPath = "{$siteURL}backlight/" . (URLHelper::rewriteEnabled() ? "api" : "?m=publisher&c=jsonApi");
$apiToken = AuthHelper::getJSONAPIToken();
echo <<<HTML
<script src="{$siteURL}backlight/modules/module-publisher/lib/js/api.js"></script>
<script>
// instantiate the api.
const backlight = new Backlight("{$apiPath}");
// create a placeholder for our images.
const albums = {};
// create an HTML template to be used for individual photos
const renderTemplate = photo => (`
<figure itemscope itemtype="http://schema.org/ImageObject">
<div>
<a
data-caption="\${photo.title}"
data-download-src="\${photo.path}photos2x/\${photo.filename}"
data-fancybox="album-\${photo.album_id}"
data-src="\${photo.path}photos/\${photo.filename}"
data-srcset="\${photo.path}photos/\${photo.filename} 1x, \${photo.path}photos2x/\${photo.filename} 2x"
data-thumb="\${photo.path}thumbnails/\${photo.filename}"
data-width="\${photo.renditions.photos.width}"
href="\${photo.url}"
>
<img
alt="\${photo.filename}"
class="lazyload"
src="\${photo.path}thumbnails/\${photo.filename}"
srcset="\${photo.path}thumbnails/\${photo.filename} 1x, \${photo.path}thumbnails2x/\${photo.filename} 2x"
height="\${photo.renditions.thumbnails.height}"
title="\${photo.filename}"
width="\${photo.renditions.thumbnails.width}"
>
</a>
<figcaption>
<div class="photo-caption">
<p>\${photo.title}</p>
<p></p>
</div>
</figcaption>
</div>
</figure>
`);
// create a function to update the view.
// * pumps photos into the template, above;
// * appends the images to the page.
const updateAlbumView = (listEl, albumId) => {
listEl.nextSibling.remove();
const view = document.createElement("div");
view.dataset.columns = "4";
view.dataset.presentation = "grid";
let output = "";
Object.values(albums[albumId]).forEach(photo => {
output += renderTemplate(photo);
})
view.innerHTML = output;
listEl.insertAdjacentElement("afterend", view);
}
// create a `get` function to fetch album data by albumId.
const getAlbum = (listEl, albumId) => {
if (albums[albumId]) {
updateAlbumView(listEl, albumId);
} else {
backlight.getAlbum(albumId, {
apiToken: "{$apiToken}",
done: data => {
const { id, photos } = data.album;
albums[id] = {};
photos.forEach(photo => {
albums[id][photo.id] = photo;
});
updateAlbumView(listEl, id);
},
});
}
}
// keeps the tab list up-to-date
const setSelectedIdOnList = (listEl, albumId) => {
listEl.dataset.selected = albumId;
return albumId;
}
// on page load, get and set first album
const listElements = document.querySelectorAll(".tabs");
for (const listEl of listElements) {
const firstAlbumId = listEl.querySelector("[data-album]").dataset.album;
setSelectedIdOnList(listEl, firstAlbumId);
getAlbum(listEl, firstAlbumId);
}
// listen for clicks;
// if click event occurs within `tabs` and yields an album ID, fetch album data.
document.addEventListener("click", (event) => {
const listEl = event.target.closest("ul.tabs");
if (!listEl) return; // not clicking a tab; eject!
const selectedId = setSelectedIdOnList(
listEl,
event.target.dataset.album,
);
for (const tab of listEl.children) {
if (tab.dataset.album === selectedId) {
tab.classList.add("selected");
} else {
tab.classList.remove("selected");
}
}
getAlbum(listEl, selectedId);
});
</script>
HTML; // do not indent this line
return false;
} // END /**/
But should not be your problem 
