problem rendering multi media picker in version 728 - Using Umbraco and getting started

Andrew Unger 45 posts 148 karma points

Apr 14, 2020 @ 18:27

Problem rendering multi media picker in version 7.2.8

I am having problems rendering images with the multi media picker. I'm using version 7.2.8 which is a little older than I'm used to and I noticed I need to use 'umbraco:Macro runat="server" language="cshtml"' outside the razor call. For some reason "/umbraco:Macro" part of that tag is highlighted red so I know I'm doing something wrong. Here is what I have tried along with different variations.

                    <umbraco:Macro runat="server" language="cshtml">                    
                    @{
                        var typedMultiMediaPicker = Model.Value<IEnumerable<IPublishedContent>>("largeCarousel");
                        foreach (var item in typedMultiMediaPicker)
                        {
                            <div class="carousel-item"><img src="@item.Url" alt="image3" class="image imageLarger" align="bottom"></div>
                        }
                    }
                    </umbraco:Macro>

Copy Link

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

Apr 14, 2020 @ 20:07

Hi Andrew,

I think in version 7.2.8 Model.Value<>

Probably it should be:

var calouselMediaIds = UmbracoHelper.AssignedContentItem.GetPropertyValue<IEnumerable<int>>("largeCarousel");

In this array, you will have an array with ids.

Then You can get image with this code:

foreach (var mediaId in calouselMediaIds)
                        {
var mediaItem = Umbraco.TypedMedia(mediaId);
  <div class="carousel-item"><img src="@mediaItem.Url" alt="image3" class="image imageLarger" align="bottom"></div>
}

Thanks,

Alex

Copy Link

Andrew Unger 45 posts 148 karma points

Apr 15, 2020 @ 12:12

Thank you for the help I tried using this method and I get this error. Do I need a certain using statement for this to work?

enter image description here

Copy Link

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

Apr 15, 2020 @ 12:41

Try to use just Umbraco instead UmbracoHelper, like this:

var calouselMediaIds = Umbraco.AssignedContentItem.GetPropertyValue<IEnumerable<int>>("largeCarousel");

Copy Link

Andrew Unger 45 posts 148 karma points

Apr 15, 2020 @ 12:51

Thank you for your quick response that did not work either I get this error now "CS0234: The type or namespace name 'AssignedContentItem' does not exist in the namespace 'Umbraco' (are you missing an assembly reference?)" enter image description here

Copy Link

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

Apr 15, 2020 @ 12:54

Umbraco should not be a namespace. Can you show me all your code?

Copy Link

Andrew Unger 45 posts 148 karma points

Apr 15, 2020 @ 12:58

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>S ID</title>

            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
            <script src="js/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>     
            <link rel="stylesheet" href="css/materialize.css">
            <link rel="stylesheet" href="css/styles.css">
       <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">


    </head>

    <body>


            <div class="container"><div class="row">

                <div class="col s12 m12 l8 largerHeight">
                    <div class="float-left">                    
                            <umbraco:Macro runat="server" language="cshtml">
                                @{
                                    if (Model.HasValue("logo"))
                                    {
                                        <img src="@Model.MediaById(@Model.logo).umbracoFile" />
                                    }
                                 }
                            </umbraco:Macro>
                    </div>

                    <div class="cropped">
                            <umbraco:Macro runat="server" language="cshtml">                    
                            @{
                                var calouselMediaIds = Umbraco.AssignedContentItem.GetPropertyValue<IEnumerable<int>>("largeCarousel");
                                foreach (var mediaId in calouselMediaIds)
                                {
                                    var mediaItem = Umbraco.TypedMedia(mediaId);
                                    <div class="carousel-item"><img src="@mediaItem.Url" alt="image3" class="image imageLarger" align="bottom"></div>
                                }
                            }
                            </umbraco:Macro>
                    </div>
                    </div>
                <div class="col s12 m12 l4 smallerHeight">
                    <div class="cropped2 croppedUp">
                        <div class="carousel-item active" style="z-index: 0; opacity: 1; visibility: visible; transform: translateX(-43px) translateY(0px) translateX(0px) translateX(0px) translateZ(0px);"><img src="images/image1.jpg" alt="image" class="image"></div>
                        <div class="carousel-item" style="transform: translateX(-43px) translateY(0px) translateX(-418px) translateZ(-200px); z-index: -1; opacity: 0; visibility: visible;"><img src="images/image2.jpg" alt="image" class="image"></div>

                    </div>

                    <div class="cropped2 cropped3">
                        <div class="carousel-item" style="z-index: -1; opacity: 0; visibility: visible; transform: translateX(-43.5px) translateY(-7px) translateX(-441px) translateZ(-200px);"><img src="images/image2.jpg" alt="image" class="image"></div>
                        <div class="carousel-item active" style="transform: translateX(-43.5px) translateY(-7px) translateX(0px) translateX(0px) translateZ(0px); z-index: 0; opacity: 1; visibility: visible;"><img src="images/image1.jpg" alt="image" class="image"></div>

                    </div>
                </div>
                </div>
        </div>
    </body>
    </html>

Copy Link

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

Apr 15, 2020 @ 13:04

What about first line? it looks like missing @inherits section

Copy Link

Andrew Unger 45 posts 148 karma points

Apr 15, 2020 @ 13:15

I'm not sure what inherits I would need. All the other pages on this site don't use any. They do use this <%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %> but I think that is just for the nav, but this page doesn't use that because it's its own thing and not part of the main website

Copy Link

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

Apr 15, 2020 @ 13:20

Ah, so you use WinForms solution, not a razor, it changes the game

Copy Link

Andrew Unger 45 posts 148 karma points

Apr 15, 2020 @ 13:21

I apologize I'm still a little new to this

Copy Link

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

Apr 15, 2020 @ 13:29

What is the type of Model?

Copy Link

Andrew Unger 45 posts 148 karma points

Apr 15, 2020 @ 13:34

I'm not sure and I'm not sure where to get that information

Copy Link

Andrew Unger 45 posts 148 karma points

Apr 16, 2020 @ 12:09

I ended up making it a macro and modifying the code a little but this is the macro I made if anyone has the same problem.

@{
    var currentPage = Umbraco.TypedContent(UmbracoContext.Current.PageId);
    var typedMultiMediaPicker = currentPage.GetPropertyValue("largeCarousel");
    if (typedMultiMediaPicker != null)
    {
        foreach (var item in typedMultiMediaPicker.ToString().Split(','))
        {
            var img = Umbraco.TypedMedia(item);
            <div class="carousel-item active"><img src="@img.Url" alt="image3" class="image imageLarger" align="bottom"></div>              
        }
    }
}

I use this line of code to call the macro in my template

   <umbraco:Macro Alias="LargeCarousel" runat="server" />

Copy Link

is working on a reply...

Flag this post as spam?

Problem rendering multi media picker in version 7.2.8