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?
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.
Related
I'm setting CSS color variables inside a style tag in a Thymeleaf template. The color values are coming from the model object. I also want to apply a default color, in case the model attirbute is not there.
I already used the correct Answer in Question 62610602 but in my case a backslash is pasted in front of the color code. This defenetly isn't comming from the given String
:root {
--accent-color: \#00FF00;
}
The Code in the Thymeleaf template is:
<style th:inline="css">
:root {
--accent-color: [[${appUser?.accentColorCode} ?: '#ea0a8e']];
}
</style>
Looks like [[...]] css expressions escape output as CSS identifiers. You'll have to use the unescaped [(...)] expression to output colors. (I've edited my original answer...)
<style th:inline="css">
:root {
--accent-color: [(${appUser?.accentColorCode} ?: '#ea0a8e')];
}
</style>
I want to store my background URLs in custom properties (CSS variables) and use them with the background property. However, I couldn't find a way to interpolate the string when using it as a parameter in url().
Here is my sample code:
:root {
--url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}
body {
background: url(var(--url));
}
I know that this can be easily done in Sass or LESS using the interpolation function but I'm curious if there is a way to do it without any pre-processor.
You can perform interpolation with most CSS functions, including rgba() (see an example here). In fact, interpolation is one of the main features of custom properties.
But you cannot do this with url(), as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ), but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot contain parentheses unless they are escaped. This means the substitution never actually occurs, because the parser never sees any var() expressions in the property value — indeed, your background declaration is completely invalid.
If you didn't understand any of that, that's fine. Just know that you cannot use var() interpolation with url() due to legacy reasons.
Even though the problem depicted in the question is related to the legacy url() token, you cannot do this by building URL tokens out of several var() expressions either, in case you were thinking of trying something like --uo: url(; --uc: ); or --uo: url("; --uc: ");, and background: var(--uo) var(--url) var(--uc);. This is because custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).
If you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
Or, use JavaScript instead of var() to perform the interpolation.
You cannot interpolate css variables with url but what you can do is to implement the url function as part of your variable like this:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
in HTML could be:
<div class="css_class_setting_background" style=" --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");"> </div>
This works on most of modern browsers.
here is the solution which works in vue3
<script setup>
const backImage = ref("url(/img/imImage.webp)")
</script>
<style>
div {
background-image: v-bind(backImage );
}
</style>
I had the same issue on a project with Cordova so I used:
header{
--bg-header: url(../img/header_home.png) left center/cover no-repeat;
background: var(--bg-header,
url("../img/header_home.png") left center/cover no-repeat
);
}
Apparently, if you use url("") with double quotes on the --var declaration, the value will not work.
I need to specify a templated link to a mask image in style using css url() function. The code is like this:
<div class="someclass" style="-webkit-mask-image: url('https://img.website.com/{{imagefilename}}.png')">
It generates 404 errors while "imagefilename" is not replaced with it's value. Is there a way to avoid this behavior, similar to replacing src with ng-src in <img>?
Try ng-style instead of style. ng-style needs to be an object. Might be easier to format in controller.
// In controller
$scope.setStyle = function(url){
return {
“webkit-mask-image”: “url(“ + url + “)”
};
};
Also, the URL for -webkit-mask-image: url( ) should not be enclosed with parentheses. Via https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
-webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
I'm setting CSS color variables inside a style tag in a Thymeleaf template. The color values are coming from the model object. I also want to apply a default color, in case the model attirbute is not there.
But when I render the template, Thymeleaf doesn't evaluate the expression, but assigns the entire expression as a string literal, instead of the color value.
Below is my style tag. I've done the same thing in Apache Freemarker, and it worked fine. I'm pretty new to Thymeleaf, what should I do differently here?
<style>
:root {
--primary-color: ${brandingConfig?.themeConfig?.primaryColor} ?: '#633EA5';
--secondary-color: ${brandingConfig?.themeConfig?.secondaryColor} ?: '#E9E6ED';
}
</style>
If you want to set CSS variables, you should use CSS inlining.
<style th:inline="css">
:root {
--primary-color: [(${brandingConfig?.themeConfig?.primaryColor} ?: '#633EA5')];
--secondary-color: [(${brandingConfig?.themeConfig?.secondaryColor} ?: '#E9E6ED')];
}
</style>
Normally the Thymeleaf processor only evaluates expressions in th:* attributes of tags. However, if you set th:inline="css" on your style tag you can use [[...]] expressions to evaluate the text inside a tag.
I want to store my background URLs in custom properties (CSS variables) and use them with the background property. However, I couldn't find a way to interpolate the string when using it as a parameter in url().
Here is my sample code:
:root {
--url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}
body {
background: url(var(--url));
}
I know that this can be easily done in Sass or LESS using the interpolation function but I'm curious if there is a way to do it without any pre-processor.
You can perform interpolation with most CSS functions, including rgba() (see an example here). In fact, interpolation is one of the main features of custom properties.
But you cannot do this with url(), as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ), but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot contain parentheses unless they are escaped. This means the substitution never actually occurs, because the parser never sees any var() expressions in the property value — indeed, your background declaration is completely invalid.
If you didn't understand any of that, that's fine. Just know that you cannot use var() interpolation with url() due to legacy reasons.
Even though the problem depicted in the question is related to the legacy url() token, you cannot do this by building URL tokens out of several var() expressions either, in case you were thinking of trying something like --uo: url(; --uc: ); or --uo: url("; --uc: ");, and background: var(--uo) var(--url) var(--uc);. This is because custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).
If you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
Or, use JavaScript instead of var() to perform the interpolation.
You cannot interpolate css variables with url but what you can do is to implement the url function as part of your variable like this:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
in HTML could be:
<div class="css_class_setting_background" style=" --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");"> </div>
This works on most of modern browsers.
here is the solution which works in vue3
<script setup>
const backImage = ref("url(/img/imImage.webp)")
</script>
<style>
div {
background-image: v-bind(backImage );
}
</style>
I had the same issue on a project with Cordova so I used:
header{
--bg-header: url(../img/header_home.png) left center/cover no-repeat;
background: var(--bg-header,
url("../img/header_home.png") left center/cover no-repeat
);
}
Apparently, if you use url("") with double quotes on the --var declaration, the value will not work.