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 section on a pop-up window. 

 

pdf-permission

 

Under "Permissions"  tab click on "Add CORS Configuration" button. AWS will provide a default XML configuration that should work correctly:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorisation</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

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

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>http://www.mysite.com</AllowedOrigin>
    <AllowedOrigin>https://www.mysite.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

 

pdf-config

 

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