What’s the best method to add a 36-page PDF to the Source theme?
I’m also looking for speed to load.
Before I broke it up, added as individual JPEGs, but this time aiming for WEBPs, and will, of course, correct past issues.
Aiming for speed to load.
Thanks.
I would not convert it to an image if possible. (By doing so, you prevent the text in it from possibly being machine-readable and copy-paste-able, and you’ll be converting from vector to pixels – which means it won’t zoom as well.)
Here are some embedding options, done with a big file!:
Hi Cathy.
I really need to show the whole pdf, which is a magazine. Didn’t realise the error of my ways. Hmm.
The file option is not an option. I don’t want them to download or open it like that. Looks awful.
I need the full PDF to be viewable and readable on scroll, hence why I broke up to individual images.
Re the embed, where do the files get stored? Your example shows as below but how do I store my PDF and where?
The other thing is that folks are subscribed, and so the new issues will get emailed to subscribers.
My experiences on Ghost of late are not fun.
You can definitely do an embed that shows the full length and can be scrolled through. Here’s an example:
I actually store the files in Ghost - I just upload them into a file card and then note on preview what their URL is.
Email is tough. I think a link to click (to see on web or download) is probably the way to go. While you /could/ email 36 images, my email client doesn’t zoom images very nicely, and Ghost restricts the width of images in email, so I think you’d be hard pressed to make it work well.
Thank you so much, Cathy. OK, I need what Tiny News have. That’s exactly it.
But that’s not the same embed as your example. I tried your code, file on a preview page and got this, but I don’t want to see a black background and a sidebar. I need it like Tiny News has, just the full view magazine. How did they achieve that then?
Just found the Adobe code … my bad. Will see what i can do as that looks like how Tiny News have done it.
Keep you posted.
Thanks. ;)
I have the api set up and set the client website URL but when I load the PDF using your code it shows for a second then disappears with a display that then it says File preview not available
This application domain (Clients Domain Here) is not authorised to use the provided PDF Embed API Client ID.
But I set it. Or is the domain the url and need to include the page/post name too.
I’m on a deadline and really need this to work.
Where am I going wrong?
EDIT: Fixed (Sort-of). I’d kept the < & > in before and after the API.
Hmm, however, it scrolls sideways. It does not view like or scroll up and down like Tiny.
It also has a light grey border which clashes with the website background
How do I change that?
Stressed. ;(
I tried this demo script, but adding my api key, file link and name, etc, it doesn’t work.
<div id="adobe-dc-view"></div>
<script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{promise: "<FILE_BLOB_PROMISE>"},
metaData:{fileName: "<FILE_NAME>"}
}, {defaultViewMode: "FIT_WIDTH", showAnnotationTools: false, showPrintPDF: false});
});
</script>
Is anyone else able to help? Otherwise, I’m just going to have to default to breaking up the PDF as I did before … for now.
I just checked Cathy’s example. It’s something like below:
<div id="adobe-dc-view"></div>
<script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "...", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://www.tinynewsco.org/content/files/2025/10/strategic_plan_25_27_rev.pdf"}},
metaData:{fileName: "Tiny News Collective Strategic Plan"}
}, {"showAnnotationTools": false, embedMode: "IN_LINE"});
});
</script>
<style>#adobe-dc-view {height: 100vh}</style>
Instead of content: { promise: "..." } this uses content: { location: {url: "full pdf url"} }
Maybe you can take Cathy’s example as the base and change clientId, fileName and file url with yours.
I’ve tried all that. Thankfully, however, after a LOT of back and forth with chat GPT I have it working. Thank the Lord.
I’ve now also got 16 back issues that were added when the site went live earlier this year to update.
Thank you so much to Cathy for helping me achieve something like this!
PS @Cathy_Sarisky I’m a bit strapped for cash right now, however I have book-marked your Github page and will be supporting you when I have some spare cash. Money’s too tight to mention right now, however I promise to do so! You have my word. This has been a huge issue for me since I built their site. Magazines are issued 3 times a year, so glad I got this in the bag. 
If you are able to share the URL, I would like to take a look at what is the final output. If not, could you share some image/video?
Hi,
I used the PDF.js approach as mentioned here:
and it used to work but now it doesn’t anymore:
I tried with Chrome and Safari and the pages no longer load.
I have zero knowledge of tech, I simply used the script provided:
Any suggestions?
Sincerely,
Max
I think you’ll want to load it from here instead: https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.149/pdf.min.mjs
Dear Cathy,
Thank you - much appreciated!