image not rendered by template

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Graham Thomson 56 posts 136 karma points

Dec 13, 2016 @ 19:55
0

Image not rendered by template

Using Umbraco And Getting Started

Umbraco 7
Hi

I created a template. I can get it to output Headline text, a paragraph of copy, but the image I have set up with the media picker does not work.

Instead, where the image should be, only the ID for the image is shown.

Does anyone have a solution for this please?

The code snippet below shows what I am trying to do - it is the field imageByNews that is causing the problem.
```
<div class='container'><div class="col-md-6">
  <h1>@Umbraco.Field("hPHeadline")</h1>
  <p>@Umbraco.Field("hPMainstory")</p>
  <button type='button'>Take the Tour</button>
  <button type='button'>Book Tickets Now</button>
</div><div class-"col-md-6">@Umbraco.Field("imageByNews")</div></div>
```
Thanks

Graham
Copy Link
Nik 1599 posts 7179 karma points MVP 6x c-trib

Dec 13, 2016 @ 21:01
100
Hi Graham,

Rendering out an image is generally a multi-step process. On your document only the id is stored so the first step is retrieving the id off of the document. After that you then need to retrieve the media item so you can render that out correctly.

You're current code is only performing the first stage of this process.

Try using the following code to render out your image:
```
<div class="col-md-6">
   @{
          var mediaId = Model.Content.GetPropertyValue<int>("imageByNews");  //This is a variation on your step 1
          var mediaItem = Umbraco.TypedMedia(mediaId); //This is the first stage of step 2
          <img src="@mediaItem.GetUrl()" >

    }
</div>
```
Just some things to note:

1) I would put in some checks for nulls and has value to ensure your document shows an image only when it has an image set.

2) I would look to use GetCropUrl() instead of GetUrl() so you can render out the correct size image (assuming you have cropping set up).

Hope that helps :-)

Nik
Copy Link
Graham Thomson 56 posts 136 karma points

Dec 14, 2016 @ 08:16

0

Thanks for this Nik! I appreciate the help.

Unfortunately I am getting a server error when I try this -

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1061: 'Umbraco.Core.Models.IPublishedContent' does not contain a definition for 'GetUrl' and no extension method 'GetUrl' accepting a first argument of type 'Umbraco.Core.Models.IPublishedContent' could be found (are you missing a using directive or an assembly reference?)

Source Error:

Line 22: var mediaId = Model.Content.GetPropertyValue

Copy Link
Nik 1599 posts 7179 karma points MVP 6x c-trib

Dec 14, 2016 @ 08:25

0

Ahh, sorry Graham, my mistake.

It should be .Url instead of .GetUrl()

Nik

Copy Link
Graham Thomson 56 posts 136 karma points

Dec 14, 2016 @ 08:52

0

Thanks Nik! That's great - just one more thing...... the ID is being returned under the image. Any idea how I would stop this happening?

Thanks again

Graham

Copy Link
Nik 1599 posts 7179 karma points MVP 6x c-trib

Dec 14, 2016 @ 09:03

0

Hi Graham,

If you still have the @Umbraco.Field("imageByNews") bit of code in your view then you just need to remove it. If you don't, paste your view code here and I'll have a look for you :-)

Nik

Copy Link
Graham Thomson 56 posts 136 karma points

Dec 14, 2016 @ 09:10

0

Thanks Nik - yes realised my mistake! Doh!!

Thanks again!

Graham

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?