Umbraco css vs images path

Question

I creating new website using Umbraco(version 6.1.1 with razor) and I am new to Umbraco. My settings panel is like this.

enter image description here

In my Master template I am using my css styling and JavaScripts are like this. And their paths are ok.

<link rel="stylesheet" href="/css/mobile.css"/>
<script src="/scripts/jquery-2.0.2.js"></script>

CSS and scripts path are working. So that's ok.

Now my problem is I want images for my site. I don't know where to put images and what should be the path.

For example:

I tried to upload pictures to Media enter image description here

In my Master template I tried

<img src="/media/A.jpg" alt="Smiley face" height="42" width="42"> 
<img src="/media/images/A.jpg" alt="Smiley face" height="42" width="42">

Also in the CSS file

background-image:url('/media/images/A.jpg');

But these are not working. I just trialing them. Actually I don't know the correct way of doing it :(

So where should I store images in Umbraco and how should I locate the path in CSS files and template files ?

Please help!

Thanks in Advance ....

Douglas Ludlow Douglas Ludlow · Accepted Answer · 2013-06-27T21:02:16

Items stored in the media section will have a path like:

/media/<row_id>/filename.ext

Where <row_id> is literally the id of the row in the database where the media item's information is stored.

One way you can determine the path of the media item is to click on the thumbnail (if it's an image) and copy what is in the address bar.

You can also access the file by id via a macro using xslt or razor. Here's a razor example:

@{
    int imageId = 1069;
    var media = Library.MediaById(imageId);

    <img src="@media.umbracoFile" alt="" />
}

However, this is a content management system, and you will no doubt have end-users managing the content and, therefore, it wouldn't make sense to place design specific images in the media section. A more full-proof approach would be to simply place them in an images folder in the root of your site and use them from there.

Umbraco css vs images path

2 Answers