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?

The only option is to inject JS or CSS to override how the preview panel works. The built-in preview_sizes customization only supports a device_width, the height always uses all available space in the viewport.

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