Problème avec les images Carousel dans Wagtail

Question

Je suis relativement nouveau à Django et un débutant complet dans Wagtail.

Le site que je construis ne dispose que d'un carrousel et il est sur la page d'accueil. J'ai créé les deux modèles suivants dans 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" 

Afin d'obtenir les balises de modèle à droite je faisais référence au site de démonstration Bergeronnette sur Github pour essayer de reproduire ce qui a déjà été fait. Les opérations de base telles que {% if page.carousel_items %}, {% for carousel_item in page.carousel_items.all %} et {{ carousel_item.caption }} fonctionnent très bien. Aussi dans l'admin tout est exactement comme je l'ai prévu.

J'ai cependant des problèmes pour afficher les images et/ou l'image src url. J'ai essayé les deux ajoutant le suivant au src et rien ne s'est passé: {{carousel_item.image.url}} et puis j'ai essayé de supprimer complètement la balise <img> et de faire un {% image carousel_item.image alt="Slide Image" %} cela m'a donné une erreur. Donc je ne suis pas vraiment sûr de ce qu'il faut faire!

J'ai inclus {% load wagtailcore_tags wagtailimages_tags %}

Peut-être que je ne suis pas 100% clair sur la façon dont ModelClusters fonctionnent encore? Comme je vous ai vu les gars ont géré les manèges différemment sur votre démo.

Answer 1

Comme documenté à http://docs.wagtail.io/en/v1.10/topics/images.html, vous devez spécifier une règle de redimensionnement telle que max-800x600 sur la balise {% image %} pour spécifier comment l'image doit être redimensionnée lorsqu'elle est insérée dans le modèle. Si vous ne voulez pas que l'image soit redimensionnée à tous, utilisez original:

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

Answer 2

Comme autre apprenant bergeronnette, la réponse de Gasman semble correcte et la documentation couvre l'utilisation d'images assez bien. Aussi votre modèle a l'air bien ou au moins semblable au nôtre. Pour moi, j'avais besoin d'utiliser la syntaxe 'as' pour créer une balise d'image manuelle afin d'éviter les attributs "width" et "height" qui semblaient perturber la réactivité de l'image dans le carrousel. C'est:

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