Трясогузка Careousel с StructBlock

Я пытаюсь реализовать блок карусели в трясогузке, и это мои модели.

from wagtail.core.models import Page
from wagtail.core import blocks
from wagtail.admin.edit_handlers import FieldPanel, MultiFieldPanel, StreamFieldPanel
from wagtail.core.fields import StreamField
from wagtail.documents.blocks import DocumentChooserBlock
from wagtail.images.edit_handlers import ImageChooserPanel
from wagtail.images.blocks import ImageChooserBlock


class ImageCarouselBlock(blocks.StructBlock):
    image = ImageChooserBlock()
    cta_link = blocks.TextBlock(required=False)



class HomePage(Page):
    header_careousel = StreamField([
        ('image', ImageCarouselBlock()),
    ],
        null=True,
        blank=True
    )

    content_panels = Page.content_panels + [
        StreamFieldPanel("header_careousel"),
    ]

Все вышеперечисленное работает, но проблема во внешнем интерфейсе/tempalte, я не могу отобразить изображение. Я делаю это так:

 <div class="hero-header-slider">
    <div class="owl-carousel ltr" id="heroHeaderSlider">
        {% for image in self.header_careousel %}
        <div class="item">
            <img src="{{ image.value.image }}">
        </div>
        <a href="{{ image.value.cta_link}}">cta link</a>
        {% endfor %}
    </div>
</div>

и это не работает, и я пробовал много разных способов, как показано ниже:

<div class="hero-header-slider">
<div class="owl-carousel ltr" id="heroHeaderSlider">
    {% for image in self.header_careousel %}
    <div class="item">
        <img src="{{ image.value.image.url }}">
    </div>
    <a href="{{ image.value.cta_link}}">cta link</a>
    {% endfor %}
</div>

Здесь cta_link получает, но URL изображения не получает. Может ли кто-нибудь помочь мне, как я могу это сделать?


wagtail wagtail-streamfield wagtail-admin
person how recepes    schedule 13.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

image.value.image предоставит вам экземпляр модели Image трясогузки, которую можно рендерить с помощью {% image %} тег таким же образом, как и для изображения, определенного как поле ForeignKey на странице:

{% load wagtailimages_tags %}

<div class="hero-header-slider">
    <div class="owl-carousel ltr" id="heroHeaderSlider">
        {% for image in self.header_careousel %}
        <div class="item">
            {% image image.value.image fill-800x600 %} <!-- edit image dimensions as desired -->
        </div>
        <a href="{{ image.value.cta_link}}">cta link</a>
        {% endfor %}
    </div>
</div>
person gasman    schedule 13.01.2021