Here is a more flexible way, in total this now shows how to add a new section containing a jAlbum variable:
Keep the changes to the script.js file
In index.htt replace the block of code from line 216
var item = $jA("<div>", {"class": "item"});
to
dropThumbs.append(item);
with
var item = $jA("<div>", {"class": "item"});
var animateBox = $jA("<div>", {"class": "animate-box bounceIn animated"});
var a = $jA("<a>", {"class": "image-popup fh5co-board-img", "href": slides[i].slide});
var slide = $jA("<img src='" + slides[i].slide + "' alt='" + slides[i].name + "'>");
var desc = $jA("<div>", {"class": "fh5co-desc"});
var text = slides[i].comment == undefined ? "" : slides[i].comment;
var keywordsDiv = $jA("<div>", {"class": "fh5co-keywords"});
var kwds = "";
if(slides[i].keywords != undefined) kwds = " keywords: " + slides[i].keywords;
kwds = kwds.replaceAll(",",", ");
desc.append(document.createTextNode(text));
keywordsDiv.append(document.createTextNode(kwds));
a.append(slide);
animateBox.append(a);
item.append(animateBox);
item.append(desc);
item.append(keywordsDiv);
dropThumbs.append(item);
In the style.css file delete the line with
white-space: pre-line;
and add a new section
#fh5co-board .item .fh5co-keywords {
padding: 20px;
float: left;
line-height: 24px;
}
You can add it anywhere, but just after the line, at 7699,
#fh5co-board .item .fh5co-desc{
...
}
might be best.
If you want the keywords to be in a different colour then, in the skin's 'styles' folder open the style you are using, say 'dark.css' and at the end of the file add a newline and then
#fh5co-board .item .fh5co-keywords {
color: #ff0000;
}
Change the colour attribute to whatever you want. The example shows red text.
If this is too complicated, and if you want to use this method, attach your Hydrogen skin here and I will update it for you.
Edited by: RobM on 24-Feb-2021 22:27