We help IT Professionals succeed at work.

Posting PDF Content in WP

APD Toronto
APD Toronto asked
on
Hi Experts,

My new client gave me the attached PDF post as content and I am wondering how would someone do it?

If I take a snapshot and save it as image, it is too blurry.

If I use a PDF to HTML online converter I get a lot of symbols like ~~0 instead of the percents

I tried the PDF Embedder, but I get Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".

The best was the converter, and I go line by line and edit the symbols, but the HTML is not in order as they use absolute positioning. I can do it, but I cannot help wonder if this is the proper way or if there is a better way.finra-infographic---the-financial-ch.pdf
Comment
Watch Question

Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
In WP, edit as html using object.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object
<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

Open in new window


or an iframe or save it is an image and use <img src="myimage.jpg">  I would try object first.

You can try and break it apart but as you found out it is messy. When I opened it up in acrobat and saved as html, it didn't look great. Also, the fact that this is a FINRA doc, I wouldn't want to mess with it. If this is for a financial client,they have to deal with compliance and compliance types do not typically like to break these types of things apart and put them together again.
David FavorFractional CTO
Distinguished Expert 2018

Commented:
You might also do something like this...

libreoffice --headless --convert-to html /test/foo.pdf --outdir /test/

Open in new window


Best to use an output directory, as multi-page PDF files will explode/convert to one HTML file for each PDF page... so this will continue working if your PDF file ever changes to multi-page.

libreoffice has many other control options to alter behavior. Take a look at the libreoffice docs for more detail.
Alicia St RoseOwner & Principle Developer/Designer

Commented:
Hi!

You can simply upload the PDF using media library. Then create a smaller image and link it to the PDF. You can also create a text link to view it as well. The URL is found in the Media library.

Make sure you add info in the image alt tag:

Link to Info graphic pdf download.

And then the fun part. Create a HTML based version of the information for sight impaired and SEO purposes.

I'm having to do this for a Festival Client who released a lineup Poster for the bands. I've got a page with the poster and I am creating a page with HTML based lineup. It doesn't have to be pixel perfect or especially pretty. It's just providing the info for someone who can't see anyway.

With Gutenberg blocks you can come pretty close to that graphic. Especially, utilizing the column block within group blocks. You may have to install a third party block plugin to find a table for the Annual Household Incomes section.

Creating a html version of this graphic is especially important in your case, since the content is about folks with disabilities!
APD TorontoSoftware Developer

Author

Commented:
Client put this on hold. I will open new question if needed.

Thanks All.