华泰旋转木马图像问题

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 }}等基本操作工作正常。同样在管理员一切都是我想要的。在

但是，在获取要显示的图像和/或图像srcurl时遇到问题。我尝试将以下内容添加到src中，但没有任何结果：{carousel_item.image.url}}然后我尝试删除<img>标记，并做了一个{% image carousel_item.image alt="Slide Image" %}这给了我一个错误。所以我真的不知道该怎么办！在

我已经包括{% load wagtailcore_tags wagtailimages_tags %}

也许我还不完全清楚ModelClusters是如何工作的？我看到你们在演示中用不同的方式管理旋转木马。在

Answer 1

作为另一个学习wagtail的人，Gasman的答案看起来是正确的，文档封面图像的使用也很好。而且你的模型看起来不错，或者至少和我们的差不多。在

对我来说，我需要使用'as'语法来创建一个手动的图像标记，以避免“width”和“height”属性，这两个属性似乎会扰乱carousel中的一些图像响应能力。即：

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

Answer 2

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

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