Jump to content

Uploading PDF and hiding the static Squarespace URL?

Recommended Posts

I have uploaded a PDF to one of my pages, unfortunately when you click on the PDF it links to another URL revealing the site is built with Squarespace (https://statics.quarespace.com/static/…)

I would prefer to have my website URL displaying instead. Is there a way around this?

Carla

Link to comment
  • 1 month later...
  • Replies 8
  • Created
  • Last Reply

There’s quite a few options, they all work by the same principle, you have a page/blog post that embeds the PDF and so hides the PDF’s actual URL. All of these methods require you to put the code in a Code Block in your page/blog post. Make sure the Code Block is set to HTML with the Display Source option unchecked.

For small PDFs, I would probably go with either of the object embedding methods (option 1), depending upon what web browsers I had to support. For more complex PDFs, I’d use Scribd, although PDF.js looks nice, the issue of keeping up-to-date with another JavaScript library would be a bit much.

There’s a lot more discussion about the various methods at these two Stack Overflow questions: Recommended way to embed PDF in HTML? and Embed vs. Object.

Option 1: Embed with an object

The correct way:


<object data="test.pdf" type="application/pdf" width="300" height="200">
 alt : <a href="test.pdf">test.pdf</a>
</object>

The incorrect, but more compatible way (supports IE6):


<object data="test.pdf" type="application/pdf">
 <embed src="test.pdf" type="application/pdf" />
</object>

Read more at Stack Overflow Embed vs. Object - accepted answer.

Option 2: Iframe (inline frame)


<iframe src="test.pdf" width="100%" style="height:20em">
 [Your browser does <em>not</em> support <code>iframe</code>, or has been configured not to display inline frames.
 You can access <a href="test.pdf">the document</a> via a link though.]
</iframe>

The downside to these two methods is that you’re entirely dependent upon the browser developer for the PDF controls.

Option 3: PDF.js

A lot more complex, but has inline controls.

This one comes with all the controls you’d expect: zoom levels, previous and next pages etc. Although in my brief testing of the demo page I note there’s a problem in Safari but not in Google Chrome.

PDF.js homepage
PDF.js demo: doesn’t work in Safari 6.0.4, but works fine in Google Chrome and Firefox.
Render PDF Files With HTML5 and JavaScript Using PDF.JS, includes a demo and source download at the end of the article.

Option 4: Hosted by Scribd

Have to upload your PDFs to Scribd, and can’t remove the Scribd branding.

The upsides are that the embedded viewer has built in controls and is supported by most (all?) web browsers.

Scribd developers site
Scribd demo

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 2 years later...

This is one of those things I can see SS overlooking and thinking "eh, who's really going to notice and, if they do, will they care?". That's a reasonable conclusion and one I would have shared.

But having had people test various SS sites I will say this: it gets noticed, and it registers to people as a mistake and/or unprofessional.

SS: if there is any way to fix this in the future, please do.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 3 months later...

I was also having issues with my pdf files being assigned a static1.squarespace address. What I did to solve this issue was to create a masked subdomain redirect to the static1.squarespace page. Now when people click the link for the pdf page they see "customsubdomain.mydomain.com" instead of "static1.squarespace...". My domain is hosted by Hover, so what I did was create a new "A Name" record in my DNS that pointed to the subdomain. It reads as follows:

mycustomsubdomain A 64.99.80.30(Note - your IP address will be different if you're not using Hover)

I then generated a masked subdomain via Hover's interface with the same name. So that looks like:

mycustomsubdomain.mydomain.com

After a waiting a little bit for the DNS to refresh, it worked perfectly. Depending on who your domain provider is, the process might vary, so check their documentation before mucking around in the DNS. I found this tip here:

https://help.hover.com/entries/56103434-How-To-Create-Domain-Shortcuts-Custom-URLs-

on the Hover help page, posted by one of their moderators in the comments on the bottom. Hope it helps!

Link to comment
  • 2 months later...
  • 2 months later...

Regarding just getting the PDFs to show up, thank you so much for this!!! I used option 1 (both methods) and option 2 successfully to embed PDFs. For the alternate method of option one above, I had to include height and width for the file to display well. Also, I had to add /s/ for the subfolder that my files reside in. With different display settings and browser zoom levels, my PDFs travel to the right though. Likely there is a CSS fix or something. Also, I have a client that cannot see the files with these two options on two computers. I know one is using Firefox but suspect both computers/software are older. Also, remember if you use the Iframe option, view it on a published test page as opposed to while editing. : )

Here is an example of the code I used for the first method with a "p" for centering (better in my case), the /s/ thrown in there for the subfolder location, and alternate height/width:


<p><object data="/s/example.pdf" type="application/pdf" width="1800" height="1500">
  alt : <a href="/s/example.pdf">example.pdf</a>
</object></p>




Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.