Ajoutez vidéo intégrée à StreamField dans Wagtail

Notre point de départ est un site Wagtail fonctionnel avec un StreamField. Pour ajouter une vidéo au bloc StreamField, ajoutez la ligne suivante au champ StreamField de votre page:

('video', InlineVideoBlock()),

et importez InlineVideoBlock de blocks.py. On va créer ce bloc en utilisant StructBlock. Ajoutez à votre fichier blocks.py séparé (supprimez les doubles importations si nécessaire):

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'

Toutes les phrases lisibles par l'homme sont traduites à l'aide de gettext_lazy. EmbedBlock s'occupe de l'intégration de la vidéo. Comme tout bloc, il accepte un argument label. Le champ float sera utilisé dans le modèle pour positionner la vidéo à droite, à gauche ou au centre de la page; le paramètre size fonctionne de la même manière. Les deux sont ChoiceBlocks. L'argument icon reçoit la valeur media, qui affichera une icône vidéo.

Dans notre modèle, on a la ligne

{%  include "streamfield.html" %}

donc on doit seulement s'assurer que ce modèle inclus peut traiter la vidéo. Bien que la balise include_block puisse rendre la vidéo, on veut y ajouter un style, donc dans streamfield.html ajoutez (voir le référentiel pour le fichier complet):

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

On référence les champs individuels des StructBlocks via la propriété value; idem pour la propriété block_type. Le centrage d'une vidéo se fait via margin: auto dans notre fichier CSS, qui crée des marges égales des deux côtés de la vidéo:

.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;
}

Pour que la vidéo est réceptive à la fenêtre, on doit ajouter le paramètre suivant:

WAGTAILEMBEDS_RESPONSIVE_HTML = True

et ajoutez le style qui y est mentionné à notre fichier CSS:

.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%;
}

Notre page d'article est prête maintenant. Migrez la base de données pour incorporer les modifications du modèle. Rendez-vous ensuite dans les pages d'articles de l'admin de Wagtail et ajoutez une vidéo à une page existante ou créez-en une avec une vidéo.

Si vous souhaitez ajouter du code et des blocs de code à votre StreamField, lisez plus.

Ajouter vidéo intégrée à StreamField dans Wagtail