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 mode

Solution 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" %}

Solution 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"/>