Menu
I'm using Polymer with Thymeleaf and I want to set a background image in paper-scroll-header-panel element when it's uncondensed. So, I'm trying this:
paper-scroll-header-panel{
--paper-scroll-header-panel-full-header: {
background-image: url("+ @{(${session.user.coverImagePath})} + ");
};
}
But Thymeleaf is not rendering this code, when I access this template I get the code as it is. So, how can I set this property with Thymeleaf?
320
Adding CSS. We load the stylesheet using the link tag with Thymeleaf's special th:href attribute. If we've used the expected directory structure, we only need to specify the path below src/main/resources/static. In this case, that's /styles/cssandjs/main.
#{} is used for message (i18n) expressions. Used to retrieve locale-specific messages from external sources.
The Thymeleaf th:text tag will replace all the text in your h1 tag, that is the reason your output only shows "TITLE". You should place the <small> tags outside your h1 tag.
In Thymeleaf, these model attributes (or context variables in Thymeleaf jargon) can be accessed with the following syntax: ${attributeName} , where attributeName in our case is messages . This is a Spring EL expression.
You have to explicitly tell Thymeleaf to look for expressions in text with th:inline attribute, and than surround the expression with double square brackets.
<style th:inline="text">
paper-scroll-header-panel{
--paper-scroll-header-panel-full-header: {
background-image: url([[@{(${session.user.coverImagePath})}]]);
};
}
</style>
The authors of Thymeleaf have chosen this scheme for performance reasons, because the Thymeleaf's template parsing and processing is very different compared to JSP or Facelets.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
