URLs in style attributes

classic Classic list List threaded Threaded
5 messages Options
Ben
Reply | Threaded
Open this post in threaded view
|

URLs in style attributes

Ben
I'm trying out Thymeleaf, I'm sure it's been asked before but I couldn't find where this issue was mentioned, so sorry if this is a repeat question.  I have a URL in a HTML "style" attribute.  For example I have something like:

<body style="background:url('../../res/img/bg.jpg');" th:style="background:url('@{/res/img/bg.jpg}');">

My app is running Tomcat, and I have my templates in /WEB-INF/templates/ and my static resources in /res.  When i run this in Tomcat, I get a TemplateProcessingException with the following message: "Could not parse as expression background:url('@{/res/img/bg.jpg}').

The natural templating has been working pretty well for me so far.  When I work on my HTML templates I just double click the .html file and it resolves everything fine.  After I get everything just right, I can deploy it to Tomcat and Thymeleaf injects the new URLs and it looks great.  Everything has been okay with things like th:href="@{/res/css/foo.css}", but I guess it's barfing because it's CSS and not XML?

- Ben
Ben
Reply | Threaded
Open this post in threaded view
|

Re: URLs in style attributes

Ben
After some more digging, I found this post that helped:

http://forum.thymeleaf.org/th-background-usage-td4025853.html

The answer is to use + operator with some more single quotes:

th:style="'background:url('+ @{/res/img/bg.jpg} +');'"

Reply | Threaded
Open this post in threaded view
|

Re: URLs in style attributes

Haluk Dogan
Is there a way to escape single quotes. I try to generate this:

<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>

But, the following code generates slightly different.

<div class="fill" th:style="'background-image:url(' + @{http://placehold.it/1900x1080(text='Slide One')} + ');'"></div>

Generated HTML:
<div class="fill" style="background-image:url(http://placehold.it/1900x1080?text=Slide+One);"></div>

If I'm not wrong, since I couldn't escape single quotes, the blank character inside the parameter of the url replaced by + character.
Reply | Threaded
Open this post in threaded view
|

Re: URLs in style attributes

Emanuel
Administrator
It's not often you see a space in URLs.  Often they're encoded to something like + or %20.  Would either of those work instead of the space?

Otherwise, something to try include single quotes would be to use the literal substitution syntax:

th:style="|background-image:url('http://placehold.it/1900x1080&text=Slide One');|"

Or some variation of it to try perserve that space:

th:style="|background-image:url('http://placehold.it/1900x1080&text=Slide| + ' ' + |One');|"

Not sure if that'll convert the space too.
Reply | Threaded
Open this post in threaded view
|

Re: URLs in style attributes

danielfernandez
Administrator
In reply to this post by Haluk Dogan
When you did:

<div class="fill" th:style="'background-image:url(' + @{http://placehold.it/1900x1080(text='Slide One')} + ');'"></div>

Thymeleaf did not include your single quotes into the result because it considered it a part of the expression, the way you were able to close (and then open again) your string literals.

So in order to specify that you actually WANT those single quotes, you should escape them (according to thymeleaf expression rules):

<div class="fill" th:style="'background-image:url(\'' + @{http://placehold.it/1900x1080(text='Slide One')} + '\');'"></div>

As for the "Slide+One" or the equivalent "Slide%20One", that's actually the correct way to write it. Whitespaces are forbidden characters in URL parameter values.