質問内容
wagtailを用いてウェブアプリケーションを開発しています。コンテンツ表示のために名前やリンクなどをブロック化し、コンテンツモデルにインポート、HTML出力を考えています。名前などほかの情報は表示されるのですが、画像のみ表示されません。エラーもなく、画像の名前も文字として表示されているので特に問題はないと考えています。試行錯誤しているのですがわからないので、皆様のお力を貸していただければと思います。
コード
以下が該当するであろうコードです。上から順にフロントエンドに近づきます。
まずblocks.pyで入れ込みたい要素をブロック化、models.pyで出力のため(?)モデル化しています。article_block.htmlでブロックをHTMLにして、それをContentIndexのページに出すというプロセスです。
何度も自分の既存のファイルを移したり、ドキュメントをみて挑戦してみましたが、できませんでした。何卒よろしくお願いいたします。
blocks.py
class ArticleBlock(blocks.StructBlock):
article_title = blocks.CharBlock(require=True, help_text='add content title')
thumbnail = ImageChooserBlock(required=True)
heading = blocks.TextBlock(require=True, help_text='add additional text')
article_link = blocks.URLBlock(reqired=True)
class Meta:
template = "streams/article_block.html"
icon = "edit"
label = "article"
models.py
class ContentIndexPage(Page):
template = "contents/content_index.html"
header = models.ForeignKey(
HeaderPage,
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name='+')
page_title = models.CharField(max_length=100, blank=False, null=True)
content = StreamField(
[
("article_info", blocks.ArticleBlock())
],
null=True,
blank=True,
)
content_panels = Page.content_panels + [
SnippetChooserPanel('header'),
FieldPanel('page_title'),
StreamFieldPanel("content"),
]
def get_context(self, request, *args, **kwargs):
context = super().get_context(request, *args, **kwargs)
context["articles"] = ContentIndexPage.objects.live().public()
return context
class Meta:
verbose_name = "Content Page"
verbose_name_plural = "Content Pages"
article_block.html
{% load wagtailimages_tags wagtailcore_tags %}
<div class="container mb-sm-5 mt-sm-5">
<div class="row">
{% for article in articles %}
{% image self.thumbnail fill-300x200 as img %}
<img src="{{ img.article_link }}" alt="{{ img.alt }}" class="img-thumbnail">
<a href="{{ self.article_link }}">
<h2>{{ self.article_title }}</h2>
</a>
<p>{{ self.heading }}</p>
{% endfor %}
</div>
content_index.html
{% extends "base.html" %}
{% load wagtailcore_tags %}
{% block content %}
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h1 class="display-4">{{ self.page_title }}</h1>
</div>
</div>
</div>
</div>
{% for block in page.content %}
{% include_block block %}
{% endfor %}
{% endblock content %}