Hi Chris and welcome to our,

I will try to help you, I assume that you are using the media picker data type. If so you should be able to print the image with something like this:

<div class="content-img">
     @if(CurrentPage.HasValue("FeatureImage1")){                                         
        var dynamicMediaItem = Umbraco.Media(CurrentPage.FeatureImage1);
        <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name"/>
    }
 </div>

You can find the documentation for the built-in-property-editors in Umbraco, the documentation is for version 6 and 7 of Umbraco. http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/ and here you find documentation for the media picker.

http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors/Media-Picker

Hope this helps,

/Dennis

Hi Dennis,

Thank you for your reply. I added your code to my page, but unfortunately nothing rendered. Do you mind if I step through it with you?

@if(CurrentPage.HasValue("FeatureImage1")){

Okay, so here we starting our "if" statement. "If" the Current Page contains the value "FeatureImage1", then do stuff. When we say "FeatureImage1", is this in reference to a Data Type (in this instance, the Data Type being a Media Picker named "FeatureImage1")?

var dynamicMediaItem = Umbraco.Media(CurrentPage.FeatureImage1);

Here we're creating a variable named "dynamicMediaItem" and defining it as an Umbraco Media item, with the parameters of it being any "FeatureImage1" located on the Current Page. Again, is this "FeatureImage1" in reference to a data type set inside the Document Type?

--

On the Media Picker documentation page, there are a few examples of retrieving media from a Media Picker. I attempted to use one of the Razor Macros:

var selectedMedia2 = @Model.Media("FeatureImage1"); <img src="@selectedMedia2.umbracoFile" width="@selectedMedia2.umbracoWidth" height="@selectedMedia2.umbracoHeight" alt="@selectedMedia2.Name"/>

However, this results in a Compliation Error, and it complains that the "Umbraco.Web.Models.RenderModel" does not contain a definition for "Media." Is this an error on my part? Do I need to define "Media" somewhere for Umbraco?

Okay, I'm seeing some...interesting behavior, and I just thought I'd post an update.

I ran across an XSLT Macro which seems to work, and somehow is making the other macros work as well.

The XSLT I'm using is simply:

<xsl:if test="number($currentPage/FeatureImage1) > 0">
    <xsl:variable name="selectedMedia" select="umbraco.library:GetMedia($currentPage/FeatureImage1, 0)" />
    <img src="{$selectedMedia/umbracoFile}" width="{$selectedMedia/umbracoWidth}" height="{$selectedMedia/umbracoHeight}" alt="{$selectedMedia/@nodeName}" />
</xsl:if>

However, Dennis' code is now also producing an image, as is my original XSLT macro (which originally produced nothing). It's as if setting this second macro somehow "woke up" the other pieces of code, or provided a path they didn't have before. Doesn't make sense to me.

An efficiency question I have: 

Currently, I have set up a separate XSLT Macro for each "Media Picker" data type on a single template. To me, this seems inefficient. Would it be possible to take the above macro and have it work for multiple Media Pickers? When I say, "select="umbraco.library:GetMedia($currentPage/FeatureImage1, 0)", could I change the last "0" to a "1" and get the second Media Picker? Is this a good way of doing things?

Hi Chris,

You don´t need to setup separate XSLT Macro for each media picker data type on a single template, you could collect the images in one macro, if the images should come after each other. Otherwise you could build up your hole page structure for the page in the XSLT.

You could do something like this in the same XSLT macro.:

<xsl:if test="number($currentPage/FeatureImage1) > 0">
    <xsl:variable name="selectedMedia" select="umbraco.library:GetMedia($currentPage/FeatureImage1, 0)"/>
    <img src="{$selectedMedia/umbracoFile}" width="{$selectedMedia/umbracoWidth}" height="{$selectedMedia/umbracoHeight}" alt="{$selectedMedia/@nodeName}"/>
</xsl:if>

<xsl:if test="number($currentPage/FeatureImage2) > 0">
    <xsl:variable name="selectedMedia1" select="umbraco.library:GetMedia($currentPage/FeatureImage2, 0)"/>
    <img src="{$selectedMedia1/umbracoFile}" width="{$selectedMedia1/umbracoWidth}" height="{$selectedMedia1/umbracoHeight}" alt="{$selectedMedia1/@nodeName}"/>
</xsl:if>

I don´t know you case, but in Umbraco 7, you can add multiple items to the media picker. So I think could you have on media picker called Feature Images and then loop the images.

@if (CurrentPage.HasValue("featureImages")){
 var featuremagesList = CurrentPage.FeatureImages.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
 var featureImagesCollection = Umbraco.Media(featuremagesList);

 foreach (var featureImage in featureImagesCollection ){
 <div class="content">
 <img src="@featureImage.Url" />
 </div>
 }
}

Since you´re using Umbraco 7, is there a specific reason why you are using XSLT and not Razor.

Hope this helps,

/Dennis

Dennis,

That's a good idea for the XSLT file, but unfortunately my layout isn't designed to have all the images in a row. It's more like this:

I am currently using XSLT because my previous attempt at inserting a Razor script resulted in some sort of markup error. The page displays all of my Umbraco fields in a line, ending with an actual image rendered by the Razor Script. Here was the code I was using:

<div class="content-img">
    <umbraco:Macro runat="server" language="cshtml">
          <img src="@Model.MediaById(Model.FeatureImage1).umbracoFile" alt=""/>
  </umbraco:Macro>             
</div>

And here's what the page outputs (with no styling applied; just a white page with black text and the one image):

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = "VA.cshtml"; }
@Umbraco.Field("feature1")
@Umbraco.RenderMacro("FeatureImg1", new {FeatureImg1="1127"})
@Umbraco.RenderMacro("FeatureImg2", new {FeatureImg2="1131"})
@Umbraco.Field("feature2")
@Umbraco.Field("feature3")

