CODEWITHSUNDEEP
djangodjango-templateswagtail
moshushi
moshushi

Reputation: 391

Wagtail Image template tags

I'm using Django-variant CMS Wagtail and am trying to build my own templates for it.

I can upload images into the rich text field in Wagtail's CMS as shown:

enter image description here

In my template's html, I would like to be able to call specific images uploaded in the body so that I can style those specific images differently with js. perhaps something like {{ body.image }}?

the html:

{% extends 'wagweb/base.html' %}

{% load rich_text static compress cache image_tags pageurl %}

{% block content %}
<div class="box">
<article class ="content">

        {{ self.body | richtext }}
</article>
</div>

{% endblock %}

I'm lost at this point, as I can't figure out how to find the pre-existing tag dictionary (if there is any) or to create one without messing with the views.py? Or would it be more straight-forward to install markdown into the richtextfield and work from there?

I'm tons more comfortable with html and css, so one solution is to simply write everything in html and use {{ MEDIA_URL }} to call the specific images. But that seems like an unintelligent way to use Wagtail and Django.

Upvotes: 1

Views: 2150

Answers (1)

cowbellemoo
cowbellemoo

Reputation: 425

Currently the rich text editor doesn't support embedded images with custom attributes (like CSS classes). It also doesn't provide a HTML source editor for the richtext field.

However, if you don't need to have the images inline with the rich text (but rather before or after the text, you could include them in your page model using InlinePanel pointing to table which uses a ParentalKey. Then, in your templates, you could loop through multiple images and apply the specialized CSS classes. The Wagtail demo project uses this method to create an image carousel. You can find some explanation on the more general tactic of using ParentalKey/InlinePanel here in the Editing API.

Upvotes: 2

Related Questions