Place Data Graphics
in WordPress
The content of a WordPress site is made up of blocks. It is far from obvious how to place embed codes in them, from the different web apps we are using.
So here is a guide to place graphics from the three most used applications.
1. Infogram
Infogram provides some alternatives for placing graphics in WordPress. The one called Responsive (Async) is the best for most purposes.
First: uncheck Zero margin embed. The other check box, Transparent background, is up to you to choose what works best on your page.
If you copy this code and paste into the “Custom HTML”-block, you get this:
This format works well for most situations. But now and then the graphics need to be larger. If so, add this to the code:
Be careful with spaces and quote mark. One mistake and you get no graphics (all sripting and programming is like this – unforgiving).
Accessibility Infogram
Upon creating your graphics you can find Accessibility at the bottom of Settings. Choose Visible and write in the designated fields what the graphics is visualising. Under Chart Properties you may choose Downloadable Data. That gives the visually impaired a possibility to access the content.
2. Flourish
Use the HTML-code you get from Flourish when you choose Export & Publish and hit More options. There you select the Script option. That is the responsive alternative.
Copy the code and paste it into the Custom HTML-block:
It will show up with your column’s width.
It’s possible to make it larger:
Add to the code:
It is important to write exactly like that, in that order, with spaces and quote mark.
3. Datawrapper
It is easy to place graphics from Datawrapper. There are several alternatives on their website, and the best is also the easiest: Share via URL. There you must check the option Fullscreen, the option Normal Size just doesn’t work in WordPress.
You paste the provided URL in the Embed Block, but the common Paragraph block will also do (it will transform into an Embed block).
In the settings panel over the Embed Block are aligning options. The left and right option works poorly in this WordPress theme. You may use align-centre, -wide width and -full width. And that will render the following: