The Problem
Some site designs call for different Layout Element background imagery to be used for different sections of the site.
You could achieve this by defining separate sets of layout Elements for each section, but this would be inefficient, and require lots of configuring.
The Solution
The solution presented here solves the problem by allowing the image to be used to be uploaded to a page's Abstract, and then uses a script to set the image to be used as the background for a Layout Element zone.
To make the example more useful, we use the same image on multiple Layout Elements, with positioning offsets. In this way a single image can be used to work around several edges of the page.
Another benefit of this approach is that you can give a site administrator permission to edit the images in the Abstracts, without giving them permission to edit the Layout Elements themselves.
Method
In your site structure, choose the pages which will contain image in their abstracts. So if there is a set of sections in the site, this will normally be the section pages themselves.
Upload a single image into each of the "Abstract 1" text surfaces for each such section page, one (different) image for each one.
Add a Layout Element to the site, called say "Abstract Image", and place a Text Zone in it.
In this text zone, add the "Abstract 1" embed with a positive offset number (1, 2, etc) such that when you view a page in on of the sections on your site, this abstract image for the relevant section is shown. (It will be shown incorrectly positioned at this stage, we'll correct that later. For now the important thing is to ensure the correct ismage is showing on the various pages)
Now return to the Text Zone with the abstract image, and in Source mode, surround it with a hidden div. To do this paste in the highlighted code around the existing embed code:
<div style="display: none">
<div class="ncEmbed" data= ... </div>
</div>
Come out of Source mode in the text editor (the embed tag will be hidden now, that's fine), and Save.
Still in the Element Properties popup for the Layout Element, right click on the zone and choose Configuration.
At the bottom of the configuration dialog it will show the LOZone number: for example "LOZone2". Make a note of this - the Site Zone Number - as we will be using it later (note: these numbers are different from the grid position numbers shown elsewhere "Zone 1" to "Zone 9" on each Layout Element.)
Add in the Layout Elements you need for your display, setting their positions and widths as desired. Make a note of their Site Zone Numbers
In the Behavior Editor of the pages which should show the imagery, (or, since you ideally only want to enter this once, in the parent page so it will be inherited down to all the pages where it is needed), under General Options / Scripts / "<head> General", paste the following script, having first adapted it for your site:
The adaptions are quite simple:
- Replace 'LOZone2' with the equivalent 'LOZoneN' from your Abstract Image layout zone.
- For each of the Layout Zones that need the new background image, use a line (like the four examples shown in green). Substitute the LOZone number for the one for your zone. As shown, you can optionally enter pixel offsets to position the image.
<script type="text/javascript">
window.onload = function(){
var sImg = ncGetImgSrc('LOZone2');
ncReplaceBgImg('LOZone3', sImg);
ncReplaceBgImg('LOZone4', sImg, -25);
ncReplaceBgImg('LOZone5', sImg, -25, -603);
ncReplaceBgImg('LOZone6', sImg, -25, -100);
};
function ncGetImgSrc(p_sElId){
var oEl = document.getElementById(p_sElId);
if(oEl.tagName.toLowerCase != 'img'){
var oImgs = oEl.getElementsByTagName('img');
if(oImgs.length){
oImg = oImgs[0];
}
}else{
oImg = oEl;
}
if(oImg){
return oImg.src;
}
}
function ncReplaceBgImg(p_sElId, p_sImg, p_lOffsetLeft, p_lOffsetTop){
var oEl = document.getElementById(p_sElId);
if(oEl && p_sImg){
with(oEl.style){
backgroundImage = 'url(' + p_sImg + ')';
var sPos = (p_lOffsetTop ? p_lOffsetTop : 0) + 'px ' +
(p_lOffsetLeft ? p_lOffsetLeft : 0) + 'px';
backgroundPosition = sPos;
}
}
}
</script>
