1

I created a website using Github pages, which uses jekyll as far as i'm aware. And I'm trying to find a way to embed PDFs into a post.

I've read through a bunch of posts such as this one. Recommended way to embed PDF in HTML?

and there seems to be a ton of different methods on doing this.

I'm very new to html and jekyll, so I've just been trying to follow what others are doing and match the format as best I can.

Right now in my repository I have a directory called "_pdfs" where I uploaded one of my pdfs to test out. In "_posts" I created a new markdown file and after the frontmatter, I inserted the following line

<object data="{{ site.url }}/_pdfs/Algebra_I_Reference_Sheet.pdf" width="1000" height="1000" type="application/pdf"></object>

I heard that using seemed better than or but what I get on my website is just a large blank space appearing. It seems to create space as if it were about the embed a pdf, but then it just leaves it blank. Scrolling to the bottom still shows the data, categories,tags, etc.

Sorry if my inexperience is making me miss something obvious in the formatting, but I've tried a lot of other things and it doesn't seem to work out.

Usama Abdulrehman
  • 1,041
  • 3
  • 11
  • 21
YLP
  • 25
  • 5
  • Is linking the PDF not enough so people can just click it and either display it via the browser or download it? You definitely need to embed the PDF on the page? – Dominik Jun 05 '20 at 02:09
  • I'd like to embed it just so I can discuss things about the pdf around it. It just seems like a nicer look to me. Of course if I can't get things to work, then I'll probably just have it open in a new tab. – YLP Jun 05 '20 at 02:13
  • And copy pasting the content is also not viable? I'm just asking cause embedding PDFs into HTML means you need a render and a lot of javascript in all likelihood which is maybe not what you want – Dominik Jun 05 '20 at 02:14
  • Sorry I'm not quite sure what you mean by copy pasting the content. From all the links I've read, it seems that people have gotten a pure html solution. Although I could be wrong. – YLP Jun 05 '20 at 02:28
  • Great, keen to see how that will work :) I'm not aware of HTML solutions here. – Dominik Jun 05 '20 at 02:29

1 Answers1

3

All you need to do is add {{ site.baseurl }} to your code and it should work. So the total code would look like:

<object data="{{ site.url }}{{ site.baseurl }}/_pdfs/Algebra_I_Reference_Sheet.pdf" width="1000" height="1000" type="application/pdf"></object>
David Buck
  • 3,752
  • 35
  • 31
  • 35
Sara Herbstreit
  • 46
  • 3