Skip to main content

WP Media Folder: Embed PDF

You have the ability to embed PDF files directly within your content, allowing them to be displayed alongside your other WordPress content, rather than just providing a download link. When you insert a file using Gutenberg, the embedded PDF will showcase a full preview. Plus, this feature supports navigation across multiple pages and is designed to be responsive for various screen sizes.

 

pdf-embed

 

In this way, the PDF document will be displayed instead of a download link.

Embed PDF when using Amazon S3

You need to configure little bit to embed PDF files in your content if using Amazon S3. Please follow these steps below.

First, you navigate to the AWS console and find the S3 configuration area. After that select the bucket you are using to store your assets and select Permissions tab. 

 

pdf-permission

 

Under "Permissions"  tab, scroll down to "Cross-origin resource sharing (CORS)" section then click on Edit button. AWS will provide a default JSON configuration that should work correctly:

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

However, you may prefer to limit access to your own WordPress site's domain, for security reasons:

[
     {
           "AllowedHeaders":["Authorization"],
           "AllowedMethods":["GET”,”HEAD"
            ],
            "AllowedOrigins":[
                          "https://www.your-site.com/",
                          "https://your-site.com/"
              ],
              "MaxAgeSeconds": 3000
     }
]

 

pdf-config

 

You need to paste the JSON code above on the text area. Remember to click on Save changes button, now you can embed PDFs file in the content. Good luck!