Closed funroompc closed 2 years ago
@funroompc yes, 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).
compound
). 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 Thank you for the fantastic instructions. I was able to do it and it was much easier than expected. For anyone else reading it, here is what I did
---
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>
{% 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.
That's great @funroompc ! I pasted this content into our main Discussions area so people can find it there too.
How would I go about adding multiple images to a page?
I read something about adding a “compound” column to the metadata sheet but what next?
thanks