Add an infographic to your website
SVG infographics that follow the recommendations in this guide should work and be responsive in all Greenpeace sites and many other sites. This page explains how to insert a responsive infographic in your site.
▸ Hosting the infographic
Most infographics should be hosted using Google’s CDN but can be uploaded to the Wordpress media library instead.
A - Upload to Google's CDN
The Google’s CDN should be used to host infographics meant to be shared or when we expect more traffic than usual.
Colleagues with access to the gpes-static bucket can upload the infographic's svg files.
Please note that Google Cloud Storage (Google's CDN) has a slow cache. If you re-upload a previous uploaded file in the same URL it can take up to one hour to update.
B - Upload to Wordpress media library
Upload to Wordpress is generally faster and easier but should be used with caution.
Because of our Wordpress cache, re-uploading files will always create a new file with a new URL. If you have shared the files externally the pages will always show the old version. Do not use media library URLs to share infographics externally! Use Google's CDN.
Please note that by default Wordpress does not allow uploading html, svg, css or javascript to the media library. Our plugin solves that and allows uploading this file types to the media library.
▸ Wordpress plugin
In the Spanish office we developed a Wordpress plugin and a shortcake block to easily publish responsive infographics in our website. The plugin is open source and can be used by Planet 4 and many other Wordpress sites. More information
How to use
If your site already has the plugin installed you can simply:
- Upload the 4 debugged and optimised SVG files as described above and take note on the URLS
- Click Add post element and choose the Responsive SVG infographic block
- Fill the form adding a unique ID and the 4 urls. Then click Insert element.
- You should be able to see the infograph inside Wordpress backend
