Wagtail图像模板标签

Question

我正在使用Django-variant CMS Wagtail，我正在尝试为它构建自己的模板。

我可以将图像上传到Wagtail CMS中的富文本字段，如下所示：

在我的模板的html中，我希望能够调用在正文中上传的特定图像，以便我可以使用js以不同方式设置这些特定图像的样式。 也许像{{body.image}}？

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 %}

我现在迷路了，因为我无法弄清楚如何找到预先存在的标签字典（如果有的话）或创建一个没有弄乱views.py？或者将markdown安装到richtextfield并从那里开始工作会更直接吗？

我对html和css更加舒服，因此一种解决方案是简单地在html中编写所有内容并使用{{MEDIA_URL}}来调用特定的图像。但这似乎是一种使用Wagtail和Django的非智能方式。

Answer 1

目前，富文本编辑器不支持具有自定义属性的嵌入图像（如CSS类）。它也没有为richtext字段提供HTML源代码编辑器。

但是，如果您不需要将图像与富文本内联（而是在文本之前或之后），则可以使用指向使用{的表的InlinePanel将它们包含在页面模型中{1}}。然后，在你的模板中，你可以循环遍历多个图像并应用专门的CSS类。Wagtail demo project使用这个方法来创建一个图像轮播。你可以找到关于更一般的战术的一些解释。在Editing API中使用ParentalKey。