Hard coded images in master pages - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Hard coded images in master pages

  • Hard coded images in master pages
  • Hey guys - I've followed the Designer's Guide to the letter. I have a working master page that I created. However, hard coded images in the master page and it will NOT display. The image are in the correct folder along with other images that are references by the global CSS.

    In the CSS file this works perfectly:

    body background:  url(../Images/background.png);

    In the master page this DOES NOT work:

    <div id="logo"> <img src="../Images/logo.jpg" /> </div>

    How can I get an image that's hard coded in the master page to display?
  • SOLUTION!!!

    Ignore the Designer Guide's intructions and put your "MyTemplate" folder in the root directory, not App_Data/Sitefinity.
  • Well, no...the problem is that when the page renders the ../ is relative to the page you're on (to the browser), not to the masterpage

    You SHOULD keep it in App_Data :)

    This is what your path should look like to the themed images
    <root>/Sitefinity/WebsiteTemplates/themename/images/image.png
    ...or whatever

    It rewrites the URL to remove the whole App_Data bit
  • Hi Justin,

    Try to write to the path to the image starting from the root of your site

    <img src="/App_Themes/MyTheme/Images/logo.jpg" alt="" />

    If your site follows the structure described in the Designers guide and the theme is in "/App_Data/Sitefinity/WebsiteTemplates/MyTemplate/App_Themes/MyTheme/" skip "App_Data".

    <img src="/Sitefinity/WebsiteTemplates/MyTemplate/App_Themes/MyTheme/Images/logo.jpg" alt="" />

    Let us know if you need further help.



    Regards,
    Katia
    the Telerik team
  • Katia - I've tried that method multiple times without any luck. As far as I've seen, it doesn't work. The only success I've had is after placing the "WebsiteTemplates" folder in the root. That works fine and is preferable to deeply nested directory structures anyway.
  • Hmmm, I would disagree

    While it is deeply nested...it also keeps all your loose files (Masterpages, styles, scripts) contained under one folder, so you could in theory just drop that into ANY site and your theme would be back up and working (once registered in the config)

    I'm using the method Katia suggests without issues, you aren't still using the ../ syntax perhaps?
  • I would suggest keeping the structure within App_Data.  As stated earlier in this post you can refer to images by skipping "App_Data" and starting your path at "/sitefinity/...". 

    It can be tedious having long paths to type/copy/paste out, but one big key here is that I believe future plans are to offer some sort fast marketplace theme integration by tying them into App_Data. 
  • Hello,

    We do plan to provide a direct import from the marketplace and export functionality which will utilize the structure described in the Designer's guide.

    Justin, if you'd like to switch to the recommended structure I will need:
    • your masterpage
    • your css theme and images
    • your file structure, which file (master page, theme, images) in which folder resides (a screenshot will do the trick).
    • any additional info you think might be useful to reproduce your issue

    Best wishes,
    Katia
    the Telerik team
  • Katia,

    Forgive me; I'm new to Sitefinity.

    My images in /Sitefinity/WebsiteTemplates/Template/App_Themes/Default/images/logo.jpg.

    On my dev machine the Sitefinity Project Manager opens the site up in http://localhost:27485/Default

    That means, I've got to hardcode in /Default/Sitefinity/WebsiteTemplates/Template/App_Themes/Default/images/logo.jpg which will be different when I publish the site live as there will be no "/Default" folder.

    How do I remove the /Default folder from my localhost testing environment.

    Thanks,
    Joshua
  • Hey Joshua,

    There's two kind of images: called from .css and called from .Master.

    Called from .CSS:
    If you're following the Designer's guide method (put everything under App_Data) its best to avoid full paths. Changing a theme's name, or changing the publication (subroot) will break the theme.

    If you're using themes and calling in image from the .css file, you can just use this for instance:

    background: #fff url('../images/background_header.jpg') no-repeat left top;


    Since the image is called from the .css file, the path to it is relative to the .css file.

    Meaning if you have a folder structure like this:
    +App_Themes
      Global
      Images
      Styles

    It'll find it perfectly. 

    Called from .MASTER
    When you're calling images with an image tag directly from the html, you're kind of switching from 'design' to 'content'. And since you're not using Sitefinity to handle to content, you'll need to do the extra typing ;) 

    In that case you should provide full urls that start from your applications root, like this
    <img src="~/Sitefinity/WebsiteTemplates/Template/App_Themes/name/images/myimage.png">

    In that case it won't matter if the website is running as an IIS website, or as an application inside of a website, but it'll always traverse from the current root.

    Naturally if you change your theme's name, all the urls provided will no longer function. So perhaps instead of using a hardcoded img tag, try a css alternative as mentioned above.

    Jochem.
  • Is this the acceptable way to do it?

    We had come to this same conclusion and were wondering.
  • Rick,

    Yep!

    Generally, images in master pages are useful when I want to use an <img> tag in my source. If I'm using the image as a background or something, CSS is better suited for the job.

    In either case, I do it in the way stated above.