Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Gibran Shah 69 posts 240 karma points
    Mar 28, 2019 @ 03:19
    Gibran Shah
    0

    How do I add an image?

    Hello,

    I'm confused about how images work. I did the following:

    1) On the media page, I create a folder called "limos", and I upload an image of a limo to the limos folder.

    2) I go to the content tab, select the "limo service" page, go to the tab where I have my image property, and set it to the limo image I uploaded to the Media/limos folder.

    3) I go to the limo service template and type:

    @Model.Content.RoverPic

    This results in a number (1345) where the image is supposed to be.

    So I try this:

    <div>
    <img src="Media/limos/@Model.Content.RoverPic">
</div>

    This results in a broken image.

    So I try this:

    <div>
    <img src="Media/limos/RangeRover_215x141.png">
</div>

    But again, just a broken image.

    How do you add an image to your page?

    Copy Link
  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Mar 28, 2019 @ 06:03
    Jan Skovgaard
    100

    Hi Gibran

    You will need to pass the id you get brack from @Model.Content.RoverPic to the Umbraco.TypedMedia() method.

    So it should be done like this

    @{
   var mediaId = Model.Content.RoverPic;
   var mediaItem = Umbraco.TypedMedia(mediaId);
}

<img src="@mediaItem.url" alt="" />

    You can learn more here https://our.umbraco.com/documentation/Getting-Started/Design/Rendering-Media/

    I hope this helps!

    /Jan

    Copy Link
  • Gibran Shah 69 posts 240 karma points
    Mar 30, 2019 @ 03:03
    Gibran Shah
    0

    Thanks Jan,

    That works with the following minor adjustments:

    @{
  var mediaId = Model.Content.RoverPic.Id;
  var mediaItem = Umbraco.TypedMedia(mediaId);
}

<img src="@mediaItem.Url" alt="" />
    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies