macro media razor - Templates, (partial) views and macros

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

Jon-Paul Edwards 6 posts 87 karma points

Apr 22, 2016 @ 10:05
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 6163 posts 24143 karma points MVP 8x admin c-trib

Apr 22, 2016 @ 10:27
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 1349 posts 4458 karma points c-trib

Apr 22, 2016 @ 10:32

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 1349 posts 4458 karma points c-trib

Apr 22, 2016 @ 10:32

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

0

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

Copy Link
Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib

Apr 22, 2016 @ 12:46

0

You are welcome.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Macro Media (Razor)