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
    Graham Thomson
    0

    Image not rendered by template

    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

  • Nik 1612 posts 7258 karma points MVP 7x c-trib
    Dec 13, 2016 @ 21:01
    Nik
    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

  • Graham Thomson 56 posts 136 karma points
    Dec 14, 2016 @ 08:16
    Graham Thomson
    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

  • Nik 1612 posts 7258 karma points MVP 7x c-trib
    Dec 14, 2016 @ 08:25
    Nik
    0

    Ahh, sorry Graham, my mistake.

    It should be .Url instead of .GetUrl()

    Nik

  • Graham Thomson 56 posts 136 karma points
    Dec 14, 2016 @ 08:52
    Graham Thomson
    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

  • Nik 1612 posts 7258 karma points MVP 7x c-trib
    Dec 14, 2016 @ 09:03
    Nik
    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

  • Graham Thomson 56 posts 136 karma points
    Dec 14, 2016 @ 09:10
    Graham Thomson
    0

    Thanks Nik - yes realised my mistake! Doh!!

    Thanks again!

    Graham

Please Sign in or register to post replies

Write your reply to:

Draft