Trouble with Carousel images in Wagtail

问题

I'm relatively new to Django and a complete beginner in Wagtail.

The website I am building only has one carousel and it is on the homepage. I have created the following two models in 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"

In order to get the template tags right I referred to the Wagtail Demo site on Github to try and replicate what has already been done.

Basic operations such as {% if page.carousel_items %}, {% for carousel_item in page.carousel_items.all %} and {{ carousel_item.caption }} work just fine. Also in the admin everything is exactly as I intended.

I am however having issues getting the images and/or image src url's to show. I have tried both adding the following to the src and nothing happened: {{ carousel_item.image.url }} and then I tried removing the <img> tag altogether and doing a {% image carousel_item.image alt="Slide Image" %} it gave me an error. So I'm not really sure what to do!

I have included {% load wagtailcore_tags wagtailimages_tags %}

Maybe I'm not 100% clear on how ModelClusters work yet? As I saw you guys have managed carousels differently on your demo.

回答1:

As documented at http://docs.wagtail.io/en/v1.10/topics/images.html, you need to specify a resize rule such as max-800x600 on the {% image %} tag to specify how the image should be resized when inserted into the template. If you don't want the image to be resized at all, use original:

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

回答2:

As another wagtail learner, Gasman's answer looks correct and the docs cover image use pretty well. Also your model looks fine or at least similar to ours.

For me, I needed to use the 'as' syntax to create a manual image tag to avoid the "width" and "height" attributes that seemed to mess with some image responsiveness in the carousel. That is:

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

来源：https://stackoverflow.com/questions/43898676/trouble-with-carousel-images-in-wagtail

标签

python

django

wagtail