Embed a .pdf in RW or Stack

Have I missed something? A quick search bought up very few posts or questions relating to embedding a pdf. I have hundreds of stacks and yet, when it came to embedding a single pdf into RW I realise I have no idea how to make it work…

The pdf is currently stored as a RW resource. I’d like readers to view on the site if possible.

Thanks for any thoughts :smile:

/nick

How about my PDF Embed Stack?

1 Like

I should add that embedding a PDF on your site is not bulletproof. Depending on the browser used or the OS, the user may need to have a PDF plugin installed into their browser.

What I’m trying to do as well is have it act as a flip book - in this style.

Yeah, Mark! That would be really neat!

So, @joeworkman, I see a job cut out for you – check out that link that Mark provided… :grin:

BTW, I have Joe’s PDF Embed stack and it works great for me.

Thanks, Rob!

I like PDF Embed, as I do every Stack of Joe’s which I’ve ever bought :smile: !

It’s giving users the flip-book experience that I think would be nice.

and there was I thinking that I had every Stack you’d ever done :wink:

Looks like I have missed one - Thanks Joe!

Hello,
I have a different question re PDF embed and PageSafe. I am using JW’s PageSafe to protect club members info. I made a pdf file of an excel file am am trying to use the stack PDF Embed in PageSafe. I was able to get the PageSafe lock to work just fine but when I try to view the pdf file, nothing shows up either in preview mode or if I publish the page. I have a button link on a Membership Page for Members Login that goes to the PageSafe page. I can unlock the page but everything shows up except the pdf file when I preview or publish. I have tried setting the PDF Embed link to the complete URL (http . . ./resources/…pdf) or to just the name of the pdf file that I have in Resources. I have tried several pdf files and can’t get any of them to show up. I have watched Joe’s videos but he doesn’t use the PDF embed stack in his PageSafe videos. I am using Yosemite and the latest versions of Stacks and stacks and RW 6.3.5.

It’s probably something simple but for the life of me, I haven’t been able to figure it out.

TIA, Mary

FWIW I use http://www.flipbuilder.com to generate a Flip book from a PDF. I use Word to edit the links and the document and then generate the TOC using LibreOffice which gives me the best off each of these softwares because I can get the feel and what I want in Word and I make TOC from the Heading formats.

Another approach, which can be used in Blog entries is to take embed it as an Object. For example, the Body for the page http://hoetker.faculty.asau.edu/Research/Research/papers_files/Alliance_experience_and_governance_flexibility.php

is the following line. The first line has nothing to do with this question. The second line provides an easy way for someone to download the document. The third line displays the PDF in a scrollable window. The fourth line is a fallback. This approach doesn’t work as well on mobile devices (at least iThings). There, it displays just the front page of the PDF, but viewers still have access via the Download link. For my likely readership, I’ve decided this is acceptable. For my purposes, I needed to be able to display PDFs on non-Stacks pages. A dedicated PDF viewer stack would probably be the better option if you didn’t have that constraint.

<a href="javascript:history.back()"><i class="fa fa-arrow-left fa-lg"></i> Return to prior page</a>

<a href="%resource(research/Lee-2015-8420.pdf)%"><i class="fa fa-file-pdf-o fa-lg"></i> Download </a>

<object data="%resource(research/Lee-2015-8420.pdf)%#scrollbar=1" type="application/pdf" width="100%" height="110px" style="border:3px solid #990033;">
 
 <p>It appears you don't have a PDF plugin for this browser. You can click here <a href="%resource(research/Lee-2015-8420.pdf)%"> to
  download the PDF file.</a></p>
  
</object>
2 Likes

Pretty cool effect. Would be nice as a stack.

Is that FlexBox?

Hi Joe. I tried this and PDF Embed works great on a desktop computer but I just get a blank space on an iPhone 6 or an iPhone SE, even though it shows up fine in RW8 emulations of these phones. Might I me doing something wrong? Cheers Drew.

I use your stack everyday Joe

1 Like

iOS does not support embedding PDFs inside of the browser. I recommend that you use the responsive settings to hide the embed on mobile and provide a download button for mobile.

I’m just making sure here in case you didn’t know… you can simply provide a link to the pdf and upon click it will open in web browser and can be viewed or downloaded…on mobile, tablet, and desktop.

Here is a sample using Joe’s stack and True Download 2
Works great everywhere.
http://www.ibize.com/texascountyveterans/AboutUs/

In my opinion the best way is to add a pdf to your site is to add a link and let the browser handle the pdf when the link is opened.

Browsers do that quite nicely.

Forget about the fancy effects… like flipbooks.

Flipbooks are in my opinion annoying. I’ve done a few on request of customers – but I don’t like the result. Books aren’t really meant to be read like books on a computer… we have the ebook format for that.

But pdf are nice in the way – that they work perfect for print… once done for print – uploading to the internet – time saved.

But a pdf-page on a smartphone is… hard to read. Text doesn’t reflow. It’s too small because most text heavy pdf are done with a 10-11-12 point font size.

PDF on a computer… you click to zoom in on a text, that’s often too small – and you loose track of where you are on the page.

Adding a pdf to a RapidWeaver Stacks page only requires a small amount of code. In fact I’ve added the feature to one of my free Stacks. But I won’t advertise for the feature and the Stack – because it’s not a good solution.

PDf = link = let the browsers deal with the links… it works. It’s not fancy – but it works.

Joe’s download stack is nice… by the way.
So is a link to the pdf stored in RW resources.

Best | DeFligra | www.defligra.com
Mac’O’Holic | Rapid’O’Holic | Stack’O’Holic | Web’O’Holic
In other words I’m drunk most of the time

2 Likes

There was a lengthy discussion talking about embedding PDF files in webpages on Stack Overflow a couple of weeks ago. I think I bookmarked it in Pocket. If I can find the link again, I’ll share it here.

The outcome of the discussion I took away is that iOS takes the first page of a PDF and saves it as an image (or at least handles it like an image). For that reason, it is bordering impossible to embed a PDF file that has multiple pages you can scroll through. But a single-page PDF should work okay on iOS, except it will be really small and can’t be zoomed. So assume that the first page of your PDF will show simply as a static image in iOS.

However there remain big inconsistencies in how different web browsers handle PDF files. The general consensus was to display the PDF as an iFrame on desktop, but use media queries / feature detection to hide the PDF on touch screens and replace it with a download link or button. Those solutions seemed to gain the most up-votes and “works for me” remarks.

I agree 100% with what @defligra says about flip books. I am yet to find an example of one that works flawlessly everywhere and is responsive. Do any accessibility test on a flip book and the results are really depressing!

3 Likes

I found a solution for my pdf embed problem that I will share. I do a website for our club and they wanted the membership list on the site but protected with a password.

I used @joeworkman’s page safe and pdf embed stacks. Since as @Willwood pointed out you can’t scroll through a multiple page pdf on a smart phone, I sectioned my entire pdf file into smaller pdf files and individually embedded them in separate pdf embed stacks.

On the iPhone, you can now scroll up and down and right and left through the separate pdf files and can zoom them with your fingers. It works really well and the only hard part was determining how many rows of the original Excel file I needed to convert to a pdf file and have the end result easily readable on the iPhone.

Mary

2 Likes

Hello

New to RW. Just purchased True Download 2 but, having few issues. I added TD2 stack, added a PDF file into my resource folder with RW and in the stack setting, I link to the resource folder to the PDF file. When preview, cant get download to work. Does download only work when site is FTPd to server and viewed in the browser? Not sure what I am doing wrong.

Thanks in advance.
Zahir