Skip to main content

Wagtail Bootstrap Streamfields

Project description

UWKM WAGTAIL STREAMFIELDS
=========================

This is a set of pre-defined streamfields for Wagtail. It provides:

- accordions
- background image with text overlay
- buttons
- call to action buttons
- colored block
- divider
- image gallery
- bootstrap grid
- header
- icon blocks
- image blocks
- quotation lists
- raw html block
- slider
- slogans
- tabs
- tables
- text fields
- youtube video blocks

This packages comes with a set of html templates, which you might want to tweak
or modify.

Installing uwkm_streamfields
============================

1. Install the package using pip: `pip install uwkm_streamfields`.
2. Add `wagtail.contrib.table_block` to `INSTALLED_APPS` in your project settings.
3. Add `uwkm_streamfields` to `INSTALLED_APPS` in your project settings.
4. Add `from uwkm_streamfields.settings.base import *` to your project settings.
5. Add import `from uwkm_streamfields.blocks import GridBlock` to your project models.
6. Use the `GridBlock` as such:

models.py
::
class SomePage(Page):
some_content = StreamField(
[('fixed_width', blocks.ListBlock(
GridBlock(),
template = 'streamfields/fixed_grid.html',
icon='fa-th-large',
label='Boxed'))
,('full_width', blocks.ListBlock(
GridBlock(),
template = 'streamfields/full_grid.html',
icon='fa-th',
label='Full'))
],
null = True,
blank = True
)

content_panels = Page.content_panels + [
StreamFieldPanel('some_content'),
]

7. Use `some_content` as such:

somepage.html
::
{% for block in page.some_content %}
{{ block }}
{% endfor %}

8. Change the settings as you like:

settings.py
::
BS_SIZE = 'sm'

CP_COLORS = [
'#0099ff',
'#00cc00',
'#ffff00',
'#ff6600',
'#cc0000',
'#ffffff',
'#000000',
]

STREAMFIELDS = '__all__'
EXCLUDE_STREAMFIELDS = []


9. Make sure you atleast have the following javascripts/stylesheets in your base.html

base.html
::
{# Global stylesheets #}
<link href="{% static 'css/bootstrap.min.css' %}" type="text/css" rel="stylesheet" />
<link href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}" type="text/css" rel="stylesheet" />
<link href="{% static 'css/streamfields.css' %}" type="text/css" rel="stylesheet" />
<link href="{% static 'css/owl.carousel.css' %}" type="text/css" rel="stylesheet" />
<link href="{% static 'css/revolution_slider.css' %}" type="text/css" rel="stylesheet" />

{# Global javascript #}
<script type="text/javascript" src="{% static 'js/jquery-2.2.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/isotope.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/owl.carousel.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/magnific-popup.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/revolution.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tools.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/revolution_slider.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/custom.js' %}"></script>


10. Extra:

add to templates/wagtailadmin/admin_base.html (if overridden)
::
{% block css %}
...
<link rel="stylesheet" href="{% static 'css/custom-admin.css' %}" type="text/css" />
{% endblock %}


{% block js %}
...
<script src="{% static 'js/custom-admin.js' %}"></script>
<script src="{% static 'js/colorPicker.js' %}"></script>
...
{% endblock %}


UWKM, 2017


Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distributions

No source distribution files available for this release.See tutorial on generating distribution archives.

Built Distribution

uwkm_streamfields-1.2.3-py2.py3-none-any.whl (967.2 kB view hashes)

Uploaded Python 2 Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page