Motivation: It’s quite common to use CSS to define a background image. Historically, css files are not managed by Rhythmyx. This posts an issue if background images need to be managed. The following explains an approach to use managed image in background css definition for Rhythmyx templates.
Approach: Remove the background-image definition from the css file, generate it directly inside a Rhythmyx template, using a CMS link as the image url.
Solution Details: Attached file is an example snippet for the FastForward Image content type, which illustrates the solution.
In the template source, generate the css definition as well as the div tag:
<style type=“text/css”>
#site_banner{
position: absolute;
background: url($link_decode) no-repeat 0px;
width: 1000px;
height: 105px;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
}
</style>
<div id=“site_banner”></div>
Note the two variables in the Bindings tab:
[ol]
[li]#set ($link = $rx.location.generate($sys.assemblyItem,‘rffBnImage’))
[/li]get the link to the binary image
[li]#set ($link_decode = $rx.codec.decodeFromXml($link))
[/li]must decode the link, otherwise “&” becomes “&” in preview, and the image won’t be rendered.
[/ol]
Use this snippet, you can place the background image as a slot item on another page.
Final Thought: This example renders the whole css definition in the template. What if the same image is reused in multiple definitions? Do we need to create multiple snippets, one for each definition? The answer is no. A variation of this is, create an image snippet that only returns the decoded link address, nothing more. This allows the same image to be reused in different css definitions in templates.