Hi Aly

How are you fetching the image? Do you have some code you're currently using? If so please share as it will make it easier to help you out.

And are you using Razor or XSLT to fetch the image?

If you get the image then all you need is to wrap it in the <img> tag like <img src="@Model.MediaById(Model.yourpropertyname).umbracoFile" /> for instance if you're using Razor.

Looking forward to hearing from you.

/Jan

Thank you for the reply. Sounds odd but I do not have any code to source the image (Don't laugh). The logic being, you create a Doctype with a Property set to Richtext Editor, go to Content, type something or indeed add an image and it renders in the browser. Therefore, you would expect to create a Doctype with a Property set to Media Picker (select image from your Media folder) it would display in the browser. However, I just get the node number. Or as in my forum title, I also set the Property to 'Upload' pick my delicious image of a monkey and it is displayed. Seems not.

Therefore, it appears I have to work on some code. Razor would be best as I am being told XSLT is nasty.

Hope you can help,

Aly

I added the Razor you suggested in my Master Template and adjusted the 'yourpropertyname' accordingly. 

<header><h1>Title of Website</h1><img src="@Model.MediaById(Model.image).umbracoFile" /></header>

However, my images path is still broken? :)

Hi Aly.

Are you using dynamic macro razor scipts, files located under the folder Scripting Files, or are you using MVC files under the
Partial View Macro Files in the develper section. There are some difference. I would recommend you to use Partial View Macro.

I have linked to the documentation for getting images from a type of 'Upload'.

http://our.umbraco.org/DOCUMENTATION/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors/Upload

If you´re using dynamic macro razor scipts you could try this

@{      
   if (Model.HasValue("umbracoFile")){
       <a href="@Model.umbracoFile">Download file</a>
   } 
}

If you are using Partial View Macros you could try this.

@{      
   if (CurrentPage.HasValue("umbracoFile")){
        <a href="@CurrentPage.umbracoFile">Download file</a>
   } 
}

Hope this helps,

/Dennis

Hi Aly

Don't worry no one is going to laugh. Sometimes we just need to figure out your context in order to provide the best possible answer/solution. And since there are a number of options to take into consideration it's always better to ask some initial questions instead of jumping directly to the solution based approach.

Don't believe all that you hear XSLT is not neccesarily nasty...it depends on your background in my humble opinion. I'm a frontend guy that loves HTML and the XML/XSLT approach makes sense to me. Other frontenders love Razor and if you're primarily a backend developer I'm sure you're more into  Razor :)

Sorry about my former sample it seems to be some legacy Razor stuff from the early implementations of Razor in Umbraco.

Go with the exampltes Dennis provides above...In this case the <img> tag should look like this

<img src="@CurrentPage.umbracoFile" alt="" />

Cheers,
Jan 

Ok so in my template I have placed in the macro ...

                <header>
                   
                    <h1>Title of Website</h1>
               
                    <umbraco:Macro Alias="BannerImage" runat="server"></umbraco:Macro>
                   
                </header>

And I have created a macro with the following code:

@inherits umbraco.MacroEngines.DynamicNodeContext

@* The fun starts here *@
   
    @{     
   if (Model.HasValue("umbracoFile")){
       <a href="@Model.umbracoFile">Download file</a>
   }
}

However, this now shows nothing?

Hi Aly

Hmm, how do you select the image that should be rendered? I'm guessing you're using an upload field so the image is stored directly on the node and not a media picker?

However You're referencing @Model in your example instead of @CurrentPage as the exampltes shown above does :)

/Jan

If switching from @Model to @CurrentPage does not help then try this

If you're using the upload field then try <img src="@(Model.Content.GetPropertyValue<string>(“image”))" alt="" /> - That should return the upload path if I'm not mistaken.

If you're using a media picker then try <img src="@(Model.Content.GetPropertyValue<string>(“image”)).umbracoFile" alt="" /> This should return the path based on the id...if I'm not mistaken :)

/Jan

I have tried both data type methods, Media Picker and Upload. Also tried placing your code: etc in my template and still no joy.

My goal is to give a user the ability to upload or choose an image from the Media section and display it on the site where ever I have placed the Umbraco Field item or the macro. Surely this can't be that hard to do?

Hi Aly

No it should not be hard to do. But to make sure we're on the same page could you perhaps post a screendump of your document type in the content section, which you're trying to fetch the image from? Just so I get the context right.

Cheers,
Jan 

Above is my shows the data type.

Above is the upload button and selected image in the Content area of Umbraco.

                <header>
                   
                    <h1>Title of Website</h1>
               
                    <img src="@(Model.Content.GetPropertyValue<string>(“image”))" alt="" />
                   
                </header>

The above code is in my template. I took out the Razor Macro as this didn't do anything :)

Hi Aly

Ok, thanks. So you're uploading the image directly on the document using the upload datatype.

What happens if you just write <p>@Model.Content.GetPropertyValue<string>("image")</p> - Does that return the path?

Forgive me for being slow, but Razor is not my main thing and the implementation have changed quite a few times (for the better!) during the past years so it can be a bit hard to keep up with the changes :)

/Jan

Hi Aly

Ok, just tried the scenario out myself.

If I write this directly in my template the image is rendered <img src="@CurrentPage.image" />

Since you're using the "Upload" datatype a string of the path is simply returned and should of course just be wrapped in the <img> tag.

Does this also work in your end? :)

/Jan

If I do this the text '@Model.Content.GetPropertyValue("image")' gets rendered.

Forgive me for being slow. I don't mind using either Upload or the Media Picker. As I am a front-ender, I can hard code the images on the site, but this defeats the idea of me learning Umberto and benifiting from the CMS side of things.

