Hugo theme component providing a shortcode to easily embed PDF documents using Adobe's Embed API.
The shortcode adobepdf embeds a PDF of your choosing into your content.
The URL of the PDF to embed e.g.
{{< adobepdf "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf" >}}Or using the named parameter url:
{{< adobepdf url="https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf" >}}Specify the name of the file which will be displayed at the top of the embed, if not provided, it will default to the url.
Specify the embed mode. Options:
FULL_WINDOWSIZED_CONTAINERIN_LINELIGHT_BOX
If none provided, it will default to IN_LINE. View the Adobe docs for more info.
Manually determine the width of the div container. Default 100%
Manually determine the height of the div container. Default auto
-
Add
hugo-adobe-pdf-embedas a submodule to be able to get upstream changes latergit submodule add https://github.com/tomdeabreucodes/hugo-adobe-pdf-embed.git themes/hugo-adobe-pdf-embed -
Add
hugo-adobe-pdf-embedas the left-most element of thethemelist variable in your site's or theme's configuration fileconfig.yamlorconfig.toml.config.tomltheme = ["hugo-adobe-pdf-embed", "main-theme"]
-
Configure your Adobe Embed API credentials in
hugo-adobe-pdf-embed's config file.The Adobe PDF Embed API provides unlimited free access, however you do still need to create a an api key.
Tip: for local testing you can create a separate credential with
localhostas the domain. Once you have your client ID, it will need to be added to your site parameters. This can either be done directly in./themes/hugo-adobe-pdf-embed/config.tomlor you might prefer to cut and put them in your mainconfig.toml -
Update your theme or sites
layout/partials/head.htmlfile to load the necessary Adobe script. If you prefer to not update the theme one directly, you can copy your theme'shead.htmlto your root'slayout/partialsfolder and edit it there, as this will be prioritised in the lookuip order.Add the following code between the
<head>tags:<head> ... {{ if .HasShortcode "adobepdf" }} <script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script> {{ end }} ... </head>
The condition means that it will not be loaded unless the shortcode is present.
-
On one of your content pages, add the shortcode:
{{< adobepdf "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf" >}} -
Customise with parameters as needed