Getting the image source of a dynamic image django / wagtail

Question

I want to add an dynamic wagtail image to my template with the source.

When I do:

{% load wagtailcore_tags wagtailimages_tags %}
{% image page.specific.main_image width-400 %}

The output is:

<img src="[dynamic image source]" width="400" height="171" alt="[dynamic image alt]">

Is it possible to only get the src of the dynamic image?

I want to add the image as a background like:

<div style="background-image:url([dynamic image source])">

Does anybody know if this is possible??

Continuative

Answer 1

If you write the image tag as:

{% image page.specific.main_image width-400 as my_image %}

this will write the image information to the variable my_image, rather that outputting a tag immediately. You can then write:

<div style="background-image:url({{ my_image.url }})">

Maleki

Great, I used this to create a customisable meta image tag in my wagtail sites base template : <meta property="og:image" content="{% if page.seo_image %}{% image page.seo_image fill-300x300 as img %}{{img.url}}{% else %}{% static 'images/logo-square.png' %}{% endif%}">. Thank you – Denadenae