Do I need to set some sort of "model value" earlier in my Template file?

Hi Chris,

Okay so you page design looks like this.

Could it be a solution for you to have one macro called e.g Page.xslt, where you build up you´re page design like this only pull out the data if the field isn't empty.

By doing it that way you only end up wiith one macro the the page design like this, and you can add multiple XSLT for pull out the data and images.

It was just an idea how you could solve it.

/Dennis

That does make sense. I'll give that a shot in another XSLT file.

Out of curiousity, do you see anything wrong with my Razor script? I would prefer to use this method, but I'm not sure what I'm doing wrong.

Thanks,

Chris

Hi Chris,

When you are using Razor in Umbraco 7, you should use either dynmaic razor or strongly typed razor. You can parital views http://our.umbraco.org/documentation/Reference/Mvc/partial-views or partial view macros. So for image in a media picker you will do this, like I showed in one of my previous posts.

@if(CurrentPage.HasValue("FeatureImage1")){       
    <div class="content-img">
        var dynamicMediaItem = Umbraco.Media(CurrentPage.FeatureImage1);
        <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name"/>
   
    </div>
}

By doing the check HasValue the div is only printed, if the featureImage1 field has content.

If you see something like @Model.propertyAlias, then is using the DynamicNode razor which is the old legacy razor, and this will be deprecated. So when you see the documentation for thebuilt-in-property-editors, then look at the code snippets for dynamic razor or strongly typed:

http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors/

http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/Built-in-Property-Editors-v7/

Chris since you´re new to Umbraco maybe you could get something by see these free video tutorials about the basic concepts in Umbraco http://umbraco.tv/videos/umbraco-v7/implementor/

Like I said in my XSLT suggestion, you could make a partial view marco that contains all the elements for the page, and the call it something like page.cshtml.

In there you can pull out the data, for the page design, so you only have one file. You now know you can pull out data from a media picker, if you have textstring you will get the data of the field like this:

@CurrentPage.Feature1

If you have an rich text editor you can get the content on the same way, but maybe you need to use the Html.Raw, to decode the HTML.

@Html.Raw(CurrentPage.Feature1)

Hope this helps,

If you have any other questions related to this topic don't hesitate to ask again, or create a new topic in the forum.

/Dennis

Hi Guys,

I'm having a similiar issue with the media picker. What I'm trying to do is really simple. I have one media picker that I need to get one file path and file name from it. Everything I've tried doesnt render and none of the examples focus on something so vanilla. There is no html markup its all being targeted to a macro. The markup is this:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{

    Layout = "umbLayout.cshtml";

}

@Umbraco.RenderMacro("InsertWidgit", new {mediaFile="[need soemthing that works here]" , fileURL="[need soemthing that works here]", [email protected], [email protected]})

I can get the generic properties easily with the @CurrentPage pointer but I can't get anything from the media picker.

Hey Dennis,

I just wanted to update you and let you know I got it figured out. Originally, the Razor script example you provided was giving me an error: it thought the "DynamicMediaItem" variable was undefined. Odd, since we'd just defined it. I moved the variable up a line, outside the <div class="content-img">, and the page started working just fine. It seems Razorscript doesn't like playing with HTML! Still, thanks for all of your help.

Dan,

I'm not super-familiar with Umbraco XSLT Macros, but when rendering a Media item Macro, the GUI should ask you for the image in question. Once you've done that, the code should spit out an ID. Here's what my Macro looked like from earlier:

@Umbraco.RenderMacro("FeatureImg1", new {FeatureImg1="1127"})

Where the first "FeatureImg1" is the name of the Macro, and the second is setting the Macro instance to the ID of my image.

Your Macro should do the work of selecting that "FeatureImg1" attribute:

<xsl:if test="number($currentPage/FeatureImage1) > 0"> // Check to see if the FeatureImage1 exists (is greater than 0?)
    <xsl:variable name="selectedMedia" select="umbraco.library:GetMedia($currentPage/FeatureImage1, 0)" /> // Get the first instance of FeatureImage1
    <img src="{$selectedMedia/umbracoFile}" width="{$selectedMedia/umbracoWidth}" height="{$selectedMedia/umbracoHeight}" alt="{$selectedMedia/@nodeName}" />
</xsl:if>

Hope that helps.

is working on a reply...