I have a problem creating a dynamic way of chosing the backgrund image via CSS. The solution I am trying to get to work is by adding a Data Type to my Document Type of the sort of Drop Down (which I have inserted and created my self via the developer data type-section). The drop down consist of five strings/texts. So far so good. I know want to add these values to a specific div via my umbraco:item element tag. How do I do this?
Must admit I have not looked very thourughly at your code above since it's a bit corrupt as you say.
But I think that what I would do is to write out the images using a style attribute on the div to set the default background image and then use some data attributes to hold the path to the other images so you can easily swap them using some JavaScript for instance.
And then I would probably use a razor or xslt rendering to fetch the images instead of using umbraco:Item, which can get a bit messy for this :)
Hope this helps and that I'm on the right track of what your thinking.
Unfortunately I do not fully understand what you mean. I am not well versed in JavaScript so I do not comprehend the following: "But I think that what I would do is to write out the images using a style attribute on the div to set the default background image and then use some data attributes to hold the path to the other images so you can easily swap them using some JavaScript for instance.". Do you think you could clarify this a bit and maybe that would help me in the right direction?
I also do not understand how I should use both JavaScript and xslt/razor together. As you notice I am quite the noob:)
Maybe I should clarify what I am trying to do. I wabt the user to be able through the Umbraco Backoffice to set the background image to a specific div that will correspond to the text in the same Document Type. I have tried many solutions but none have worked out for me.
Sorry for late reply. I have been away on holiday. Yep I just need to set the background image of a div depending on which type of oage it is. I solved it by having separate templates for the nodes. But this is a ugly way of doing it and makes it impossible for the end user to change the background images.
Welcome back from your holiday - hope it was a good one and that you're fully refreshed and ready to rock in Umbraco :)
I've been reading through the former posts...and now I just want to make sure I fully get the ghist of what it is you're trying to achieve.
1: You want to be able to set a specific background image on a div - is this on a page basis? and should there only be one background image? (No background image cycling) 2: Will the background image be uploaded into the media section and select it with a media picker or do you upload it directly on your content node?
Let's get this one solved - I'm positive it's possible I just need to fully understand how your site is structured and exactly how many images that should be possible to display on the div's background.
Dynamic background image via div id
I have a problem creating a dynamic way of chosing the backgrund image via CSS. The solution I am trying to get to work is by adding a Data Type to my Document Type of the sort of Drop Down (which I have inserted and created my self via the developer data type-section). The drop down consist of five strings/texts. So far so good. I know want to add these values to a specific div via my umbraco:item element tag. How do I do this?
This is my template code of now:
<%
@ Master Language="C#" MasterPageFile="~/masterpages/Master.master" AutoEventWireup="true"%>
<asp:content ContentPlaceHolderId="MainContainer" runat="server">
<div id="main-container">
<div class="new-textpage-columns">
<umbraco:item field="backgroundImage" insertTextBefore="<div id="new-first-col" class="" insertTextAfter="">" runat="server"/>
<umbraco:Macro Alias="PageHeading" runat="server"></umbraco:Macro>
<umbraco:Item field="introText" insertTextBefore="<p class="intro">" insertTextAfter="</p>" stripParagraph="true" convertLineBreaks="true" htmlEncode="false" runat="server"></umbraco:Item>
<h5><umbraco:Item field="bodyText" runat="server"></umbraco:Item></h5>
<umbraco:Item field='backgroundImage' runat='server'></umbraco:Item>
</div>
<div id="new-second-col">
<div id="new-sidebar">
<umbraco:Macro Alias="SubNavi2" runat="server"/>
</div>
</div>
</div>
</div>
</asp:content>
<
umbraco:item field="backgroundImage" insertTextBefore="<div id="new-first-col" class="" insertTextAfter="">" runat="server"/>
The code snippet seems to get corrupted!
Hi Daniel
Must admit I have not looked very thourughly at your code above since it's a bit corrupt as you say.
But I think that what I would do is to write out the images using a style attribute on the div to set the default background image and then use some data attributes to hold the path to the other images so you can easily swap them using some JavaScript for instance.
And then I would probably use a razor or xslt rendering to fetch the images instead of using umbraco:Item, which can get a bit messy for this :)
Hope this helps and that I'm on the right track of what your thinking.
/Jan
Thank you Jan!
Unfortunately I do not fully understand what you mean. I am not well versed in JavaScript so I do not comprehend the following: "But I think that what I would do is to write out the images using a style attribute on the div to set the default background image and then use some data attributes to hold the path to the other images so you can easily swap them using some JavaScript for instance.". Do you think you could clarify this a bit and maybe that would help me in the right direction?
I also do not understand how I should use both JavaScript and xslt/razor together. As you notice I am quite the noob:)
Maybe I should clarify what I am trying to do. I wabt the user to be able through the Umbraco Backoffice to set the background image to a specific div that will correspond to the text in the same Document Type. I have tried many solutions but none have worked out for me.
Again, ty for your help!
/ Daniel
Hi Daniel
Ok, so you don't need to have the background image cycle every 5th second for instance? You just need to set the background image of a <div> tag?
/Jan
Sorry for late reply. I have been away on holiday. Yep I just need to set the background image of a div depending on which type of oage it is. I solved it by having separate templates for the nodes. But this is a ugly way of doing it and makes it impossible for the end user to change the background images.
/ Daniel
Hi Daniel
Welcome back from your holiday - hope it was a good one and that you're fully refreshed and ready to rock in Umbraco :)
I've been reading through the former posts...and now I just want to make sure I fully get the ghist of what it is you're trying to achieve.
1: You want to be able to set a specific background image on a div - is this on a page basis? and should there only be one background image? (No background image cycling)
2: Will the background image be uploaded into the media section and select it with a media picker or do you upload it directly on your content node?
Let's get this one solved - I'm positive it's possible I just need to fully understand how your site is structured and exactly how many images that should be possible to display on the div's background.
/Jan
is working on a reply...