Skip to main content

Embedding Office Document

Two commonly used options for Sharing a, Office document 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 Office documents 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 a n Office document on the website,

  1. Select Embed Office Document option from the drop down.

Docusaurus

  1. Click on Embed PDF Document button and this will show you a popup where you can upload an office document or select an existing document.

Docusaurus

  1. Select the document you want to add and click on the Select button. And that's it!!

Displaying Office documents#

Displaying Office documents is very simple.

In your twig file, add

// entries.asset is the Craft CMS field name{{ entries.asset.render() }}

Rendering options#

The 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 

<iframe src=... class='row-flex col-sm-3' hello='world'></iframe>

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 

<iframe src=... style='width:100px;height:100px;'/>

Available Twig Method#

type() - Returns string 'office'.

// entries.asset is the Craft CMS field name{{ entries.asset.type() }}