Jump to:

22972 Posts in 11596 Topics by 2824 members

General Questions

SilverStripe Forums » General Questions » First time making own template, what is the go with file name locations, I don't be seem to be able to reference them correctly?

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
Go to End
Author Topic: 549 Views
  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    First time making own template, what is the go with file name locations, I don't be seem to be able to reference them correctly? Link to this post

    Hi all,
    I am trying ot setup my very first SS Template. Now what i have done is grabbed a copy of the tutorial template and have copied that entire directory and renamed it to "billy".
    I have then edited the _config.php with

    SSViewer::set_theme('billy');

    Okay that works, now when I've gone in and started to try and put my own images into the Page.ss file I've run into trouble.
    I've added a few peices of code from the online tutorial about templates to my Page.ss

    <% base_tag %>
    etc and some of the others

    Now heres where I am having trouble.
    I edited one of the layout.css files to see if I can get an image to show up from my own directory and it did: (background image)

    body {
       width: 100%;
       height: 100%;
       font-size: 62.5%;
       /* reset font-sizes to 1em == 10px */
       
       background-image: url(../images/ui/billy_bg.jpg);
       background-repeat: no-repeat;
       background-position: center top;
       background-color: #1d3c18;
       margin:0;
       padding: 0;
    }

    But when I go to edit that Page.ss and try and put an image into that file I don't seem to be able to get a correct file location.

    Eg:
    <img src="billy/images/UI/billy_logo_1.jpg" width="246" height="190" />
    The image does not show up.

    And upon investigation of my code rendering in the browser I have.
    <img src="billy/images/UI/billy_logo_1.jpg" width="246" height="190" />

    So I presume I have to do something to get these images to work (I have tried "/", "../" etc etc etc)

    The other really strange thing is too that I notice inside my render page code is that I have 2 sets of external stylesheets which I don't know why.
    In my code I have:

    <head>
    <% base_tag %>
          
    <link rel="stylesheet" type="text/css" href="billy/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="billy/css/typography.css" />
    <link rel="stylesheet" type="text/css" href="billy/css/form.css" />

    </head>
    <body>

    In the rendered html browser view code source it shows:

    <head>
    <base href="http://localhost/www_billy_ss/"></base>
          
    <link rel="stylesheet" type="text/css" href="billy/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="billy/css/typography.css" />
    <link rel="stylesheet" type="text/css" href="billy/css/form.css" />

    <link rel="stylesheet" type="text/css" href="http://localhost/www_billy_ss/themes/billy/css/layout.css?m=1269234911" />
    <link rel="stylesheet" type="text/css" href="http://localhost/www_billy_ss/themes/billy/css/typography.css?m=1170309896" />
    <link rel="stylesheet" type="text/css" href="http://localhost/www_billy_ss/themes/billy/css/form.css?m=1170309896" />
    <link rel="stylesheet" type="text/css" href="http://localhost/www_billy_ss/sapphire/css/SilverStripeNavigator.css?m=1233532194" />

    </head>
    <body>

    Now I'm presuming my css image background command works because of these other css linked stylesheets some how are inserted into the page.

    I'm a bit stuck, any help would be much apprecaited.

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: First time making own template, what is the go with file name locations, I don't be seem to be able to reference them correctly? Link to this post

    PS.

    And yes I am doing a lot of ?flush=1
    And browser cache clearing when I am testing also.

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: First time making own template, what is the go with file name locations, I don't be seem to be able to reference them correctly? Link to this post

    Couple notes - links inside CSS files are relative to the CSS file. So ../images/ works as this says go up a directory then into the images directory.

    However for file paths in the templates it uses the Base URL (due to the base tag) so to include an image from the billy theme you would need to do

    <img src="{$ThemeDir}/images/myImage.jpg" alt="Image" />

    Also you may be getting 2 sets of CSS files if you have your own link tags to the css files in the Page.ss file. If you are including CSS files use the <% require themedCSS() %> property to make sure files aren't included twice rather then the standard <link> tags.

    549 Views
Page: 1
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.