如何在Wagtail的ModelViewSet中实现缩略图展示？

嘿，这个问题我之前也碰到过，毕竟ModelAdmin的ThumbnailMixin下架之后确实有点不习惯，不过咱们完全可以自己动手搞定，有两个亲测有效的方案，给你参考！

方法一：自定义缩略图列类 #

这个方法比较灵活，适合需要在多个ViewSet里复用的场景。我们可以自己写一个支持缩略图的列类，就像原来的ThumbnailMixin那样：

from wagtail.admin.ui.tables import Column
from wagtail.images.models import Image
from django.utils.html import format_html

class ThumbnailColumn(Column):
    def __init__(self, image_field_name, rendition_spec='fill-50x50', **kwargs):
        super().__init__(**kwargs)
        self.image_field_name = image_field_name  # 模型中图片字段的名称
        self.rendition_spec = rendition_spec  # 缩略图规格，可自定义

    def render_cell(self, instance, table):
        # 获取当前实例的图片对象
        image = getattr(instance, self.image_field_name, None)
        if isinstance(image, Image):
            # 生成指定规格的图片缩略图
            rendition = image.get_rendition(self.rendition_spec)
            return format_html(
                '<img src="{}" alt="缩略图" style="max-width: 50px; max-height: 50px; border-radius: 4px;">',
                rendition.url
            )
        # 如果没有图片，返回空内容
        return ''

接下来，把这个自定义列加到你的NewsPostViewSet的list_display里就行了，记得替换成你模型里实际的图片字段名：

class NewsPostViewSet(ModelViewSet):
    model = NewsPost
    list_display = [
        ThumbnailColumn('image', label='缩略图'),  # 这里的'image'要改成你的NewsPost模型里的图片字段名
        "title", "category", "date_start", "date_end", "live"
    ]
    add_to_admin_menu = True
    icon = "calendar-alt"
    menu_label = "News"

方法二：在模型中添加缩略图方法 #

如果只是单个模型需要这个功能，也可以直接在NewsPost模型里加一个自定义方法，返回缩略图的HTML代码：

from django.db import models
from wagtail.images.models import Image
from django.utils.html import format_html

class NewsPost(models.Model):
    # 你的其他字段...
    title = models.CharField(max_length=255)
    category = models.ForeignKey('Category', on_delete=models.CASCADE)
    image = models.ForeignKey(Image, on_delete=models.SET_NULL, null=True, blank=True, related_name='+')
    date_start = models.DateField()
    date_end = models.DateField()
    live = models.BooleanField(default=False)

    def get_thumbnail(self):
        if self.image:
            # 生成你需要的缩略图规格，这里用的是fill-50x50
            rendition = self.image.get_rendition('fill-50x50')
            return format_html(
                '<img src="{}" alt="{}的缩略图" style="max-width: 50px; max-height: 50px;">',
                rendition.url, self.title
            )
        return '无图片'
    # 给这个方法指定在列表中显示的列名
    get_thumbnail.short_description = '缩略图'

然后在ViewSet的list_display里直接用这个方法名：

class NewsPostViewSet(ModelViewSet):
    model = NewsPost
    list_display = ["get_thumbnail", "title", "category", "date_start", "date_end", "live"]
    add_to_admin_menu = True
    icon = "calendar-alt"
    menu_label = "News"

这两种方法都是基于Wagtail原生的图片处理功能，不用担心兼容性问题，而且你可以根据自己的需求调整缩略图的尺寸、样式，比如把fill-50x50改成width-100或者其他Wagtail支持的规格。

备注：内容来源于stack exchange，提问作者Fuchsi