Ways to view multipage documents

[fullerpault]

Hi all. I've been loving CollectionBuilder and have utilized it for a faculty member's exhibit. He's been so pleased with it that I'm going to migrate some previous exhibits of his to CB, too. Here's my current project - We Exist series 5

Some of the items that we have included in the exhibit are multipage documents - letters, pamphlets, and things like that - here's a specific example. I'm wondering if there is a way to view those types documents on the item page without having to download a PDF, either through an embedded PDF viewer or some other method. I've seen the Mancini Letters exhibit, and that looks like a potential solution. Could this also be a potential use case for a compound object?

I suppose I'm also asking if the best approach is to keep these objects as PDFs (which allows for OCR) or to use individual image files for each page. I'm open to whatever would be most efficient/best for the user, though I suppose that's also pretty subjective. Any insight you can offer would be greatly appreciated!

[evanwill]

@fullerpault there is a couple different ways to display the PDF directly that you could add by modifying the "pdf" object_template (i.e. "_layouts/item/pdf.html").

The easiest is to follow the same method as CB-GH does, for example this demo pdf item. We didn't do that method by default in CB-CSV because often the PDF files are really huge filesize, so we wanted the user to click to actually download them. If your collection PDFs are a good size (or you assume your users want to view them right away!), that modification is pretty basic to add it--I can open a PR if you want to see what it would look like.

What you see in Mancini is more complex--that is an IIIF viewer using processed images. It is possible to do manually like Mancini but a lot more involved. However, if you already have the items somewhere else in a repository with IIIF support, adding a viewer is actually simple.

So depends on a bit more on your situation. Let me know a bit more for your case!

[evanwill]

@fullerpault that is a good idea!
You can actually just put the item-thumb include into the <object> element fall back and it should work fine.
e.g. in the file "_includes/item/pdf-embed.html" add in the item/item-thumb.html include inside the object element instead of the <p> element:

<div class="ratio" style="--bs-aspect-ratio: 115%;">
    <object title="PDF file of {{ page.title }}" data="{{ page.object_location | relative_url }}" type="application/pdf" width="100%" >
        {% include item/item-thumb.html %}
    </object>
</div>

[evanwill]

what ever is inside the <object> will be displayed as a fall back if the pdf does not display.

[fullerpault]

Adding that was my first instinct (and I'm unreasonably happy that it seems like the correct approach!). However, when testing it locally and toggling to a mobile view on Chrome, the image appears in front of the download buttons. Here's a screenshot:

I'll keep playing around with it, though. Thanks again for all of your help!

[evanwill]

Huh... oddly enough I am not getting that overflow issue testing on Chrome or Firefox!

Usually default style in the browser applies:

object {
    overflow-clip-margin: content-box !important;
    overflow: clip !important;
}

which is what my version seems to show--but your screen shot that isn't happening for some reason?
I guess you could just add something like that default to _custom.scss

[historianem]

Hello! I would like to use this feature on a collection I'm currently building (https://github.com/historianem/us-womenshistory-1865). I've added the metadata.html and pdf-embed.html files to my _includes folder and an pdf.html to my _layout folder, but neither seem to work on the site. Is there another file I should add somewhere or change the code in another item?

Admittedly, 3-4 of my documents are far too large for this, but most of my other pdfs are small enough (well under 1mb) where this layout would work well. I'm planning on editing down the pdfs that are currently too large.

[evanwill]

@historianem the pdf-embed.html include and layout are part of the CollectionBuilder-CSV template--your project is based on CollectionBuilder-GH, which is almost the same except for the item layouts, so adding those components won't work out. That said, the default PDF item layout in CB-GH is actually the pdf embed style that @fullerpault was porting into CB-CSV in this discussion.
As @dcnb said below, I think the issue is just lack of ".pdf" extension on your filenames--then your site should work as you intended without any modification necessary!

[historianem]

@dcnb and @evanwill ah! I just added the extensions, and it looks like everything is working perfectly now. Thanks so much!

[dcnb]

Hi @historianem -- I just did a quick look. I don't think anything is wrong with the documents themselves, nor should they be too big. It seems you've left the filename extension off in your metadata csv however, which is what's keeping the PDFs from appearing.

If you add ".pdf" to each of your filename entries, I think the site should work. So for your first item, "1724_thefemalephysician_johnmaubray" becomes "1724_thefemalephysician_johnmaubray.pdf"

Hope that helps!
Devin