Skip to main content

Wagtail CMS materialize css components and javascript items as blocks.

Project description

# wagtail_materializecss

Style your wagtail pages with materializecss!

Run the demo project to see how it in action.

### Includes
* Demo project to show how you may want to style a page
* Component blocks
* Badge
* Breadcrumb
* Button
* Card
* Collection
* Footer
* Icon
* links
* Navbar
* Preloader
* Scrollspy (table of contents)
* MaterializePage with base.html
* Default page variables to style the navbar and footer
* Additionally includes Abstract models Navbar and Footer
* Functions to get common components for StreamFields
* get_headings(exclude=None) - Return h1, h2, h3, h4, h5, h6 tags with scrollspy table of contetns support
* get_components(exclude=None) - Returns blocks for Card, Collection, Button, Icon, ...
* get_footer_blocks(exclude=None) - Returns common components that someone might want in a footer.

## Example Page

![Example Page](./example_page.PNG)

![Example Admin](example_admin.PNG)

from django.db import models
from wagtail.core.fields import StreamField, RichTextField
from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel, MultiFieldPanel, FieldRowPanel
from wagtail.images.edit_handlers import ImageChooserPanel
from wagtail.core.blocks import RichTextBlock

from wagtail_materializecss.models import MaterializePage, get_headings, get_components
from wagtail_materializecss.components import Collection

class BloggerHomePage(MaterializePage):
author = models.CharField(max_length=255)
background_image = models.ForeignKey('wagtailimages.Image', on_delete=models.SET_NULL, null=True, related_name='+')
user_image = models.ForeignKey('wagtailimages.Image', on_delete=models.SET_NULL, null=True, related_name='+')

body = StreamField([
('paragraph', RichTextBlock(icon='pilcrow')),
('collection', Collection()),

content_panels = MaterializePage.content_panels + [
], heading="Author Fields",),
FieldPanel('intro', classname="full"),

{% extends "wagtail_materializecss/base.html" %}
{% load static wagtailcore_tags wagtailimages_tags wagtail_materializecss_tags %}

{% block body_class %}template-bloggerhomepage{% endblock %}

{% block before_container %}
<div class="row">
{% image page.background_image original as page_image %}
<div class='hero-image' style="background-image: url('{{ page_image.url }}')"></div>
{% endblock %}

{% block content %}
<div class="row">
<div class="col s12 m4 right" style="margin-top: 1rem;">
{% image page.user_image fill-200x200 class="responsive-img circle center-object" %}
<h3 class="center-object {{ page.color }}-text">{{ }}</h3>
<div class="col s12 m8">
<h1 class="{{ page.color }}-text scrollspy">Introduction</h1>
{% include_block page.body %}

<div class="row">
<div class="divider"></div>
{% for post in blogpages %}
<div class="col s12 m6 l4">
{% make_link None "Go to Post" post.specific as post_link %}
{% make_card post.specific.title post.specific.description post_link size='small' %}
{% endfor %}
{% endblock %}

Project details

Download files

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

Source Distribution

wagtail_materializecss-0.0.6.tar.gz (953.4 kB view hashes)

Uploaded Source

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