Display PDF page

My pdf pages aren’t visible as a page in my Sparkle site. Since I have multiple pdf’s that I would like to display in Sparkle, this is a serious problem. Please help!

@ProperLady, Sorry but could you further elaborate please… a screenshot maybe.

A hint… A website is viewed on so many different screen sizes nowadays ranging from mobile all the way up to HD TV so embedded pdfs will work AOK on desktop and TV, but on tablet it becomes questionable and on mobile it is just an outright pain to use unless the pdf has been optimised for mobile.

Sparkle has options and in the end linking a pdf is a far better call than embedding it for the user.

1 Like

Although web-bowsers can display PDF’s, these file types are not really good substitutes for HTML pages. Normally, a PDF file, if attached and linked to your web page will open in a new tab or window. This is more of a convenience thing, so that users get a full window of content that can be viewed or saved.

That said, it is sometimes required to have a PDF document display within an HTML web page. This allows the PDF to be displayed in a fixed size window. Furthermore, most modern browsers will recognise an embedded PDF and offer up some useful tools to the user when a mouse pointer is hovered over the PDF. These will typically include zoom and download options. Where the display window may be shorter than the PDF document, there will be a scroll function added to the window to allow the document to be scrolled independently of the web page. This is particularly useful for embedding multi-page PDF’s.

To do this in Sparkle, you would add the code widget to the page, and then add a piece of iFrame code into the widget. You repeat this for every document you want embedded. Here is an Example Page

In order to keep topics in the forum more related to the core functions of Sparkle, if you need information on how to generate the iFrame code, please feel free to PM me for specific instructions.

Hi @ProperLady,

by the sound of it, what you are trying to do is not something that is common on the web. PDF is its own file format, it’s not native to the web. Sparkle produces native HTML (and assorted supporting files), but doesn’t convert PDFs into HTML.

So your options are:

  • you can link to the PDFs, say by dropping them into the Sparkle canvas. Most browsers have a built-in PDF viewer, but your users are kind of stuck in a non-native feeling medium
  • you can copy/paste the original documents into Sparkle, and make one or more content pages for each PDF, that are native to Sparkle and to the web (you could copy/paste from the PDFs as well, but very often the text is somewhat scrambled in the PDF)
1 Like

Thank you for this excellent feedback. I will be using most of these ideas. And I may decide to convert some of them to images, since the visuals are more important than the text on those.

Please bear in mind that PDF page content can be read by search engines, whereas images cannot. Also images can be larger and less clear than PDF’s, so not always the best option to go for.Its all a bit of a trade-off one way or the other.

You’ll be fine with high resolution images. Google’s artificial intelligence algorithm can read the text in images. If you’re not making a document downloadable, JPG and PNG are best. Non animated SVG works when not surrounded by extensive artwork. Google can also read embedded Keynote presentations. Video, GIF, and ASVG not yet.

Hello,
The only way to do that is embedding it…
use the embed button and place this script (you have to upload your pdf in you site)
Modify the size accordingly.

<iframe src="URL" height="200" width="300"></iframe>

Apologies - i know i am somewhat late to this party, but i just wanna share my tip:

You also use the html embed tag to display a pdf file in a webpage:

<embed src="sample.pdf" 
              type="application/pdf" 
              width="100%" 
              height="600px" 
              />

src – Specify the path of the external file to embed.
type – Specify the media type of the embedded content.
width – Specify the width of the embedded content.
height – Specify the height of the embedded content.

page=pagenum
Specifies a number (integer) of the page in the document. The document’s first page has a pagenum value of 1.

zoom=scale
Sets the zoom and scroll factors, using float or integer values.
For example, a scale value of 100 indicates a zoom value of 100%.

view=Fit
Set the view of the displayed page.

scrollbar=1|0
Turns scrollbars on or off.

toolbar=1|0
Turns the toolbar on or off.

statusbar=1|0
Turns the status bar on or off.

navpanes=1|0
Turns the navigation panes and tabs on or off.

You can specify multiple parameters in the URL.
Each parameter needs to be separated with either an ampersand ( & ) or a pound ( # ) character.
Actions are executed from left to right and later actions will override the previous actions.

Here are some examples

http://example.com/doc.pdf#Chapter5
http://example.com/doc.pdf#page=5
http://example.com/doc.pdf#page=3&zoom=200,250,100
http://example.com/doc.pdf#zoom=100
http://example.com/doc.pdf#page=72&view=fitH,100
2 Likes