add a background-image:url to a dynamic image

Stef

unread,

Nov 30, 2015, 5:54:57 AM11/30/15

to Wagtail support

Hi, need to have a dynamic image with a background url.

Here is my code

{% image slide_item.image width-1000 as slideimagedata %}

i have also tried this:

{% image slide_item.image width-1000 as slideimagedata %}

It seems to works for somebody but not for me. Images are not dysplaied. Does anybody know what I am doing wrong?

Matthew Westcott

unread,

Nov 30, 2015, 6:03:27 AM11/30/15

to wag...@googlegroups.com

Hi Stef,
I can't immediately see any problems there - what's the HTML output?

(Have you included a {% load wagtailimages_tags %} line at the top of the template?)

Cheers,
- Matt

Stef

unread,

Nov 30, 2015, 6:29:15 AM11/30/15

to Wagtail support

I did actually,

here is the wole code

{% load wagtailimages_tags wagtailembeds_tags %}

{% if slide_items %}

{% if slide_items|length > 1 %}

{% for slide_item in slide_items %}

{% endfor %}

</ol>

{% endif %}

{% for slide_item in slide_items %}

{% if slide_item.image %}

{% image slide_item.image width-1000 as slideimagedata %}

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

/>

{% else %}

{% endif %}

{% if slide_item.caption or slide_item.link %}

<h3>{{ slide_item.caption }}</h3>

{% if slide_item.link %}

{% endif %}

</div>

{% endif %}

</div>

{% endfor %}

</div>

{% if slide_items|length > 1 %}

{% endif %}

</div>

{% endif %}

and then the include into the home page template

{% include "home/includes/carousel.html" with slide_items=self.slide_items.all only %}

Matthew Westcott

unread,

Nov 30, 2015, 7:24:46 AM11/30/15

to wag...@googlegroups.com

OK - and what's the HTML output for the image line? (i.e. the thing you get when you 'view source' within your browser)

- Matt

> --
> You received this message because you are subscribed to the Google Groups "Wagtail support" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to wagtail+u...@googlegroups.com.
> To post to this group, send email to wag...@googlegroups.com.
> Visit this group at http://groups.google.com/group/wagtail.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/wagtail/53150fdd-f43f-41d4-8b83-a47b81a88d9d%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

stef

unread,

Nov 30, 2015, 8:55:33 AM11/30/15

to Wagtail support

Here is the output

Thanks

stef

unread,

Nov 30, 2015, 9:01:17 AM11/30/15

to Wagtail support

sorry

Matthew Westcott

unread,

Nov 30, 2015, 9:12:59 AM11/30/15

to wag...@googlegroups.com

It looks like you're missing a closing " at the end of the attribute - is that definitely present on the template?
Is /media/images/hero_1.width-1000.jpg a valid image, if you visit it directly in your browser?

- Matt

> To view this discussion on the web, visit https://groups.google.com/d/msgid/wagtail/45e4105c-2abd-4dcf-bd9f-a3e90becac35%40googlegroups.com.

Stef

unread,

Nov 30, 2015, 9:33:53 AM11/30/15

to Wagtail support

the correct output is this

and yes, I can see the image from: http://127.0.0.1:7880/media/images/hero_1.width-1000.jpg

Thanks

Stef

unread,

Nov 30, 2015, 10:01:03 AM11/30/15

to Wagtail support

here is the output in the terminal

here is the problem but I don't actually understand the correct meaning

"GET /media/images/hero_1.width-1000.jpg HTTP/1.1" 304 0

Matthew Westcott

unread,

Nov 30, 2015, 10:16:15 AM11/30/15

to wag...@googlegroups.com

304 means "not modified" - your browser has a cached copy of the image, so it doesn't need to be served again.

The problem is the missing " character at the end of the attribute, but this isn't consistent with the original template code that you posted:

(By the way, using '/>' to close a div tag is not valid - http://stackoverflow.com/questions/7971716/is-it-ok-to-use-a-self-closing-div-tag - you should use <div></div>. I don't think that's the issue here, though)

- Matt

Stef

unread,

Nov 30, 2015, 10:31:59 AM11/30/15

to Wagtail support

Unfortunally it's not, but thank anyway.

Karl Hobley

unread,

Dec 1, 2015, 4:14:38 AM12/1/15

to wag...@googlegroups.com

Have you tried putting single quotes around the URL?

--

You received this message because you are subscribed to the Google Groups "Wagtail support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wagtail+u...@googlegroups.com.

To post to this group, send email to wag...@googlegroups.com.
Visit this group at http://groups.google.com/group/wagtail.

To view this discussion on the web, visit https://groups.google.com/d/msgid/wagtail/4c1de14e-a88f-439b-9903-a8854996daee%40googlegroups.com.

Karl Hobley

unread,

Dec 1, 2015, 4:16:00 AM12/1/15

to wag...@googlegroups.com

Sorry, google hidden my example. Here it is again:

Thanks,

Karl

Stef

unread,

Dec 2, 2015, 4:25:46 AM12/2/15

to Wagtail support

Thanks Karl, but still not working

Stef

unread,

Dec 2, 2015, 4:54:46 AM12/2/15

to Wagtail support

I'm trying to figure out what's going on.

This is how should be the code to be coerent whit my html where "style" apply to <div class="item active">

{% for slide_item in slide_items %}

{% if slide_item.image %}

{% image slide_item.image width-1000 as slideimagedata %}

{# Embedded video - requires an embedly key to be stored in wagtaildemo/settings/local.py #}

</div>

{% else %}

{% endif %}

{% if slide_item.caption or slide_item.link %}

<h3>{{ slide_item.caption }}</h3>

{% if slide_item.link %}

{% endif %}

</div>

{% endif %}

</div>

{% endfor %}

</div>

instead I 'm using this code

{% for slide_item in slide_items %}

{% if slide_item.embed_url %}

{# Embedded video - requires an embedly key to be stored in wagtaildemo/settings/local.py #}

</div>

{% else %}

{# Slide image - first store image as a variable in order to construct an image tag with a title applied (title is used by bxslider js to construct the caption) #}

{% image slide_item.image width-1000 as slideimagedata %}

{% endif %}

{% if slide_item.caption or slide_item.link %}

<h3>{{ slide_item.caption }}</h3>

{% if slide_item.link %}

{% endif %}

</div>

{% endif %}

</div>

{% endfor %}

</div>

{% if slide_items|length > 1 %}

{% endif %}

</div>

{% endif %}

where in fact <div style="background-image:url('{{ slideimagedata.url }}')"> miss a closing div.

if I end it the behaviour changes and, if I write inside

<div style="background-image:url('{{ slideimagedata.url }}')"> something here</div>

image is there, so it is like the style apply to is own div but I whant it to apply to "item active".

Reply all

Reply to author

Forward