Hi Aly

No no, there is not right or wrong - How you choose to do it is your call and entirely up to you.

And you should of course not go back to hardcoding the images at all since that would make no sense when you're using a CMS :)

You can keep doing it the way you're doing it now.

The benefit is that it's easy to fetch the image since it's just a string on the currentpage. Just like I showed in the above example. If editors want to reuse the images on other pages then they need to upload the image on all of the pages.

But if your editors want to be able to reuse the image then it's more beneficial to upload the image in the "media" section and then use the "media picker" datatype on the document where the editors can pick images from the media section. That way images can easily be reused across pages.

The media picker returns an ID, which you need to lookup in order to fetch the associated image.

But for now I think that your current approach is probably fine untill you learn a bit more about Umbraco and Razor. When you feel comfortable with that then you can move on and try using the media picker instead.

I hope things begin to make sense? And that you're not too scared now :)

/Jana

I get the broken image path in the browser.

Here is the content tree.

Hi Aly

Ok...it just now occurs to me that I actually don't know what version of Umbraco you're using?

I thought you were using version 7 but from the screendumps you clearly don't. So before we go any further what version of Umbraco are you using? Is it v6 or v4?

As I mentioned in some of the former posts the Razor implementation has changed a lot during versions etc. So that might be why you don't succeed because the code we have provided is working on newer versions.

Cheers,
Jan 

I'm using Umbraco v6.1.6 with a cup of tea on the side :) I think by what you said, the Media Picker seems a better method going forward. I am ok with Razor Macros in the sense that I can place them in the template. As long as for the macro I have a chunk of usable code to perform a certain task, I'm good.

Hi Aly

Ok, then the Razor syntax should be the same.

I'm happy to hear that my advice made sense and that you're patient :)

Ok...so I played around on my local installation using the media picker instead.

So what I did was the following

1: Go to the developer section

2: Right click the "Scripting files" folder and create a new macro

3: In the file I wrote the following <img src="@Library.MediaById(@Model.imagePicker).umbracoFile" /> - imagePicker should be the alias of your choise

4: I placed the macro in the template I'm using for the document

This gave me the image I chose using the media picker.

Hope this works for you as well.

Once you got this working I think you might want to have a look at the DAMP package, which you can find here http://our.umbraco.org/projects/backoffice-extensions/digibiz-advanced-media-picker it is a really nice package, which let's you do many cool things with your media items and Jeroen (The creator of the package) is always happy to help if people are stuck.

/Jan

All done and understood, but my image is still broken :( I have heard ImageGen is pretty useful as well. I'm sure I will get round to looking at these soon. Thanks for your help. It is very much appriciated.

Hi Aly

Hmm...ok that's weird...if you have a look at the source code...does it then return anything at all? I'm thinking if you're using the inspector tool of your browser or are there errors returned?

And are you 100% sure that the image has been uploaded?

Yes indeed ImageGen is a nice imagehandler :) Make sure to checkout CropUp as well.

/Jan

@Ally , try with the following assuming you coding it directly in your template

<img src="@CurrentPage._image" />

Oh no...if it's that easy I'm going bonkers!...;-)

/Jan

@Ally also if that doesnt' work you are probably on an older umbraco version, so if you provide the version number we can provide a snippet that does the trick

@Tim - The version is 6.1.6 ;-)

The image is uploaded because it is staring me in the face like some evil monkey. I have switched to using a datatype on Media Picker with the Alias of 'image'. Then I have gone to the developer section and created a Razor Macro, here is the little puppy:

@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines;
@{
        if (Model.template > 0)
        {
            if (!string.IsNullOrEmpty(Model.mainImage.ToString()))
                {
                    dynamic mediaItem = Library.MediaById(Model.image);
                    <div id="page-image">
                        <img src="/[email protected]&amp;constrain=true" alt="@Model.image" />
                    </div>
                }
        }
    }

My template has the macro in it. Still no joy :)

Hi Aly

Hmm, ok...pulling my hair over this :D

However...I'm going to download Umbraco 6.1.6 and see if there is a difference in the approach.

But I think you got a lot of stuff going on. I would like to cut it down to the basics...so No "if" sentence, no imagegen etc. since it makes it too difficult to figure out where things go wrong.

So let's cut it to the basics and then build on top on that...once you see the rendered image...:)

So now I'm going to do this

1: Download and install Umbraco 6.1.6
2: Setup at basic docoument type called "Master" with one property on it called "Image" with the alias of "image".
3: Assign a template to it called master
4: Create a scripting file macro called "Image"
5: Fetch the image
6: Place the macro on the template
7: Post the working code in here

Stay tuned! Brb :) 

@Aly, mind sending me the login details to the umbraco instance I'm sure it's something obvious and just taking a look should fix it in 5 mins. You can mail tg at umbraco dot com

Hi Aly

Ok, so I got it working on v6.1.6 as well with the same code I posted previously for v7.

I was wondering if you would min sharing your e-mail? Or I can find you on twitter and then we can follow each other so you can just DM it to me?

Because then I want to share a dropbox folder with you where you log in and see what I'm doing.

Sounds like a plan?

/Jan

@Tim I am working locally with WebMatrix. Otherwise would have been a good idea.

@Jan try emailing me via [email protected] thanks

Hi Aly

I just sent you an invite to my dropbox folder with the running instance where my code is working.

Credentials etc. is in the dropbox message.

Give it a spin and try to watch carefully if something in your approach differs from mine. Also try cutting the code down to the basics like I mentioned above.

Hope this helps! :)

/Jan

is working on a reply...