Wagtail 이미지

wagtail의 이미지 처리에 대해서 공부해보려고 한다.

 

models.py

class CardPage(Page):
    date = models.DateField("Card date")
    intro = models.CharField(max_length=250)
    body = RichTextField(blank=True)
    categories = ParentalManyToManyField('card.CardCategory', blank=True)

    # ... (Keep the main_image method and search_fields definition)

    def main_image(self):
        gallery_item = self.gallery_images.first()
        if gallery_item:
            return gallery_item.image
        else:
            return None

    content_panels = Page.content_panels + [
        MultiFieldPanel([
            FieldPanel('date'),
            FieldPanel('categories', widget=forms.CheckboxSelectMultiple),
        ], heading="Card information"),
        FieldPanel('intro'),
        FieldPanel('body'),
        InlinePanel('gallery_images', label="Gallery images"),
    ]


class CardPageGalleryImage(Orderable):
    page = ParentalKey(CardPage, on_delete=models.CASCADE, related_name='gallery_images')
    image = models.ForeignKey(
        'wagtailimages.Image', on_delete=models.CASCADE, related_name='+'
    )
    caption = models.CharField(blank=True, max_length=250)

    panels = [
        ImageChooserPanel('image'),
        FieldPanel('caption'),
    ]

위와 같은 Model이 있다고 해보자. CardPageGalleryImage는 Orderable로 CardPage에서 여러개를 추가할 수 있는 Clusterable 모델이다. 

 

def main_image에서는 여러개의 갤러리 이미지 중, 첫번 째 이미지만 가져와서 return 해준다. 

 

 

card_index_page.html

{% load wagtailimages_tags %}

<div class="container pt-3 pb-3">
                <div class="card" style="width: 18rem; text-align: center;">
                    {% image card.main_image width-400 as tmp_photo %}
                    <img src="{{ tmp_photo.url }}" width="{{ tmp_photo.width }}" height="{{ tmp_photo.height }}" alt="{{ tmp_photo.alt }}" class="my-custom-class" />
                </div>
            {% endwith %}
        {% endfor %}
    </div>

간단하게 image를 어떻게 template에서 표현하는지 살펴보자.

Wagtail에서는 template에 image를 사용할 때 {% load wagtailimages_tags %}를 상단에 추가해줘야한다. 

그리고 {% image [image] [resize-rule] as '줄임말' %} 형식으로 작성한다.