Skip to main content
Join the official 2019 Python Developers SurveyStart the survey!

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'
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/slick.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 type="text/javascript">var collapse = '{{ settings.uwkm_streamfields.streamfieldssettings.collapse_streamfields }}' == 'True';</script>
<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.

Files for uwkm-streamfields, version 1.4.0
Filename, size File type Python version Upload date Hashes
Filename, size uwkm_streamfields-1.4.0-py2.py3-none-any.whl (1.0 MB) File type Wheel Python version py2.py3 Upload date Hashes View hashes

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page