How can I set a fixed iframe height for custom preview sizes in Wagtail’s page preview?

I’m extending Wagtail’s built-in preview sizes to include some additional device configurations. Wagtail natively supports device_width, but not device_height. I’d like to define both width and height for the preview iframe instead of having it default to height: 100%.

Here’s an example of my mixin that extends the default preview sizes:

from wagtail.models import Page, PreviewableMixin
from django.utils.translation import gettext_lazy as _

class ExtendedPreviewSizesMixin(PreviewableMixin):
    """Extend the default Wagtail preview sizes without replacing them."""

    @property
    def preview_sizes(self):
        base_sizes = super().preview_sizes
        extra_sizes = [
            {
                "name": "12_inch",
                "icon": "hmi-12",
                "device_width": 1280,
                "device_height": 800,  # not supported by Wagtail by default
                "label": _("Preview in 12-inch screen"),
            },
            {
                "name": "24_inch",
                "icon": "hmi-24",
                "device_width": 1920,
                "label": _("Preview in 24-inch screen"),
            },
        ]
        return base_sizes + extra_sizes

    @property
    def preview_modes(self):
        base_modes = super().preview_modes
        extra_modes = [
            ("custom", _("Custom Preview")),
            ("custom_with_list", _("Custom Preview with List")),
        ]
        return base_modes + extra_modes

    def get_preview_template(self, request, mode_name):
        if mode_name == "custom":
            return "previews/preview_custom.html"
        if mode_name == "custom_with_list":
            return "previews/preview_custom_with_list.html"
        return "previews/default_preview.html"

By default, Wagtail sets the preview iframe width using:

width: calc(var(--preview-iframe-width) * var(--preview-width-ratio));

There doesn’t seem to be an equivalent variable for height.

Question: Is there a way to set a fixed iframe height for custom preview sizes using Python alone (e.g., via the mixin or Wagtail hooks)? Or do I need to inject JavaScript or override the admin CSS to adjust the preview iframe height dynamically?

Вернуться на верх