Wagtail 中的轮播图像问题

Question

我是 Django 的新手，也是 Wagtail 的初学者。

我正在建设的网站只有一个轮播，它在首页上。我在 models.py 中创建了以下两个模型：

class CarouselItem(Orderable):
    image = models.ForeignKey(
        'wagtailimages.Image',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )
    caption = models.CharField(max_length=255, blank=True)
    page = ParentalKey('HomePage', related_name='carousel_items')

    panels = [
    ImageChooserPanel('image'),
    FieldPanel('caption'),
    ]

class HomePage(Page):
    nila_intro = RichTextField(blank=True)

    content_panels = Page.content_panels + [
            InlinePanel('carousel_items', label="Carousel Items"),
            FieldPanel('nila_intro', classname="full"),
        ]

    class Meta:
        verbose_name = "Homepage"

为了正确设置模板标签，我参考了 Github 上的 Wagtail 演示站点，尝试复制已经完成的内容。

{% if page.carousel_items %}、{% for carousel_item in page.carousel_items.all %} 和 {{ carousel_item.caption }} 等基本操作工作正常。同样在管理员中，一切都完全符合我的预期。

然而，我在获取图像 and/or 图像 src url 时遇到问题。我已经尝试将以下内容添加到 src 但没有任何反应：{{ carousel_item.image.url }} 然后我尝试完全删除 <img> 标签并执行 {% image carousel_item.image alt="Slide Image" %} 它给了我一个错误。所以我真的不知道该怎么办！

我已经收录了{% load wagtailcore_tags wagtailimages_tags %}

也许我还不是 100% 清楚 ModelClusters 的工作原理？正如我所见，你们在演示中以不同方式管理轮播。

Answer 1

如 http://docs.wagtail.io/en/v1.10/topics/images.html 中所述，您需要在 {% image %} 标记上指定调整大小规则，例如 max-800x600，以指定图像插入模板时应如何调整大小。如果您根本不想调整图像大小，请使用 original:

{% image carousel_item.image original alt="Slide Image" %}

Answer 2

作为另一个 wagtail 学习者，Gasman 的答案看起来是正确的，文档封面图片使用得很好。此外，您的模型看起来不错或至少与我们的相似。

对我来说，我需要使用 'as' 语法来创建手动图像标签，以避免 "width" 和 "height" 属性似乎与旋转木马。即：

{% image theme.card_image fill-262x344 as photo %}
<img src="{{ photo.url }}" alt="" class="carousel-img"/>

Wagtail 中的轮播图像问题

Trouble with Carousel images in Wagtail

python

django

wagtail