rendering media picker image

Ben John Bagley 16 posts 146 karma points

Oct 10, 2018 @ 13:21

Hi,

So I have the following partial

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var selection = Model.Content.Site().FirstChild("blogPage").Children("blogPost").Where(x => x.IsVisible());
}

@foreach(var item in selection){
    <div class="column">
      @{
        var mainPostImage = Model.Content.GetPropertyValue<IPublishedContent>("mainPostImage");
          if (mainPostImage != null)
          {
            <img src="@mainPostImage.Url" alt="@mainPostImage.GetPropertyValue("mainPostImageAlt")" />
          }
        }
      <div class="blog-inner">
        <a href="@item.Url">
          <h3>@item.Name</h3>
        </a>
        @Umbraco.Truncate(item.GetPropertyValue<string>("blogContent"), 200)
      </div>
    </div>
}

and I'm trying to render the image that I have selected in from the media library, this is how the data type is set up.

enter image description here

But it doesn't seem to render here is the output I'm getting

enter image description here

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 10, 2018 @ 14:11

Hi Ben

There is a check for a null value in case no image has been select in your code above. Please try and check if an image has in fact been selected in the content section for the page that you're trying to see in your browser.

If an image has indeed been selected could it perhaps then be some sort of caching issue you experience?

/Jan

Copy Link

Ben John Bagley 16 posts 146 karma points

Oct 10, 2018 @ 14:18

I do have an image selected yes.

enter image description here

I have tried in incognito, but the same result

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 10, 2018 @ 14:29

Hi Ben

Ok sorry if I stated the obvious above but you never know and I myself have been making mistakes where I have been looking at the wrong page instead of the one where the image was inserted - Sometimes it's those small silly things :-)

Hmm...What happens if you try rendering the image without the null check? Or if you just try to render @mainPostImage just above your null check?

I suspect that it will probably render the media id. So you should actually try to do something like (from the top of my head)

<img src="@Umbraco.TypedMedia(mainPostImage).Url" />

Does that work for you?

/Jan

Copy Link

Ben John Bagley 16 posts 146 karma points

Oct 10, 2018 @ 14:49

Hi Jan,

Ok I've just tried

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var selection = Model.Content.Site().FirstChild("blogPage").Children("blogPost").Where(x => x.IsVisible());
}

@foreach(var item in selection){
    <div class="column">
      @{
        var mainPostImage = Model.Content.GetPropertyValue<IPublishedContent>("mainPostImage");
        <img src="@Umbraco.TypedMedia(mainPostImage).Url" />
      }
      <div class="blog-inner">
        <a href="@item.Url">
          <h3>@item.Name</h3>
        </a>
        @Umbraco.Truncate(item.GetPropertyValue<string>("blogContent"), 200)
      </div>
    </div>
}

and I just get a runtime error, I get this

enter image description here

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 10, 2018 @ 15:26

Hi Ben

Argh! Sorry that I'm confusing you - Also it's just now that I notice you're inside a loop! My bad :-)

You should write it like this then

@if(item.HasValue("mainPostImage")){
     var mainPostImage = @Umbraco.TypedMedia(item.GetPropertyValue<int>("mainPostImage"));
     <img src="@mainPostImage.Url" />
}

This should do the trick - Once again sorry for the confusion previously!

/Jan

Copy Link

Ben John Bagley 16 posts 146 karma points

Oct 10, 2018 @ 15:44

Hi Jan,

Don't worry about it, this is all new to me so I'm still seeing how everything works.

Apparently, I have a parse error but I'm not seeing it.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var selection = Model.Content.Site().FirstChild("blogPage").Children("blogPost").Where(x => x.IsVisible());
}

@foreach(var item in selection){
    <div class="column">
      @if(item.HasValue("mainPostImage"))
      {
        var mainPostImage = @Umbraco.TypedMedia(item.GetPropertyValue<int>("mainPostImage"));
        <img src="@mainPostImage.Url" />
      }
      <div class="blog-inner">
        <a href="@item.Url">
          <h3>@item.Name</h3>
        </a>
        @Umbraco.Truncate(item.GetPropertyValue<string>("blogContent"), 200)
      </div>
    </div>
}

enter image description here

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 10, 2018 @ 18:37

Hi Ben

Hmm, that's odd? I assume that your for loop from the initial post did work before you changed anything, right? If so please try this example, which is a modified version of what you originally posted.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var selection = Model.Content.Site().FirstChild("blogPage").Children("blogPost").Where(x => x.IsVisible());
}

@foreach(var item in selection){
    <div class="column">
      @{
        var mainPostImage = Umbraco.TypedMedia(item.GetPropertyValue<int>("mainPostImage"));
          if (mainPostImage != null)
          {
            <img src="@mainPostImage.Url" alt="" />
          }
        }
      <div class="blog-inner">
        <a href="@item.Url">
          <h3>@item.Name</h3>
        </a>
        @Umbraco.Truncate(item.GetPropertyValue<string>("blogContent"), 200)
      </div>
    </div>
}

Does this work for you?

And when starting out the less confusion the better ;-) - The reason why you need to use Umbraco.TypedMedia is because what you get is a media id and the TypedMedia method accept an integer in order to figure out what media item has been selected btw :)

/Jan

Copy Link

Ben John Bagley 16 posts 146 karma points

Oct 10, 2018 @ 18:47

Hi Jan,

Ok, that worked, thank you for the explanation, it's very helpful.

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 10, 2018 @ 18:47

Hi Ben

Delighted to hear that! Happy coding :)

/Jan

Copy Link

is working on a reply...

Flag this post as spam?

Rendering media picker image