How to implement thumbnail images into Wagtail’s ModelViewSet?

Is it still possible to implement a thumbnail image in a ModelViewSet listing view? Here is an example for a NewsPost model.

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

The PageListingViewSet has columns with all kinds of columns for different model types. But also no "ImageColumn" to display a thumbnail image. I miss the ThumbnailMixin that the Wagtail ModelAdmin app provided, which is now deprecated. Does anybody know a workaround?

Solution

This is the method I use.

from wagtail.admin.ui.tables import TitleColumn
from django.utils.safestring import mark_safe

class ImageColumn(TitleColumn):
    def get_cell_context_data(self, instance, parent_context):
        context = super().get_cell_context_data(instance, parent_context)
        try:
            context['value'] = mark_safe(
                context['value'].get_rendition(
                    'height-50').img_tag({'class': "show-transparency"})
            )
        except:
            context['value'] = mark_safe(
                '''
                <svg class="icon icon-image" height="50px" 
                    viewBox="0 0 24 24" aria-hidden="true">
                    <use href="#icon-image"></use>
                </svg>
                '''
            )
        return context

Example in a snippet viewset:

class ProductViewSet(SnippetViewSet):
    model = Product
    list_display = ["title", ImageColumn("image"), "get_department_subcategory", "sku", UpdatedAtColumn()]

You can't place it in the first column unfortunately, Wagtail doesn't allow any custom columns in that position - it'll render the view but with no action menu on the list items.

I'm inheriting TitleColumn so that the image is clickable in a chooser view.

If there's an error (or if the image field is empty), it'll return the generic Wagtail image icon.

The column returns the html rather than data/template to keep it self-contained.