Jump to:

23455 Posts in 18904 Topics by 2877 members

General Questions

SilverStripe Forums » General Questions » Set a Background Image

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 2776 Views
  • Juanitou
    Avatar
    Community Member
    323 Posts

    Re: Set a Background Image Link to this post

    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.

  • steve_nyhof
    Avatar
    Community Member
    224 Posts

    Re: Set a Background Image Link to this post

    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 Nyhof

    Attached Files
  • banal
    Avatar
    Community Member
    901 Posts

    Re: Set a Background Image Link to this post

    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?

  • steve_nyhof
    Avatar
    Community Member
    224 Posts

    Re: Set a Background Image Link to this post

    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

    2776 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.