Inserting my pdf in my blogs - jekyll

I have a posts page which stores every individual blog. And each blog has a pdf file. I can upload the pdf via the blog page but when I execute my code through the for-loop on posts - post.file_doucment_path it just shows the pdf file location. Do I need to add a seperate js pdf reader package to get it working? Cheers.

HTML5 <object> element can embed PDFs in a page without an external library.
<object data="the.pdf" width="1000" height="1000" type='application/pdf'/>
Just replace "the.pdf" with your file document path with Jekyll syntax.
e.g.
<object data="{{ post.file_document_path }}" width="1000" height="1000" type='application/pdf'/>

Related

Embedding json file to display in markdown (GIthub pages+jekyll)

I have a Github page, which uses, of course, Jekyll. I have already embedded there pdf file that I have in the system with this code:
<object data="img/mypdf.pdf" type="application/pdf" width="1000px" height="800px">
</object>
Now I need to preview the json file in a similar way, but I can`t find a way for it to work. I have already this:
<a href="docs/myjson.json" download>Click to open (or right-click and "Save link as") </a>
I would like to avoid copying the content and pasting it on the page every time. It would be much easier if the content from json file is embedded and it would "preview" on the page every time myjson.json is replaced. Can you help me?

Prevent to download pdf using embed tag

I'm using php, I'm creating a detailed view page of a profile, which has a pdf document, I use the embed tag to display it, but when opened it does not display the pdf file and Automatically download the file. Therefore the user can not see the pdf file displayed.
<embed src="/vh/assets/image/java.pdf" type="application/pdf" width="500" height="500"/>
Is there a way to solve this problem?
PDF documents are not supported as a src in the HTML <embed> tag.
You can get around this issue by using the Google Chrome PDF viewer as the embed `src.
<embed
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://yourdomain.com/vh/assets/image/java.pdf"
width="500"
height="500"
/>
Note that your url in the src cannot be relative /vh/assets/image/java.pdf, it must be the full url http://yourdomain.com/vh/assets/image/java.pdf.
There also exist some third party libaries such as PDF.JS.
You can refer to w3schools embed tag,It is an html single tag,I can display pdf normally in chrome and firefox.Maybe you can check if your src is correct.
You can try below snippet #toolbar=0 helps disabling the options
<embed id="myObject1" src="file:///C:/Downloads/OoPdfFormExample.pdf#toolbar=0" type="application/pdf" width="1000px" height="600px">
This will disable download, print and other option of pdf viewer on browser

How to make GoogleBot recognize embedded object in HTML?

<object width="900" height="900" data="https://docs.google.com/gview?embedded=true&url=http://example.com/mydoc.pdf"></object>
I embed PDF on my site using the above code. The GoogleBot does not "see" the pdf embedded. The page has no other visual content on it except a link to download the same PDF. I want the bot to read the PDF and want the page to show up in SERP.
Will it work? If not, what are the options?

How to display .html file in a web page preventing downloading

I want to display the myfile.html file in a web page using the iframe tag, but, instead of displaying the contents of the my.html file, the browser downloads the file on the local computer. What should I change in order to make the contents viewables by preventing downloading? I also test both embed and object tag but the result remains the same. The code has as follow:
<iframe src="myfile.html"></iframe>
or
<embed src="myfile.html">
or
<object width="400" height="400" data="myfile.html"></object>
Mention: My intention, of course, is to use just one of the above tags, not all them.

html code for playlist not working on blogger

I wrote this HTML code on the HTML gadget of blogger -
<embed name="2playlist"
src="2playlist.m3u"
width="300"
height="90"
loop="false"
hidden="false"
autostart="true">
</embed>
But it's not working. I have little knowledge of HTML, I found this code online. Any suggestions?
Thank you.
The main problem is in your src="2playlist.m3u". You should set the source by hotlinking the .m3u file, for example: http://example.com/music/2playlist.m3u because blogger have no directory system like WordPress.
This code uses three kinds of files: html, m3u, and mp3. The code you posted loads a music playlist (m3u), which in turn loads audio files (mp3).
Make sure all these files are in the same directory (folder):
your html file containing posted code
2playlist.m3u
all the audio files listed in your m3u file
If you need help creating the m3u file, see step one at http://www.quackit.com/html/codes/create_music_playlist.cfm.
Edit: Since blogger doesn't support directories, you need to put the absolute file path rather than the relative file path. Basically, rather than putting src="2playlist.m3u, you need to have an m3u file somewhere on the internet, and you need to put it's url there instead of 2playlist.m3u.