Forums (Obsolete)

Portal Engine Questions on portal engine and web parts.

Version 7.x > Portal Engine > Dynamic background image based on a document property?

View modes:

Member

Member

vcarter - 6/3/2013 2:44:48 PM

Dynamic background image based on a document property?

I want to allow the background image for my content container to be set via a page property. I am having a lot of trouble figuring out how to reference these properties in the master template. My initial thought was to use the MenuItemTeaserImage, but I could always add another field as needed.

I would like to insert the path for this image into the style property of a div on my masterpage. Is this even possible? When I try to reference properties using the syntax used by transformations <%# VariableName %>, nothing happens. I am already using this code to grab the document name for display:

contentHead.Text = CMS.CMSHelper.CMSContext.CurrentPageInfo.DocumentName.ToString();

Is this how I should access the image value as well?

I feel like this is a basic question, but I have not had any luck figuring it out. Any help would be appreciated.

Member

Member

vcarter - 6/5/2013 11:02:52 AM

RE:Dynamic background image based on a document property?

Any ideas? I am pretty sure I just need the correct syntax to reference document properties on the masterpage. All of the examples I have seen are using Macro/transformation syntax which always seems to give me "does not exist in this context" errors. I feel like the CMSContext class is going down the right track but I keep hitting a wall. Normally I would create my own custom controls/pages, but in this instance it is very important that I work strictly within the confines of the portal engine.

Sorry to repost, I just really feel I am missing something simple.

Kentico Support

Kentico Support

kentico_jurajo - 6/17/2013 1:29:09 AM

RE:Dynamic background image based on a document property?

Hi,

How exactly and where oyu want to specify the background? Have you tried using the Head HTML web part and using some macro there - I would say that you will need a custom macro that will contain some conditions according your rules and the out put of the macro will be given CSS class or style or link to appropriate style sheet.

Best regards,
Juraj Ondrus

Member

Member

vcarter - 6/17/2013 8:02:32 AM

RE:Dynamic background image based on a document property?

This image is to be displayed behind some content on level 1 sub pages. I could specify a CSS class for the content container I am using, however, this would then require someone other than the designer to update/add images.

Ideally I want the content editor to be able to select from a pool of images in the media library. I had thought to add something like:

"style='background-image:url(IMAGE VARIABLE HERE);"

to my content container which is a div. My trouble has been with how/where I should put the code to reference whatever document property I end up using to link the image to a particular document.

Like I said, I really feel like I am missing something simple.

Kentico Legend

Kentico Legend

Brenden Kehren - 6/17/2013 12:36:11 PM

RE:Dynamic background image based on a document property?

I've done this before and simply added a new field/property to the document type and dynamically added it to the transformation based on the value. Take this for example:

<div class="callout panel<%# IfEmpty(Eval("BackgroundColor"), "", " " + Eval("BackgroundColor")) %><%# IfEmpty(Eval("ContainerStyle"), "", " " + Eval("ContainerStyle")) %>">

This is simply taking what the user has selected in a dropdown list (could be a url they select from the media library even) and if its empty, it puts a blank string otherwise it puts the selection. This could be the same for your scenario although you'd have to build the css inside the IfEmpty() method so you don't get the missing image icon if no background is selected.

Member

Member

vcarter - 6/17/2013 1:06:36 PM

RE:Dynamic background image based on a document property?

I think you have definitely pointed me in the right direction. One of the issues is that I was not applying this style to a webpart but rather a content section defined in the actual template.

<div id="contentMain">
[CONTENT WEB PART ZONE]
</div>

So I was attempting to get the image value on the actual page template not in a transformation. however in looking at your example, I think I may have an idea of how to get this to work.

Thanks FroggEye, I appreciate your sharing of knowledge with me on these boards. I know I ask a bunch of questions.

Kentico Legend

Kentico Legend

Brenden Kehren - 6/17/2013 1:34:58 PM

RE:Dynamic background image based on a document property?

Not a problem. The other thing you could do is simply create new web part containers for each image you have and use a macro method in the web part container property for the web part.

For instance you create two web part containers: RedBgImage and BlackBgImage that point to the images you need (nothing dynamic inside the container for changing the image). Say you have a repeater web part on your page, and in the web part container field select a macro and set the value as you see fit based on your evaluation.

Best of luck,
Brenden

Top