Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/greenpeace/gpes-infographics-wp-shortcode
Shortcode to add responsive SVG infographics
https://github.com/greenpeace/gpes-infographics-wp-shortcode
shortcake-shortcode-ui wordpress-plugin wordpress-shortcode
Last synced: about 1 month ago
JSON representation
Shortcode to add responsive SVG infographics
- Host: GitHub
- URL: https://github.com/greenpeace/gpes-infographics-wp-shortcode
- Owner: greenpeace
- License: gpl-2.0
- Created: 2018-11-10T10:56:18.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-26T19:03:08.000Z (about 6 years ago)
- Last Synced: 2024-08-03T19:09:13.765Z (5 months ago)
- Topics: shortcake-shortcode-ui, wordpress-plugin, wordpress-shortcode
- Language: PHP
- Size: 16.6 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- global-gp-software-index - gpes-infographics-wp-shortcode - Shortcode to add responsive SVG infographics. Used in [es.greenpeace.org](https://es.greenpeace.org/es/trabajamos-en/cambio-climatico/pagos-por-capacidad/) and others. (Wordpress / Plugins)
README
# Add a responsive SVG infographic
With this Wordpress plugin you can add a responsive SVG infographic to any page or post.
## About our infographics
This plugin was created to work with Greenpeace Spain generic SVG sizes and methodology. **This infographics should display responsively in most websites**. For more information check:
1. [Guide to create visualisations for our sites](https://greenpeace.github.io/gpes-visualisations/index.html)
2. [Infographics](https://greenpeace.github.io/gpes-visualisations/infograph.html)
3. [Sizes, formats and file types](https://greenpeace.github.io/gpes-visualisations/sizes-formats-files.html)
4. **[Add an infographic to your website](https://greenpeace.github.io/gpes-visualisations/add-infographic-to-website.html)**
## How to use
Copy-paste the example code bellow to your posts and pages.
```
[responsive_svg_infograph id='justAnExample' xl='https://storage.googleapis.com/gpes-static/plasticos/plasticos-1024.svg' l='https://storage.googleapis.com/gpes-static/plasticos/plasticos-730.svg' m='https://storage.googleapis.com/gpes-static/plasticos/plasticos-510.svg' s='https://storage.googleapis.com/gpes-static/plasticos/plasticos-360.svg']
```
## Graphic user interface
If you use [Shortcake Shortcode UI](https://wordpress.org/plugins/shortcode-ui/) you can insert the infographics using the graphic user interface.
## How to install
1. Upload the **responsive-svg-infograph** folder to **wp-content/plugins/**.
2. Activate the **Add responsive SVG infographics** plugin.
If you use the plugin [Shortcake Shortcode UI](https://wordpress.org/plugins/shortcode-ui/) to have a GUI, you should also:
1. Upload the **responsive-svg-infograph-ui** folder to **wp-content/plugins/**.
2. Activate the **Responsive SVG infographics UI** plugin.
## How to translate to a new language
1. Open the files languages/responsive-svg-infograph.pot and languages/responsive-svg-infograph-ui.pot with Poedit.
2. Create new language.
3. Translate.
4. Save the .po and .mo files as the Spanish example inside the languages folder.