Background Image

Rhythmyx Technical Discussion
1

I have some template code as follows:

<div class=“image” style="background-image: url(/images/cloud_bg1.jpg); ">
<h3>#displayfield(‘displaytitle’)</h3>
#displayfield(‘callout’)
</div>

I have a requirement to manage the cloud_bg1.jpg image through the CMS. I have created a content of type rffImage that has cloud_bg1.jpg as the image file. However, I am not sure what is the best way to include this image content item to become the background-image. How should I modify the above snippet of code?

thanks
manvinder

2

Manvinder,

See “Implementing a Binary Template”, p. 144 in the Implementation Guide.

What you do beyond that depends on how you want to incorporate the background image. If you explain how you reference the image, we can give you a more direct answer.

3

Currently, the image is access directly from the resources folder from the template code. We use the rx_navbase variable, and specify the image name. However, under the new requirement, they want the image to come from the CMS. To the template, I have created a slot to which I add the image.
I am reading the image content item from the image slot, then I put the image url as the attribute to backgroundimage url. It didnot work.

div class=“image” style="background-image: url($rx_navbase/images/cloud_bg1.jpg); ">
#displayfield(‘displaytitle’)
#displayfield(‘callout’)
I changed the above code to read as:

div class=“image” style="background-image: url(http://localhost:9992/Rhythmyx/assembler/render?sys_revision=1&sys_contentid=1186&sys_folderid=&sys_context=0&sys_siteid=102&sys_authtype=0&sys_variantid=3282…); ">
#displayfield(‘displaytitle’)
#displayfield(‘callout’)

thanks
Manvinder

4

assuming your slot is titled “background-image”, try this:


<div class="image" style="background-image: url(#initslot('background-image')#foreach($rr in $sys.currentslot.relresults)$rx.location.generate($rr.node)#end#endslot); ">
#displayfield('displaytitle')
#displayfield('callout')
</div>
5

When I do the view source using the snippet code that you gave, it shows following:

div class=“image” style="background-image: url($rx.location.generate($rr.node)); ">

6

I meant doing the view source of the generated page…

7

well… no one is perfect… what version are you using? I think vanilla 6.5 may require .getNode() instead of .node… worse come to worse, write a template just to output the url and use #slot_simple instead of all that stuff i gave before.

8

Manvinder,

If all you want to do is manage in the image in Percussion CM, without moving it to another location in your tree, all you need to do is publish the image to the correct location. Your current context variable reference should still work if you publish the image to the same location.

RLJII

9

One thing to watch out for when using $rx.location.generate is to make sure that you are generating the link to the binary template of the image and not the snippet template. So you may want to use: $rx.location.generate($rr.getNode(), ‘myBnImageTemplate’). You should also do some testing to make sure that the links resolve properly (ie on publish, an image in a folder or another location is properly referenced). You may not have this problem as our images come from the navigation item which may or may not be in the same folder as the actual content item.

10

We do this very same thing, with almost the same approach you are doing, but with a bit of a difference. We manage background images, CSS files and all sorts of shared web assets in the CMS. We bring them in to pages via a slot, kind of like you are doing with your initslot call, but our slot is normal slot with a query having sys_title and folder as parameters and the slot brings back the item and then the snippet template doesn’t render any HTML, but ONLY returns the URI for the item, using rx.location.generate, like this:

#slot(“nhlbiItemByFolderAndSysTitle” “” “” “” “” “template=nhlbiSnBinaryFileURI&mySysTitle=dashedline_long.jpg&site_path=$webResourceFolder/images%”)’

We then put use this in link tags to bring in CSS, shared images in the global template, whatever we need and it works in preview and of course in publish. Let me know if you get the gist of what we’re doing here or if you need more info.

Thanks,
Duane