質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

885閲覧

wagtail (Django)でブロック化した画像が表示されない。(文字のみ表示)

Kazuhiro-ch

総合スコア85

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/07/28 01:27

###質問内容

wagtailを用いてウェブアプリケーションを開発しています。コンテンツ表示のために名前やリンクなどをブロック化し、コンテンツモデルにインポート、HTML出力を考えています。名前などほかの情報は表示されるのですが、画像のみ表示されません。エラーもなく、画像の名前も文字として表示されているので特に問題はないと考えています。試行錯誤しているのですがわからないので、皆様のお力を貸していただければと思います。

###コード

以下が該当するであろうコードです。上から順にフロントエンドに近づきます。
まずblocks.pyで入れ込みたい要素をブロック化、models.pyで出力のため(?)モデル化しています。article_block.htmlでブロックをHTMLにして、それをContentIndexのページに出すというプロセスです。

Python

1#blocks.py 2 3class ArticleBlock(blocks.StructBlock): 4 article_title = blocks.CharBlock(require=True, help_text='add content title') 5 thumbnail = ImageChooserBlock(required=True) 6 heading = blocks.TextBlock(require=True, help_text='add additional text') 7 article_link = blocks.URLBlock(reqired=True) 8 9 class Meta: 10 template = "streams/article_block.html" 11 icon = "edit" 12 label = "article"

python

1#models.py 2class ContentIndexPage(Page): 3 template = "contents/content_index.html" 4 5 header = models.ForeignKey( 6 HeaderPage, 7 null=True, 8 blank=True, 9 on_delete=models.SET_NULL, 10 related_name='+') 11 12 page_title = models.CharField(max_length=100, blank=False, null=True) 13 14 content = StreamField( 15 [ 16 ("article_info", blocks.ArticleBlock()) 17 ], 18 null=True, 19 blank=True, 20 ) 21 22 content_panels = Page.content_panels + [ 23 SnippetChooserPanel('header'), 24 FieldPanel('page_title'), 25 StreamFieldPanel("content"), 26 ] 27 28 def get_context(self, request, *args, **kwargs): 29 context = super().get_context(request, *args, **kwargs) 30 context["articles"] = ContentIndexPage.objects.live().public() 31 return context 32 33 class Meta: 34 verbose_name = "Content Page" 35 verbose_name_plural = "Content Pages" 36

html

1<!--article_block.html--> 2{% load wagtailimages_tags wagtailcore_tags %} 3 4<div class="container mb-sm-5 mt-sm-5"> 5 <div class="row"> 6 {% for article in articles %} 7 {% image self.thumbnail fill-300x200 as img %} 8 <img src="{{ img.article_link }}" alt="{{ img.alt }}" class="img-thumbnail"> 9 <a href="{{ self.article_link }}"> 10 <h2>{{ self.article_title }}</h2> 11 </a> 12 <p>{{ self.heading }}</p> 13 {% endfor %} 14 </div>

html

1<!--content_index.html--> 2{% extends "base.html" %} 3{% load wagtailcore_tags %} 4 5{% block content %} 6<div class="jumbotron"> 7 <div class="container"> 8 <div class="row"> 9 <div class="col-sm-12 text-center"> 10 <h1 class="display-4">{{ self.page_title }}</h1> 11 </div> 12 </div> 13 </div> 14</div> 15 16{% for block in page.content %} 17 {% include_block block %} 18{% endfor %} 19 20{% endblock content %}

###よろしくお願いいたします。
何度も自分の既存のファイルを移したり、ドキュメントをみて挑戦してみましたが、できませんでした。何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

self.article.article_titleで無事表示されました。

投稿2021/07/30 05:47

Kazuhiro-ch

総合スコア85

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問