+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Hard coded images in master pages

Hard coded images in master pages

12 posts, 0 answered
  1. Justin
    Justin avatar
    11 posts
    Registered:
    28 Feb 2011
    10 Mar 2011
    Link to this post

    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?
  2. Justin
    Justin avatar
    11 posts
    Registered:
    28 Feb 2011
    11 Mar 2011
    Link to this post
    SOLUTION!!!

    Ignore the Designer Guide's intructions and put your "MyTemplate" folder in the root directory, not App_Data/Sitefinity.
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    12 Mar 2011
    Link to this post
    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
  4. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    14 Mar 2011
    Link to this post
    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
  5. Justin
    Justin avatar
    11 posts
    Registered:
    28 Feb 2011
    14 Mar 2011
    Link to this post
    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.
  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    14 Mar 2011
    Link to this post
    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?
  7. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    16 Mar 2011
    Link to this post
    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. 
  8. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    21 Mar 2011
    Link to this post
    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
  9. Joshua
    Joshua avatar
    1 posts
    Registered:
    29 Sep 2008
    17 Nov 2012
    Link to this post
    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
  10. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    17 Nov 2012 in reply to Joshua
    Link to this post
    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.
  11. Rick
    Rick avatar
    32 posts
    Registered:
    13 Dec 2006
    20 Nov 2012
    Link to this post
    Is this the acceptable way to do it?

    We had come to this same conclusion and were wondering.
  12. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    02 Jan 2013 in reply to Rick
    Link to this post

    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.

12 posts, 0 answered