Wagtail中轮播图像的问题答案

【问题标题】：Trouble with Carousel images in WagtailWagtail中轮播图像的问题
【发布时间】：2017-05-10 17:00:29
【问题描述】：

我对 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 }} 等基本操作可以正常工作。同样在管理员中，一切都完全符合我的预期。

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

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

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

【问题讨论】：

标签： python django wagtail

【解决方案1】：

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

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

【讨论】：

该死，我怎么错过了？！？！谢谢！至于我设置轮播模型的方式，本身就没有什么问题吗？我只是觉得有更好的方法吗？

【解决方案2】：

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

对我来说，我需要使用“as”语法来创建手动图像标签，以避免“宽度”和“高度”属性似乎会干扰轮播中的某些图像响应性。那就是：

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

【讨论】：