Embedding PDFs into Blog Post?

Using Ghost
1

I’m trying to post some PDFs on my blog, but I’d like for them to be viewable without the need to download them.

My plan was to upload to GoogleDrive/Dropbox, set them to shareable with link, and then use HTML code to embed them, but I’ve tried this already and it’s not working.
Is there another way?

Thank you!

2

The only instance I’ve seen recently is a blog using Scribd and then pasting the html code into a post. It is a paid service however. I’m using the /file option for pdf’s under 5MB and leaving a download link for larger files.

3

I was able to get it working with uploading to GoogleDrive, then have a custom theme for any pages where I’m embedding the PDF. I just paste the link to PDF into the post (making sure it’s the link ending in /view). The script will replace the link with an iframe embedding the post and then add a link to download the file below it

The template is just the same as the normal post template, but with this script added to it. You might even be able to add this directly to the code injection, but I’m not sure.

 <div class="post-body">
        <div class="post-inner js-post-content">
            {{content}}
            <script>
                $('.js-post-content').find('a').each(function () {
                    console.log($(this).attr('href'));
                    var div = document.createElement("div")
                    var frame = document.createElement("iframe");
                    div.setAttribute('style', "text-align:center")
                    frame.setAttribute('src', $(this).attr('href').replace("/view", "") + "/preview");
                    frame.style.width = "100%";
                    frame.onload = function () {
                        frame.style.height = (document.body.scrollHeight * 0.7) + "px";
                    };
                    var anchor = document.createElement("a");
                    anchor.setAttribute('href', $(this).attr('href').replace("/view", "").replace("file/d/", "uc?export=download&id="));
                    anchor.innerText = "Download Document"
                    div.appendChild(frame);
                    div.appendChild(anchor)
                    this.parentNode.replaceChild(div, this);
                });
            </script>
        </div>
    </div>

I intend to do something similar with the new file upload cards and use google’s doc viewer to remove the need to upload to google.

<iframe src="https://docs.google.com/viewer?url={{URL OF THE PDF UPLOADED TO GHOST}}&embedded=true" style="width:100%; height:500px;" frameborder="0"></iframe>
6 Likes
4

Still don’t understand why we can’t embed pdfs like this into ghost with the embed function. I’m not a coder, but this is extremely frustrating. Embedding documents should not be so challenging. Has anyone developed a workaround that does not involved editing a theme?