More in this section

Forums / Developing with Sitefinity / Relative image paths

Relative image paths

10 posts, 0 answered
  1. Al
    Al avatar
    33 posts
    Registered:
    28 Dec 2008
    20 Jul 2010
    Link to this post
    Hello,

    When im developing within sitefinity and editing a site from within the project manager my images which are hardcoded into the html markup do not appear...rightly so, because the url is http://localhost/<project>/default.aspx for example whereas my image relative path is /images/logo.jpg which clearly wont work.

    Whats the best practice for working in this way? Obviously when i deploy the public site the url will actually be http://www.website.com so the relative urls will work.

    The two approaches I have considered are:
    - for development always add the project name to the image url i.e. /<project>/images/logo.jpg and then use the replace tool prior to deployment.
    - add a rewrite rule into the web.config that matches .css/.js/jpg etc extensions, and rewrites the url to include /<project>/

    Does anyone have any advice?

    Regards,
    higgsy
  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    20 Jul 2010
    Link to this post
    Hi Al,

    Why not use an ASP Image control for your image?
    Change it to:

    <asp:Image ID="imgRelative" runat="server" ImageUrl="~/images/logo.jpg" />

    Regards,
    Daniel
  3. Al
    Al avatar
    33 posts
    Registered:
    28 Dec 2008
    20 Jul 2010
    Link to this post
    Hi Daniel,

    Thnaks for your response.

    Thats ok in certain places, but I dont want to have to render every single image using a .net control. Also, how about referencing CSS files, js files and referencing images from within css files...i cant use .net controls in those situations.

    Any other ideas
    higgsy
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    20 Jul 2010
    Link to this post
    Hello Al,

    There are ASP.NET controls that allow you to add js or css to a page. You can use CssFileLink  and JsFileLink controls  How to use jQuery and other JavaScript Libraries in Sitefinity

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    20 Jul 2010
    Link to this post
    Or check this thread (second post):
    http://www.sitefinity.com/devnet/forums/sitefinity-3-x/developing-with-sitefinity/how-to-call-cufons-in-master-page.aspx

    Because the blog post Ivan mentioned doesn't describe that you have to put a directive on the page. Just in case you can't get it to work!

    I use this to reference CSS files:
    <head runat="server">
       <link rel="stylesheet" runat="server" href="~/Assets/css/home.css" type="text/css" />
      
       <!--[if lt IE 7]><link rel="stylesheet" runat="server" type="text/css" href="~/Assets/css/lt7.css" /><![endif]-->
      
    </head>

    Works fine with me.

    Regards,
    Daniel
  6. Al
    Al avatar
    33 posts
    Registered:
    28 Dec 2008
    20 Jul 2010
    Link to this post
    Hi Daniel,

    Yes ok that works. That still presumably means that you cant use any image urls within your css files i.e.

    background-image: url(/i/logo2.jpg);

    ?

    This is actually all happening because the each project is created within the Default web site under the application telerik - this means the url is rendered as http://localhost/<project>/

     is it not possible to just install a project to its own website so that it was acceisslbe from http://localhost - this would mean urls would work as they would on the live site???

    Thanks again
    higgsy
  7. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    20 Jul 2010
    Link to this post

    Inside CSS files I always use absolute paths.
    If you have like the following structure for your assets:

    /Assets
       /Css
       /Images
       /Js

    Then you can use in your example:

    background-image: url(../Images/logo2.jpg);

    That works for me?

    Regards,
    Daniel
  8. Al
    Al avatar
    33 posts
    Registered:
    28 Dec 2008
    20 Jul 2010
    Link to this post
    Thanks for your responses Daniel....your suggestion does work, so thanks alot (im stuck in my ways with root relative paths)!

    As i said in my last post, this issue around paths only happens because each sitefinity project is created within IIS as a child application under the default web site - resulting in a url like http://localhost/<project>.

    Would it not just be far easier to create a web site for each project, as opposed to a child web application (or virtual directory in the IIS6 world). I've just done exactly that and all of the root relative urls work perfectly - can yuo see a problem with doing it this way other than the fact that the sitefinity project manager doesnt know the new url?

    Regards,
    higgsy
  9. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    20 Jul 2010
    Link to this post
    Yes, that seems to be a good option.
    Although I only use the Sitefiniy Project Manager to create a new project. After that I move my whole web project to my D:\Projects folder.

    Inside IIS the websites are created under the 'Default Web Site'. If you want to move your site (virtual directory) one level up, you'll have to work with multiple websites on your machine. I suppose that is only possible if you work with different ports?

    Regards,
    Daniel
  10. Al
    Al avatar
    33 posts
    Registered:
    28 Dec 2008
    20 Jul 2010
    Link to this post
    Hi Daniel,

    Ok thanks mate, you've been a great help.

    I actually develop straight within side a virtual machine running Windows 2008 Server and IIS - it means you can run as many websites as you want, create DNS names by altering the .hosts file (which can be used as host headers), and it also means you minimise the risk of unexpected errors when running your shiny new website on a server for the first time after developing it on XP/Vista etc.

    Im hoping one of the Telerik guys might tell me how to update the project manager so it knows the correct url to look at??.!?!

    higgsy
Register for webinar
10 posts, 0 answered