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
* FAB
* 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)
```python
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([
*get_headings(exclude=['h6']),
('paragraph', RichTextBlock(icon='pilcrow')),
('collection', Collection()),
*get_components(),
])
content_panels = MaterializePage.content_panels + [
MultiFieldPanel([
FieldPanel('author'),
ImageChooserPanel('background_image'),
ImageChooserPanel('user_image'),
], heading="Author Fields",),
FieldPanel('intro', classname="full"),
]
```
Template
```djangotemplate
{% 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>
</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">{{ page.author }}</h3>
</div>
<div class="col s12 m8">
<h1 class="{{ page.color }}-text scrollspy">Introduction</h1>
{% include_block page.body %}
</div>
</div>
<div class="row">
<h5>Posts</h5>
<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' %}
</div>
{% endfor %}
</div>
{% endblock %}
```
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
* FAB
* 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)
```python
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([
*get_headings(exclude=['h6']),
('paragraph', RichTextBlock(icon='pilcrow')),
('collection', Collection()),
*get_components(),
])
content_panels = MaterializePage.content_panels + [
MultiFieldPanel([
FieldPanel('author'),
ImageChooserPanel('background_image'),
ImageChooserPanel('user_image'),
], heading="Author Fields",),
FieldPanel('intro', classname="full"),
]
```
Template
```djangotemplate
{% 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>
</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">{{ page.author }}</h3>
</div>
<div class="col s12 m8">
<h1 class="{{ page.color }}-text scrollspy">Introduction</h1>
{% include_block page.body %}
</div>
</div>
<div class="row">
<h5>Posts</h5>
<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' %}
</div>
{% endfor %}
</div>
{% 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.2.tar.gz
(952.5 kB
view hashes)
Close
Hashes for wagtail_materializecss-0.0.2.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | e89fe907b4af49c7875fa1f44c4f67a871b7e9c5718e5986842b2a2fa0490b5a |
|
MD5 | 8c975d579bc0f41b4265d82c1500df98 |
|
BLAKE2b-256 | 519ad4200f3c59a688059d4d1cfc85ee85b479e769d8650a84e3429e0dd6df7a |