Embedding PDF Document
Two commonly used options for Sharing a PDF are providing a link to download the file directly from a server or sending it as an attachment in an email.
While this solution is usually sufficient for the personal needs of an individual user, it’s not a practical option for even a small-scale business when it comes to public-facing document management. By embedding PDFs in HTML, you can keep your documents within your secure application environment where you have full control over how they’re managed, shared, and viewed.
To embed an PDF document on the website,
- Select
Embed PDF Document
option from the drop down.
- Click on
Embed PDF Document
button and this will show you a popup where you can upload a PDF document or select an existing PDF document.
- Select the document you want to add and click on the Select button. And that's it!!
And that's it!
#
Displaying embedded PDFDisplaying embedded PDF is very simple.
In your twig file, add
// entries.asset is the Craft CMS field name{{ entries.asset.render() }}
#
Rendering optionsThe render()
function accepts parameters which will be passed directly to the rendered output tag.
So for instance, the below code
// entries.asset is the Craft CMS field name{{ entries.asset.render({'class':'row-flex col-sm-3','hello':'world'}) }}
will result in
<div class="row-flex col-sm-3" hello="world"> <canvas ...></canvas> <div class="onepluginfields-pdf-btns"> <button class="btn previous">Prev</button> <div class="page-wrapper"> <span class="page">1</span> <span> / </span> <span class="page">6</span> </div> <button class="btn next">Next</button> </div></div>
Having said that, there is an exception.
Setting the height and width of the output elements inline is not a commonly preferred approach. But if you have no choice, you can pass the width and height parameters along with an extra attribute called size, value of which should be set to true.
// entries.asset is the Craft CMS field name{{ entries.asset.render({'size':true,'width':'100px','height':'100px'}) }}
will result in
<div style='width:100px;height:100px;"> <canvas ...></canvas> <div class="onepluginfields-pdf-btns"> <button class="btn previous">Prev</button> <div class="page-wrapper"> <span class="page">1</span> <span> / </span> <span class="page">6</span> </div> <button class="btn next">Next</button> </div></div>
#
Available Twig Methodstype()
- Returns string 'pdf'.
// entries.asset is the Craft CMS field name{{ entries.asset.type() }}