/uwkm_streamfields

A basic set of Wagtail Streamfields for fun and profit

Primary LanguageCSSBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

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'),
    ]
  1. Use some_content as such:

somepage.html

{% for block in page.some_content %}
    {{ block }}
{% endfor %}
  1. Change the settings as you like:

settings.py

BS_SIZE = 'sm'
STREAMFIELDS = '__all__'
EXCLUDE_STREAMFIELDS = []
  1. 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>
  1. 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