ImageList

See: https://material.io/components/image-lists

Image lists display a collection of images in an organized grid.

class materialweb.tags.imagelist.ImageList(*args, **kwargs)

Provides template tag: ImageList.

{% load materialweb %}

{% ImageList mode="masonry" class="my-masonry-image-list" %}
  {% ImageList_Item image="..." %}
    {% trans "Text Label" %}
  {% endImageList_Item %}
{% endImageList %}

Example output:

<ul class="mdc-image-list mdc-image-list--masonry my-masonry-image-list">
  <li class="mdc-image-list__item">
    <img class="mdc-image-list__image" src="...">
    <div class="mdc-image-list__supporting">
      <span class="mdc-image-list__label">Text label</span>
    </div>
  </li>
</ul>

WANT_CHILDREN = True

Template Tag needs closing end tag.

MODES = ('default', 'masonry')

Available variants.

DEFAULT_TAG = 'ul'

Rendered HTML tag.

class materialweb.tags.imagelist.ListItem(*args, **kwargs)

Provides template tag: ImageList_Item.

Example usage:

{% load materialweb %}

{% ImageList_Item image="..." %}
  {% trans "Text Label %}
{% endImageList_Item %}

Example output:

<li class="mdc-image-list__item">
  <div class="mdc-image-list__image-aspect-container">
    <img class="mdc-image-list__image" src="...">
  </div>
  <div class="mdc-image-list__supporting">
    <span class="mdc-image-list__label">Text label</span>
  </div>
</li>

WANT_CHILDREN = True

Template Tag needs closing end tag.

NODE_PROPS = ('image', 'reversed')

Extended Template Tag arguments.

DEFAULT_TAG = 'li'

Rendered HTML tag.