遍历 Wagtail Streamfield 项目
Looping through Wagtail Streamfield Items
我正在尝试创建一个索引页,其中包含指向 Wagtail 中多个照片库的链接。 GalleryIndexPage 模型如下所示:
class GalleryIndexPage(Page):
subpage_types = ['home.GalleryPage']
gallery_thumb = StreamField ([
('cover_photo', ImageChooserBlock()),
('title', blocks.CharBlock()),
('link', URLBlock()),
])
content_panels = Page.content_panels + [
StreamFieldPanel('gallery_thumb'),
]
我很难将其渲染到模板中,每组数据周围都有 "gallery-item" class。我意识到它目前正在循环并向 Streamfield 内的每个块添加 class of "gallery-item",而不是围绕整个 Streamfield 集。这是我的模板代码:
<div class="photo-gallery">
{% for block in self.gallery_thumb %}
<div class="gallery-item">
{% if block.block_type == 'cover_photo' %}
<div class="thumb">
{% image block.value fill-200x150 %}
</div>
{% endif %}
{% if block.block_type == 'title' %}
<div class="title">
<p>{{ block.value }}</p>
</div>
{% endif %}
{% if block.block_type == 'link' %}
<div class="link">
<a href="{{ block.value }}">View Gallery</a>
</div>
{% endif %}
</div>
{% endfor %}
还有其他方法可以解决这个问题吗?
编辑:
我在我的 StreamField 中添加了一个 StructBlock,如下所示:
class GalleryIndexPage(Page):
subpage_types = ['home.GalleryPage']
gallery = StreamField ([
('gallery_item', blocks.StructBlock([
('cover_photo', ImageChooserBlock()),
('title', blocks.CharBlock()),
('link', URLBlock()),
], icon='user'))
])
content_panels = Page.content_panels + [
StreamFieldPanel('gallery'),
]
我不确定如何在我的模板中访问这些值?这是我目前所拥有的:
<div class="photo-gallery">
{% for block in self.gallery %}
<div class="gallery-item">
<div class="thumb">
{% image self.cover_photo width-200 %}
</div>
<div class="title">
<p>{{ self.title }}</p>
</div>
<div class="link">
<a href="{{ self.link }}">>> View Gallery</a>
</div>
</div>
{% endfor %}
</div>
您想要的似乎是一个包含图片、标题和 link 的 gallery_item 块。您可以通过使用更简单的块类型创建自己的块类型来做到这一点。参见 http://docs.wagtail.io/en/v1.5.3/topics/streamfield.html#structural-block-types
你可以这样做:
('gallery_item', blocks.StructBlock([
('title', blocks.CharBlock()),
('link', blocks.URLBlock()),
('image', ImageChooserBlock()),
], icon='xyz'))
您也可以将其创建为 Python class,这是我通常喜欢做的,这在我 link 编辑到的部分的最后一部分中介绍以上。
您可以为此块创建自己的模板。
在模板中,每个块都有两个属性,value
和 block_type
。例如,您可以使用 {{ self.title.value }}
.
访问 title
见http://docs.wagtail.io/en/v1.5.3/topics/streamfield.html#template-rendering
我能够使用以下代码访问模板中 StructBlock 的值:
<div class="photo-gallery">
{% for block in self.gallery %}
<div class="gallery-item">
<div class="thumb">
{% image block.value.cover_photo fill-200x150 %}
</div>
<div class="title">
<p>{{ block.value.title }}</p>
</div>
<div class="link">
<a href="{{ block.value.link }}">>>View Gallery</a>
</div>
</div>
{% endfor %}
非常感谢您的帮助!
我正在尝试创建一个索引页,其中包含指向 Wagtail 中多个照片库的链接。 GalleryIndexPage 模型如下所示:
class GalleryIndexPage(Page):
subpage_types = ['home.GalleryPage']
gallery_thumb = StreamField ([
('cover_photo', ImageChooserBlock()),
('title', blocks.CharBlock()),
('link', URLBlock()),
])
content_panels = Page.content_panels + [
StreamFieldPanel('gallery_thumb'),
]
我很难将其渲染到模板中,每组数据周围都有 "gallery-item" class。我意识到它目前正在循环并向 Streamfield 内的每个块添加 class of "gallery-item",而不是围绕整个 Streamfield 集。这是我的模板代码:
<div class="photo-gallery">
{% for block in self.gallery_thumb %}
<div class="gallery-item">
{% if block.block_type == 'cover_photo' %}
<div class="thumb">
{% image block.value fill-200x150 %}
</div>
{% endif %}
{% if block.block_type == 'title' %}
<div class="title">
<p>{{ block.value }}</p>
</div>
{% endif %}
{% if block.block_type == 'link' %}
<div class="link">
<a href="{{ block.value }}">View Gallery</a>
</div>
{% endif %}
</div>
{% endfor %}
还有其他方法可以解决这个问题吗?
编辑: 我在我的 StreamField 中添加了一个 StructBlock,如下所示:
class GalleryIndexPage(Page):
subpage_types = ['home.GalleryPage']
gallery = StreamField ([
('gallery_item', blocks.StructBlock([
('cover_photo', ImageChooserBlock()),
('title', blocks.CharBlock()),
('link', URLBlock()),
], icon='user'))
])
content_panels = Page.content_panels + [
StreamFieldPanel('gallery'),
]
我不确定如何在我的模板中访问这些值?这是我目前所拥有的:
<div class="photo-gallery">
{% for block in self.gallery %}
<div class="gallery-item">
<div class="thumb">
{% image self.cover_photo width-200 %}
</div>
<div class="title">
<p>{{ self.title }}</p>
</div>
<div class="link">
<a href="{{ self.link }}">>> View Gallery</a>
</div>
</div>
{% endfor %}
</div>
您想要的似乎是一个包含图片、标题和 link 的 gallery_item 块。您可以通过使用更简单的块类型创建自己的块类型来做到这一点。参见 http://docs.wagtail.io/en/v1.5.3/topics/streamfield.html#structural-block-types
你可以这样做:
('gallery_item', blocks.StructBlock([
('title', blocks.CharBlock()),
('link', blocks.URLBlock()),
('image', ImageChooserBlock()),
], icon='xyz'))
您也可以将其创建为 Python class,这是我通常喜欢做的,这在我 link 编辑到的部分的最后一部分中介绍以上。
您可以为此块创建自己的模板。
在模板中,每个块都有两个属性,value
和 block_type
。例如,您可以使用 {{ self.title.value }}
.
title
见http://docs.wagtail.io/en/v1.5.3/topics/streamfield.html#template-rendering
我能够使用以下代码访问模板中 StructBlock 的值:
<div class="photo-gallery">
{% for block in self.gallery %}
<div class="gallery-item">
<div class="thumb">
{% image block.value.cover_photo fill-200x150 %}
</div>
<div class="title">
<p>{{ block.value.title }}</p>
</div>
<div class="link">
<a href="{{ block.value.link }}">>>View Gallery</a>
</div>
</div>
{% endfor %}
非常感谢您的帮助!