Umbraco 5.1 display image in template

Question

Could someone give me a step-by-step description on how to display an image within an Umbraco 5.1 template.

It must be so ridiculously simple that no one has bothered to describe it. If you could make it step-by-step that would be great. I've now read and attempted to implement all sorts of xslt and razor statements, partials and marcos and haven't even got close.

Answer 1

A common point of confusion in Umbraco is that there actually two different field types, one for 'uploader', and one for 'media picker'.

With uploader, you upload the image directly to the content page.

With media, you upload the image to the Media Library, and then reference the content across the site, using the media picker control.

Since you say your content has a media id, I'm assuming that you're attempting to use a media picker--Here's the easiest way that you can output the image chosen by your media picker field.

@Umbraco.GetMediaUrl(@CurrentPage.MyImageFieldAlias)

Answer 2

I do like this in umbraco5

<img src="@umbraco.GetMediaUrl(Model,"propertyAlias")" alt="image"/>

Answer 3

src="@Umbraco.GetMediaUrl(Model.Id, "image")" 

where Model.Id is the imageid of a perticular image.

Answer 4

I do it like this .

First create a Umabraco macro. Give it a relevant name (TopLeftImage) Now use it in the page like this :-

<img src= <umbraco:Item field="TopLeftImage" useIfEmpty="TopLeftImage"  runat="server"/>   />

Answer 5

follow these steps,you will definitely get rid from this problem:

1.first create a image field in umbraco Cms using media picker data type,then upload a image to that field.

2.Create a asp:image control in visual studio page

<asp:image ID="imgLogo" runat="server">

3.Then Code Behind do the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.presentation.nodeFactory;
using Umbraco.Core;
using umbraco;
using umbraco.cms.businesslogic.media;
using umbraco.interfaces;

    public partial class UserControls_Header_Nav : System.Web.UI.UserControl
    {
        umbraco.NodeFactory.Node headerNode = uQuery.GetNode(1139);
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack) 
            {
            LoadData();
            }
        }


    private void LoadData()
    {

        if (headerNode != null)
        {

            if (headerNode.GetProperty("imgLogo") != null && !string.IsNullOrEmpty(headerNode.GetProperty("imgLogo").Value))
            {
                string url;
                Int32 PhotoId = Convert.ToInt32(headerNode.GetProperty("imgLogo").Value);
                var media = new umbraco.cms.businesslogic.media.Media(PhotoId);
                var file = media.getProperty("umbracoFile");
                url = (string)file.Value;
                imgLogo.ImageUrl = url;
            }
        }

    }
}

and this will work for you :-)