Embedded video toevoegen aan StreamField in Wagtail

Ons uitgangspunt is een werkende Wagtail site met een StreamField. Om video toe te voegen aan het StreamField-blok, voeg de volgende regel toe aan het StreamField-veld van de pagina:

('video', InlineVideoBlock()),

en importeer InlineVideoBlock van blocks.py. We zullen dit blok maken met StructBlock. Voeg toe aan het separate blocks.py-bestand (verwijder dubbele imports indien nodig):

from django.utils.translation import gettext_lazy as _
from wagtail.core import blocks
from wagtail.core.blocks import CharBlock
from wagtail.embeds.blocks import EmbedBlock

class InlineVideoBlock(blocks.StructBlock):
    video = EmbedBlock(label=_("Video"))
    caption = CharBlock(required=False, label=_("Caption"))
    float = blocks.ChoiceBlock(
        required=False,
        choices=[('right', _("Right")), ('left', _("Left")), ('center', _("Center"))],
        default='right',
        label=_("Float"),
    )
    size = blocks.ChoiceBlock(
        required=False,
        choices=[('small', _("Small")), ('medium', _("Medium")), ('large', _("Large"))],
        default='small',
        label=_("Size"),
    )

    class Meta:
        icon = 'media'

Alle voor mensen leesbare strings worden vertaald met gettext_lazy. Het EmbedBlock zorgt voor het insluiten van video. Zoals elk blok accepteert het een argument label. Het veld float wordt in de template gebruikt om de afbeelding of video rechts, links of in het midden van de pagina te plaatsen; de parameter size werkt op dezelfde manier. Beide zijn ChoiceBlocks. Het pictogramargument krijgt de waarde media, die een videopictogram zal weergeven.

In onze template hebben we de regel

{%  include "streamfield.html" %}

dus we hoeven er alleen maar voor te zorgen dat deze meegeleverde template geschikt is voor video. Hoewel de include_block-tag video kan renderen, willen we er wat styling aan toevoegen, dus voeg in streamfield.html toe (zie repository voor het volledige bestand):

<div class="block-{{ block.block_type }}-{{ block.value.float }} block-{{ block.value.size }}">
     {% include_block block.value.video %}
     {{ block.value.caption }}
</div>

We verwijzen naar de individuele velden van de StructBlocks via de eigenschap value; hetzelfde voor de eigenschap block_type. Het centreren van een video gebeurt via margin: auto in ons CSS-bestand, dat aan beide zijden van de video gelijke marges creëert:

.block-video-center {
    display: grid;
    /* margin auto works here because embed adapts to size of container */
    margin: auto;
    overflow: hidden;
    font: italic 12px Georgia, serif;
}

Om video responsief te maken, moeten we de volgende instelling toevoegen:

WAGTAILEMBEDS_RESPONSIVE_HTML = True

en de styling die daar wordt genoemd toevoegen aan ons CSS-bestand:

.rich-text img {
    max-width: 100%;
    height: auto;
}
.responsive-object {
    position: relative;
}
.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Onze artikelpagina is nu klaar. Migreer de database om de modelwijzigingen op te nemen. Ga dan naar de artikelpagina's in Wagtail's admin en voeg video toe aan een bestaande pagina of maak een nieuwe met een video.

Als je code en codeblokken aan je StreamField wilt toevoegen, lees dan verder.