Customize CB-CSV item template for multiple images

[evanwill]

Question from @funroompc : How would I go about adding multiple images to a page? (original issue)

That isn't a feature that is documented or built in right now--so requires some customization. For reference, a CB-SA issue outlines the potential approaches.

For your case, if you already have a "compound" column with the url to the image in your metadata--> next step is to create a new display_template for your item pages (the basics of CB-CSV item pages are doc-ed in the repo).

• The templates are found in "_layouts/item/" folder.
• Create a new file in the folder by copying the existing "image.html" template, for example "compound.html".
• Edit the new template to add the additional images from your "compound" column. The default templates are created mostly from modular components found in "_includes/item/" folder. So in "image.html" you will see the images are added to the item page using the "image-gallery.html" include. You can use that as a base for your new layout (i.e. copy the include content into your "compound.html" template, and edit it to add the new image). Exactly how you set up the page layout is up to you, depending on how you want the content to work. You most likely will have to customize the image-gallery and download-buttons areas to handle the additional images.
• In your metadata, the items that should use this new template should have "display_template" value matching the name of the new template you created (e.g. compound).

[evanwill]

In your new template, you can access the contents of your "compound" column using the Liquid {{ page.compound }}. So if your "compound" column is always just one image url, then your updated image-gallery section might look like:

<div class="spotlight gallery-img" data-download="true" data-src="{{ page.object_location | relative_url }}">
    <img src="{{ page.image_small | relative_url }}" alt="item thumbnail for {{ page.title | escape }}" class="img-fluid">
    <p><small>Click to view full screen</small></p>
</div>
{% if page.compound %}
<div class="spotlight gallery-img" data-download="true" data-src="{{ page.compound | relative_url }}">
    <img src="{{ page.compound | relative_url }}" alt="item thumbnail for {{ page.title | escape }}" class="img-fluid">
</div>
{% endif %}

Also worth mentioning:
There is a branch of CB-CSV "compound-objects" that was working on implementing a different approach to compound objects, where each additional image is set up on a separate line of the metadata spreadsheet. That one uses a "compound-object" template to handle figuring out the additional objects to add to the item page. So you could take a look at that for other ideas.

[evanwill]

From @funroompc:

I was able to do it and it was much easier than expected. For anyone else reading it, here is what I did

1. Add new columns to the metadata csv file, e.g. image1
2. Create new template in "_layouts/item/" e.g. multiimage.html. This is a copy of image.html with a reference to item/image-gallery-compound.html instead. For my case, the content of this file is as follows

 ---
layout: default
item-meta: true
gallery: true
---
<div class="container py-3">

    {% include item/breadcrumbs.html %}

    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4 text-center">

                {% include item/image-gallery-compound.html %}
                
                <div class="my-2">

                    {% include item/download-buttons.html %}

                </div>

            </div>
        </div>

        <div class="col-md-6">

            {% include item/metadata.html %}
            
        </div>
    </div>

    {%- if site.data.theme.browse-buttons == true -%}
        {% include item/browse-buttons.html %}
    {%- endif -%}
</div>

3. Create the file "_includes/item/image-gallery-compound.html". Reference the columns in the csv metadata file that you created in step 1. My file looks like this

{% comment %}

    For image items, a zoomable, full screen gallery view is added using Spotlight gallery.
    Ensure dependencies are added by including `gallery: true` in the layout front matter calling this include.

{%- endcomment -%}

{% if page.object_location %}
<div class="spotlight gallery-img" data-download="true" data-src="{{ page.object_location | relative_url }}">
    <img src="{{ page.image_small | relative_url }}" alt="item thumbnail for {{ page.title | escape }}" class="img-fluid">
    <p><small>Click to view full screen</small></p>
</div>
{% endif %}

{% if page.image1%}
<div class="spotlight gallery-img" data-download="true" data-src="{{ page.image1| relative_url }}">
    <img src="{{ page.image1| relative_url }}" alt="item thumbnail for {{ page.title | escape }}" class="img-fluid">
</div>
{% endif %}

Thats it. You can add more images by adding more columns and more if statements to the image-gallery-compound.html file. I chose to add another column called image_sm that would generate a small image that would then show up in my image-gallery as is done by default.