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


  • Jon-Paul Edwards 6 posts 87 karma points
    Apr 22, 2016 @ 10:05
    Jon-Paul Edwards
    0

    Macro Media (Razor)

    Hi,

    I am trying to learn Umbraco. I have subscribed to umbraco.tv and watched all of the videos, and I am trying to make my way through the documentation, but I am stuck.

    I am trying to create a macro with 4 parameters (image, text, title, link). I am using the razor partial macro with the following code:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

    <div>
    <div class="col-md-6">
        @Model.MacroParameters["Image"]
    </div>
    <div class="col-md-6">
        <h1>@Model.MacroParameters["Title"]</h1>
        <div>@Model.MacroParameters["Text"]</div>
    </div>
    </div>

    The Title and text display fine, but the image is not displaying. I can kind of understand what I am doing wrong with the Image parameter, but I can't work out how to get it to display. I would be grateful for any help!!

    Copy Link
  • Alex Skrypnyk 6182 posts 24283 karma points MVP 8x admin c-trib
    Apr 22, 2016 @ 10:27
    Alex Skrypnyk
    1

    Hi Jon-Paul,

    Macro parameter stores id of Umbraco Media. So you need to get image by Id and render it.

        var image = Umbraco.TypedMedia(Model.MacroParameters["Image"]);

    if (image != null)
    {
        <img src="@image.Url"/>
    }

    Cheers

    Copy Link
  • Steve Morgan 1350 posts 4460 karma points c-trib
    Apr 22, 2016 @ 10:32
    Steve Morgan
    0

    Hi,

    The id of the image is passed so you still need to do some lifting to render an image (this actually provides more flexibility,...).

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

<div>
<div class="col-md-6">
    @{
        // Umbraco passes us an ID to the image so we need to get it and render it
        var image = Umbraco.TypedMedia(@Model.MacroParameters["Image"]);

        if(image != null)
        {
            <img src="@image.Url" alt="@image.Name" class="img-class"/>
        }
    }
</div>
<div class="col-md-6">
    <h1>@Model.MacroParameters["Title"]</h1>
    <div>@Model.MacroParameters["Text"]</div>
</div>
</div>
    Copy Link
  • Steve Morgan 1350 posts 4460 karma points c-trib
    Apr 22, 2016 @ 10:32
    Steve Morgan
    1

    Hi,

    UPDATE: Alex beat me to it!

    Kind regards

    Steve

    Copy Link
  • Jon-Paul Edwards 6 posts 87 karma points
    Apr 22, 2016 @ 10:57
    Jon-Paul Edwards
    0

    Hi - Thanks both. You have saved me a great deal of time.

    Copy Link
  • Alex Skrypnyk 6182 posts 24283 karma points MVP 8x admin c-trib
    Apr 22, 2016 @ 12:46
    Alex Skrypnyk
    0

    You are welcome.

    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