21301 Posts in 5736 Topics by 2603 members
| Go to End | ||
| Author | Topic: | 2132 Views |
-
Re: Set a Background Image
24 March 2010 at 9:48pm
Yes, you could look at the database fields (table File), but using the Debug() method is even better: http://api.silverstripe.org/default/ViewableData.html#Debug
So, you could have tried: $BackgroundImage.Debug (or the other way round, I’ve not tested a lot yet).
I just discovered it yesterday!
I don’t know nothing about JavaScript, sorry.
-
Re: Set a Background Image
25 March 2010 at 5:26am Last edited: 25 March 2010 5:27am
I have figured this out - kind of fun.
First I setup my styles in my template... Note the paths...
<% if FormBgImage %>
<style>
#changeformbgsmall {
background-image:url(assets/Forms/Small/$FormBgImage.Name);
background-position:center top;
background-repeat:no-repeat;
}
#changeformbglarge {
background-image:url(assets/Forms/Large/$FormBgImage.Name);
background-position:center top;
background-repeat:no-repeat;
}
</style>
<% else %>
<% if callGlobal.GlFormBgImage %>
<style>
#changeformbgsmall {
background-image:url(assets/Forms/Small/$callGlobal.GlFormBgImage.Name);
background-position:center top;
background-repeat:no-repeat;
}
#changeformbglarge {
background-image:url(assets/Forms/Large/$callGlobal.GlFormBgImage.Name);
background-position:center top;
background-repeat:no-repeat;
}
</style>
<% else %>
<style>
#changeformbgsmall {
background-image:url(assets/System/Forms/Small/form-bg-blue.png);
background-position:center top;
background-repeat:no-repeat;
}
#changeformbglarge {
background-image:url(assets/System/Forms/Large/form-bg-blue.png);
background-position:center top;
background-repeat:no-repeat;
}
</style>
<% end_if %>
<% end_if %>Note, that I gave my styles an ID #changeformbglarge and #changeformbgsmall
Then in the javascript I am getting the style elements by ID...
<script type="text/javascript">
...
formbgimagesmall = document.getElementById("changeformbgsmall");
formbgimagelarge = document.getElementById("changeformbglarge");
...
</script>Then in my HTML in the editor, I added the ID to my table tag...
<table border="0" cellspacing="10" cellpadding="0" width="250" id="changeformbgsmall" style="height: 320px;">By doing it this way, I can apply several images of different sizes from different folders, with the same filename.png
... see image.
And thank you for your help on the .Name option
Steve NyhofAttached Files -
Re: Set a Background Image
25 March 2010 at 7:51pm
This seems overly complicated to me. Why do you join a hard-coded path with the $File.Name. Wouldn't something like this be better?
background-image: url($FormBgImage.URL);
You should also make sure, that you use CSS classes for elements that occur multiple times, because having more than one item with the same ID in your HTML Document makes it invalid HTML.
Also, I don't see what the JavaScript part is for? Do you modify stylesheet properties dynamically? -
Re: Set a Background Image
26 March 2010 at 1:56am Last edited: 26 March 2010 2:01am
Hi banal,
I wish I could make it so easy. If you would look close at my code, you would see that I am taking two different files from two different folders by using the .Name only.
If you have a better way to do this, and get that code into the html editor that would be great. I have not been able to add the $Field into the html editor.
Also, were do have have multiple css instances?
Steve
| 2132 Views | ||
| Go to Top |
