Получение url изображения на сайте django/wagtail

У меня есть сайт-трясогузка, где страницы блога отображаются с помощью циклов через потоковое поле (в котором каждый блок может иметь изображение, заголовок и некоторый текст):


<div class="col-md-8 mx-auto px-auto">
    <div class="conundrum mb-3">{{ page.category }}</div>
    <h1>{{ page.title }}</h1>
    <p class="meta">{{ page.date }}</p>
    <div class="intro my-4 py-4">{{ page.intro }}</div>

    {% for block in page.content %}
        <div class="pb-4">
        {% image block.value.image fill-1000x500 class='blog_image' %}
        <h2 class="py-2 my-2">
            {% include_block block.value.heading %}
        </h2>
        {% include_block block.value.text %}

        </div>
    {% endfor %}
</div>

Я хочу, чтобы кнопка 'tweet this' на странице блога включала первое изображение на этой странице.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@PsymatikDotCom" />
<meta name="twitter:title" content="{{page.title}}" />
<meta name="twitter:description" content="{{page.intro}}"/>
<meta name="twitter:image" content="https://how_do_i_get_this_path" />

Но мне не ясно, как динамически получить url первого изображения, чтобы ввести его в раздел twitter:image?

Смотрите страницу документации Wagtail Как использовать изображения в шаблонах.

<head>
  {% image page.photo width-400 as tmp_photo %}
  <meta name="twitter:image" content="{{ tmp_photo.full_url }}">
</head>

Вы можете объединить этот подход с first фильтром шаблонов Django.

<head>
{% with page.content|first as first_block %}
  {% image first_block.value.image width-400 as tmp_photo %}
  <meta name="twitter:image" content="{{ tmp_photo.full_url }}">
{% endwidth %}
</head>
Вернуться на верх