Copied to clipboard

Flag this post as spam?

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


  • Jon 38 posts 157 karma points
    Aug 13, 2014 @ 18:30
    Jon
    0

    Render an Image in Umbraco 7

    I'm rendering an image from a media picker field.

    So far I've managed to render the image like this:

    @if (Umbraco.Field("footerLogo", recursive: true) != null)
    {
    var dynamicMediaItem = Umbraco.Media(Umbraco.Field("headerLogo", recursive: true).ToString());
    <img src="@dynamicMediaItem.umbracoFile" alt="" />
    }

    This works fine but I'd like a more reusable way of rendering it. I'm new to Umbraco and I'm trying to work out the best practice. Would this best be achieved through the use of a macro? Partial?

    I've tried creating a partial but in order to use say 'Umbraco.Media' I have to have the partial inherit from @inherits Umbraco.Web.Mvc.UmbracoTemplatePage. I'd rather keep things simple and have the @model as an int and render the image using just that information. Is this something that's possible?

    Thanks!

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Aug 13, 2014 @ 19:28
    Dennis Aaen
    0

    Hi Jon,

    You could make a partial view as you already or a parital view macro. that you can use on other templates,

    In your partial view you can use the syntax to print the image from the media picker. Documentation for the media picker can you find here:

    http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors/media-picker

    @{      
       
    if(CurrentPage.HasValue("
    _headerLogo")){                                        
           
    var dynamicMediaItem = Umbraco.Media(CurrentPage.
    _headerLogo);
           
    <img src="@dynamicMediaItem.Url" alt="@dynamicMediaItem.Name"/>
       
    }
    }

    The underscore before the property alias tells that it is recrusive you can find the documentation here: http://our.umbraco.org/documentation/Reference/Querying/DynamicNode/Properties#Model_propertyAlias

    The HasValue, checks if the field has a value an only print if its true.

    If you don´t already know it, there are some free videos at Umbraco TV that shows the basic conecpts of Umbraco. http://umbraco.tv/videos/umbraco-v7/

    Hope this helps. If you have any further questions, don't hesitate to ask again, or if I have misunderstood your question.

    /Dennis

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Aug 14, 2014 @ 00:08
    Jeavon Leopold
    0

    Hi Jon,

    There are many approaches to making this reusable but I would recommend a value converter so that the media picker is already a full media item (IPublishedContent). You could of course write your own, however I have written one already, source code is here. Or you could install my package which includes this and other value converters from here.

    With the package installed, your code would simply be something like the below for every media picked

    @{
        if (CurrentPage.HasValue("headerLogo", true))
        {
            <img src="@CurrentPage._headerLogo.Url"/>
        }
    }       
    

    This and more examples can be found here

    Jeavon

  • Jon 38 posts 157 karma points
    Aug 14, 2014 @ 00:30
    Jon
    0

    Hi Dennis,

    Thanks for the reply.

    That solution looks nice and concise but it's not very reusable. It always looks for a field '_headerLogo'.

    I'd like to create a marco/partial that allows me to pass in the field to render.

    Like this:

    @Umbraco.RenderMacro("Image", new { id = item.GetPropertyValue("logo"), alt = item.GetPropertyValue("name") })

    When I try this though I can't get access to the parameters...

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{
        var id = Model.MacroParameters["id"]; // ERROR HERE - the key 'id ' isn't found.
        var image = Umbraco.Media(id);
    
        var alt = Model.MacroParameters["alt"];
    }
    @alt
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Aug 14, 2014 @ 08:18
    Dennis Aaen
    0

    Hi Jon,

    Have you added the two parameters, to your macro? If not you need to do it, before you can access from your Razor.

    Yon can see this documentation on how to add a parameter to your macro. Just see how to add the parameter, to the macro, not how the are passing the data from the macro, it is the old legacy razor, (Dynamic Node Razor), which is deprecated.

    http://our.umbraco.org/documentation/reference/templating/macros/razor/using-macro-parameters

    You are doing it just right with this:

    Model.MacroParameters["paramAlias"]

    Here are some good razor cheatsheets, for both the dynamic razor and the strongly typed. I know it´s say for version 6, but you can also use this for version 7.

    http://our.umbraco.org/projects/developer-tools/umbraco-v6-mvc-razor-cheatsheets

    Hope this helps,

    /Dennis

  • Jon 38 posts 157 karma points
    Aug 14, 2014 @ 11:35
    Jon
    0

    Perfect, works like a charm! Thanks for the help.

    @Jeavon - I installed your package too and it's a massive help. Thanks!

Please Sign in or register to post replies

Write your reply to:

Draft