Ocha Humanitarian Icons, for use in Wagtail projects, with an icon chooser widget.
Project description
Wagtail Humanitarian Icons
This Wagtail package brings Ocha Humanitarian Icons to Wagtail Admin, with a possibility to use the icons also on your frontend.
NOTE
: The recent versions of Wagtail supports uploading SVGs directly to the images section of
the CMS interface. If you just need to upload SVG images and use them on you frontend, consider using that.
This package aims to provide a way to select and use predefined humanitarian icons from OCHA.
Installation
pip install wagtail-humanitarian-icons
Add wagtailhumanitarianicons
to your installed apps
INSTALLED_APPS = [
...
"wagtailhumanitarianicons",
...
]
Using the icon chooser
To use the icon chooser, and an icon field to your wagtail page, and use the IconChooserWidget
, widget for example:
from django.db import models
from wagtail.admin.panels import FieldPanel
from wagtail.models import Page
from wagtailhumanitarianicons.widgets import IconChooserWidget
class MyPage(Page):
icon = models.CharField(max_length=100, null=True, blank=True, help_text="Humanitarian Icon")
content_panels = Page.content_panels + [
FieldPanel("icon",widget=IconChooserWidget)
]
The icon
field will be shown, with a button for selecting and showing the selected icon, as below:
Clicking on the button will show the icon chooser, with all the icons, including the Wagtail admin icons. Scrolling down will show the Ocha humanitarian icons
The Icons can be used out of the box in templates rendered on the Wagtail admin, without any configuration. To use them on your custom frontend templates, one way to do it is to use the following approach:
- Add all icons to your template's context, and have them as a svg sprite. Wagtail provides a way to get all the admin icons as a svg sprite, using a view found
at
wagtail.admin.views.home.icons
- Add the svg sprite to your template
- use the
icon
template tag from `wagtailadmin_tags' to render your svg, which will the link with the icon from the svg sprite - or directly render the svg to the template
We provide custom abstract page CustomIconPage
, that helps you to achieve the above.
This just overrides the get_context
method of the Wagtail Page class, to add the svg sprite string.
from django.db import models
from wagtail.admin.panels import FieldPanel
from wagtail.models import Page
from wagtailhumanitarianicons.models import CustomIconPage
from wagtailhumanitarianicons.widgets import IconChooserWidget
class MyPage(CustomIconPage, Page):
icon = models.CharField(max_length=100, null=True, blank=True, help_text="Humanitarian Icon")
content_panels = Page.content_panels + [
FieldPanel("icon", widget=IconChooserWidget)
]
Your template will now have a svg sprite context
object, with the key icons_svg_sprite
You can add the svg sprite anywhere in the template, and use the icon
tag
{% load wagtailadmin_tags %}
....
{% block content %}
{% if icons_svg_sprite %}
{{ icons_svg_sprite|safe }}
{% endif %}
<div>
{% icon name=page.icon %}
</div>
{% endblock content %}
.....
You can also directly render your icon without using the icon
template tag.
Just replace {% icon name=page.icon %}
with
{{ icons_svg_sprite|safe }}
<svg class="icon">
<use href="#icon-{{ page.icon }}"></use>
</svg>
Have a look on the sandbox/home/models.py
for a complete example, and sandbox/home/templates
for an example on rendering on the frontend.
The code used to prepare the OCHA icons can be found at wagtailhumanitarianicons/utils.py
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for wagtail-humanitarian-icons-1.0.3.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 28dbdddc80732b9c35a0aaf6d507739fff5764dfb0eb6ee2247779ca449c2cad |
|
MD5 | a94a946d7497b9e26624b05697ea19ea |
|
BLAKE2b-256 | b00b2a471c64a5ae6b9972a24ae04abbd08b50800e70332312edd09d170b9f81 |
Hashes for wagtail_humanitarian_icons-1.0.3-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 9bd134587eaaa4a4e21e27af113be36d0e96240c401b5403dff6a30729070f00 |
|
MD5 | 17d5f58fad0cb6a18b3e22f7a17b3309 |
|
BLAKE2b-256 | 9ba06bdde951ed3adb68dd5ba88f213d318ca06a2d620d36183f99f4639bb45d |