uwkm-streamfields 1.4.0
Wagtail Bootstrap Streamfields
License: MIT
Keywords: wagtail cms streamfields bootstrap uwkm

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