How to embed a PDF?

How To
1

How do I embed a PDF that has been uploaded to the Wordpress media area? There seems to be no element to display a PDF (or other document file for that matter) in Bricks yet we can display a video, map, image and audio file.

It looks like the only way to do this is to use an iframe or embed in the shortcode element, is this correct?

What if I am loading PDFs into a CPT and want to dynamically display a PDF on a page based upon a term ID/name in the CPT record?

Any help greatly appreciated.

2 Likes
2

A quick google search led me to PDF Embedder – WordPress plugin | WordPress.org.

You may want to give it a try.

1 Like
3

Hi,
thanks for the reply.

Yep, checked all the possible plugins but surely I shouldn’t need a plugin to do this. Being able to display a PDF file should already exist in Bricks and it is a glaring hole in the Media elements section. For PDFs, Bricks could simply reply upon the in-built browser support, no need for any other 3rd party viewer. It is also possible to control the tools available to the reader, for example not being able to download the file, copy it etc. The vast majority of these plugins also use iframe which I’m not keen to use. A plugin also can’t be dynamically passed the pdf file to display from a CPT.

The plugin you suggest is OK but provides no control over the tools available to the reader, you have to pay for the secure version which is $30/yr. For now I’ve gone with Wonder PDF Embed as it doesn’t use an iframe and provides the secure options for free.

4

Hello Simon, I also faced this problem and https://www.typingservice.org/ helped me solve it. They also provide PDF to Word and image (PNG/JPEG) to Word conversion services. With their help, I not only solved a similar problem, but also delivered my necessary work faster. So feel free to recommend their services to you.

1 Like
5

Did you find a way to do it?

1 Like
6

This is how I did it: add a Shortcode to your template and type your embed html in the Shortcode box under Content, like this:

<embed src="/wp-content/uploads/(..your file path..).pdf" type="application/pdf" width="100%" height="500px"></embed>

3 Likes
7

I did it using a shortcode and the following code:

Screenshot 2024-03-19 at 10.14.07
Screenshot 2024-03-19 at 10.14.07990×112 11.2 KB

So I’m dynamically pulling the PDF from a custom post type.

1 Like
8

thank you so much that is really helpfull

1 Like
9

btw in case if you need convert pdf to other formats, use this tool PDF Converter for converting PDF files - OneConvert , you will find many tools thers

1 Like
10

Hello
i had another approach but maybe this could help
i wanted to directly show the PDF as Preview and on click on the Preview to open it in a lightbox.
Most important was to be able to use it with dynamic data
So i got some code for this purpose

Its HTML/JS/CSS but very easy

Maybe this could be also use to make a new Bricks Element , who knows!

  1. Put following code in Bricks Header in Settings
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
  1. HTML Code for the Bricks Code Element in Builder
<!-- Container for PDF-Preview -->
<canvas id="pdf-preview" style="border: 1px solid #ccc; cursor: pointer;"></canvas>

<!-- Lightbox Container, default invisible -->
<div id="lightbox" style="display: none;">
  <div id="lightbox-content">
    <canvas id="pdf-lightbox" style="border: 1px solid #ccc;"></canvas>
    <button id="close-lightbox">Close</button>
  </div>
</div>
  1. CSS for the same Code Element
  /* Lightbox Styles */
  #lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  #lightbox-content {
    position: relative;
    background: #fff;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
  }

  #close-lightbox {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
  }

  canvas {
    max-width: 100%;
    height: auto;
  }
  1. Javascript for the same Code Element
<script>
  var pdfUrl = 'PDF_DATA_URL.pdf';  // Change with URL or Dynamic Data

  // Load the PDF
  pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale });

      // Preview in Canvas
      var canvas = document.getElementById('pdf-preview');
      var context = canvas.getContext('2d');
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      page.render({
        canvasContext: context,
        viewport: viewport
      });

      // Click-Event for Lightbox opening
      canvas.addEventListener('click', function() {
        openLightbox(pdf);
      });
    });
  });

  // Function for opening Lightbox
  function openLightbox(pdf) {
    var lightbox = document.getElementById('lightbox');
    var canvasLightbox = document.getElementById('pdf-lightbox');
    
    // Rendering first site of PDF in the Lightbox
    pdf.getPage(1).then(function(page) {
      var scale = 2;  // Höhere Skalierung für die Lightbox
      var viewport = page.getViewport({ scale: scale });

      var context = canvasLightbox.getContext('2d');
      canvasLightbox.width = viewport.width;
      canvasLightbox.height = viewport.height;

      page.render({
        canvasContext: context,
        viewport: viewport
      });
    });

    // Show the Lightbox
    lightbox.style.display = 'flex';

    // Close the Lightbox
    var closeBtn = document.getElementById('close-lightbox');
    closeBtn.addEventListener('click', function() {
      lightbox.style.display = 'none';
    });
  }
</script>

Maybe it can help someone
Have fun with it!
Best Greetz
David

1 Like