Adding Image Thumbnails for Compound Objects in CB-GH by editing the Browse html file

[clnugentmclean]

I wasn't sure if others have solved this, but I wanted my compound_objects to have thumbnails that showed one of the images of the item (as opposed to the standard logo of a stack of cards). I have successfully done this for my site https://neu-dsg.github.io/expressivepaper-collections/browse.html I know that this is inherently possible in CB-CSV, but wanted to see if it would be too difficult in CB-GH.

I just wanted to share how I did it, in case others wanted to!

Metadata spreadsheet:

• Add a column titled image_thumb (This column will remain empty for most of your rows, only fill this in for parent images, i.e. any row with the format compound_image and no parentid field)
• Fill in this field with a relative link, or a full URL, to the image you would like to use as the thumbnail
• Relative link path: /objects/NAME-OF-IMAGE.jpg
• Full URL: https://YOUR-SITE-NAME.github.io/objects/NAME-OF-IMAGE.jpg (you can test the link is working by putting it into your browser and confirming it shows the desired image)

That is the only change needed to the metadata spreadsheet. The other file that will need to be updated is the browse-js.html file. This is found in _includes/js/browse-js.html.

There are two places that need to be updated in this file so that the site will only default to the box icon if there is not a relative link (or full URL) present in the image_thumb column of the metadata spreadsheet.

First you need to add the image_thumb as part of the items array line. Look for this string of code (which is one line within a long string of text):

{% if i.youtubeid %} "youtube": {{ i.youtubeid | jsonify }}, {% endif %}

Place your cursor directly before that line, and paste in this string of code. Make sure there is a space between the new line you added and the string of code above (youtubeid)

{% if i.image_thumb %}{% assign t = i.image_thumb %}"img": {% if t contains 'http' %}{ t | jsonify }}{% elsif t contains '/' %}{{ t | relative_url | jsonify }}{% else %}{{ t | prepend: '/objects/' | relative_url | jsonify }}{% endif %},{% endif %}

Next you will need to update the compound branch to change the default behavior. This new code makes the compound branch use obj.img when it exists and falls back to the icon otherwise. To do this, you need to identify the compound branch:

} else if (obj.format.includes("compound")) {
thumbSrc = '{{ "assets/lib/icons/" | relative_url }}{{
icons.icon-compound-object }}.svg';
}

This line needs to be updated to use obj.img when it exists. The new line of code should look like this:

} else if (obj.format.includes("compound")) {
if (obj.img) {
imgSrc = obj.img;
} else {
thumbSrc = '{{ "assets/lib/icons/" | relative_url}}{{
icons.icon-compound-object }}.svg';
}

Once you have made these changes, save and commit. The compound_objects should have thumbnails! I've only tried this with the GH version of CollectionBuilder