Hi Haansi,

To make a dynamic solution you need to add a property to your document type, and give it a name, from that name it will get an alias. Choose the media picker as the type. If you don´t know yet how to add new field to a documenttype then see the video tutorials they are showing the basic concepts of Umbraco http://umbraco.tv/videos/umbraco-v7/implementor/. And for your case, take a look at this chapter: http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/document-types

Here are a specific video about adding new properties to your document type. http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/document-types/properties/

After you have added the property to the document type, try navigate to one of the the pages that use the document type and make sure that the new field is showing. If you have choose the media picker, you should see a choose, and if you click on it, you will get a dialog, with an overview of your content in the media section in Umbraco. Choose the image that you want to use.

After that save and publish the page. To get it to display on your site, we need to extend your parial view with some more code to get out the image. There are two types of razor that you can choose, a dynamic version and a strongly typed version. Both versions will work in your partial view.

So lets say that you have added a property to your document type, called Main image, then it will automatically get a alias of mainImage.

Then to get the image you need to do this in your parial view.

For the dynamic version of razor your can do this:

@inherits UmbracoTemplatePage
<div>
    <p style="text-align:center">Headign here</p>   
    @{
        if (CurrentPage.HasValue("mainImage")){                                         
               var dynamicMediaItem = Umbraco.Media(CurrentPage.mainImage);
            <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name"/>
        }  
    }
</div>

For the strongly typed razor version you need to do this:

@inherits UmbracoTemplatePage
<div>
    <p style="text-align:center">Headign here</p>   
    @{
        if(Model.Content.HasValue("mainImage")){
            var mediaItem = Umbraco.TypedMedia(Model.Content.GetPropertyValue("mainImage")); 
            <img src="@mediaItem.GetPropertyValue("umbracoFile")" alt="@mediaItem.GetPropertyValue("Name")"/>    
    }   
}
</div>

What the HasValue does is that it checks that the field has a image assigned to it, for the current page that you are viewing in the browser. If you the field doesn't have a image assigned then it will not pull out the markup for the image.

You can find the documentation for the media picker here: http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors/Media-Picker

In Umbraco you can work with Partial views and Partial views macros. The documentation for the Partial views can you find here: http://our.umbraco.org/documentation/Reference/Mvc/partial-views and the documentation for the Partial view macros can you find here. http://our.umbraco.org/documentation/Reference/Templating/Macros/Partial-View-Macros/

In my examples I use a partial view.

Hope this helps, if you have further questions on how you do this keep asking.

/Dennis

Thanks Dennis,

Can't I use image without makeing it dynamic ? I mean I just want to add an Image tag giving image path one uploaded to Umbraco. I mean I don't want to use API, please guide.

Thanks

is working on a reply...