Umbraco - Multiple Media Picker - Split and output images

Question

I'm currently working on partial view that loads Google Maps and lots of information using Umbraco 7.

What I'm trying to do is load project images within an "infoWindow" (bottom function of the code) Google API popup (the marker pop up info).

I've tried loads of different methods but can't seem to get the images. The furthest I can get without breaking things is getting the image IDs. I've been unable to split them or output anything.

I've tried the following:

var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
var imagesCollection = Umbraco.TypedMedia(imagesList).Where(x => x != null);

I receive this error:

Compiler Error Message: CS1976: Cannot use 'Parse' as an argument to a dynamically dispatched operation because it is a method group. Did you intend to invoke the method?

http://prntscr.com/99u5ky

var mediaItem = portfolioItem.GetPropertyValue("images");

This is the line I'm using to get the image IDs, but everytime I try and split them and output anything I receive errors.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<link rel="stylesheet" type="text/css" href="/css/Portfolio.css"/>

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>    

<script type="text/javascript">  
  var markers = [];
  var map;
  var infowindow = new google.maps.InfoWindow({
      maxWidth: 200
  });
  function initialize() {

    var geocoder = new google.maps.Geocoder();
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
        center: new google.maps.LatLng(32.1288162,-13.2088774),
        zoom: 3,
        zoomControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        },
        streetViewControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControl: false,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };
    map = new google.maps.Map(map_canvas, map_options)

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');


      @{
          int i = 0;

          foreach (var portfolioItem in CurrentPage.Descendants("PortfolioItem").OrderBy("Name"))
          {
              i++;
              var url = "";
              int port = HttpContext.Current.Request.Url.Port;
              url = "http://" + HttpContext.Current.Request.Url.Host;

              if (port != 80)
              {
                  url += ":" + port;
              }

              if (!String.IsNullOrEmpty(portfolioItem.technology))
              {

                  url += "/images/portfolio/" + portfolioItem.technology.ToString().ToLower().Split(new char[] { ',' })[0] + ".png";
              }
              else
              {
                  url += "/images/portfolio/windmarker.png";
              }

              var description = portfolioItem.shortDescription.ToString().Replace("'", "&#39;");
              var name = portfolioItem.Name.ToString().Replace("'", "&#39;");

              var mediaItem = portfolioItem.GetPropertyValue("images");

              var location = portfolioItem.Location.ToString().Replace("'", "&#39;");

              var mw = "";
              if (portfolioItem.HasValue("totalExpectedInstalledCapacity")) { mw = portfolioItem.totalExpectedInstalledCapacity; }
              if (portfolioItem.HasValue("totalInstalledCapacity")) { mw = portfolioItem.totalInstalledCapacity; }
              if (portfolioItem.HasValue("capacity")) { mw = portfolioItem.capacity; }

            @Html.Raw("var marker" + i + " = new google.maps.Marker({");
            @Html.Raw(" position: new google.maps.LatLng(" + portfolioItem.latitude + "," + portfolioItem.longitude + "),");
            @Html.Raw(" map: map,");
            @Html.Raw(" title: '" + portfolioItem.Name.Replace("'", "&#39;") + "',");
            @Html.Raw(" icon: {         ");
                           /* Change based on technology */
            @Html.Raw("     url: '" + url + "'");
            @Html.Raw(" }");
            @Html.Raw("});");
            @Html.Raw("google.maps.event.addDomListener(document.getElementById('marker" + i + "'), 'click', function(ev) {map.setCenter(marker" + i + ".getPosition());});");
            @Html.Raw("marker" + i + ".phase = '" + portfolioItem.phase + "';"); 
            @Html.Raw("marker" + i + ".date = '" + ((DateTime)portfolioItem.date).Year + "';"); 
            @Html.Raw("marker" + i + ".country = '" + portfolioItem.Parent.Name + "';"); 
            @Html.Raw("marker" + i + ".technology = '" + portfolioItem.technology + "';");

            @Html.Raw("google.maps.event.addListener(marker" + i + ", 'click', function() {");
            @Html.Raw("openInfoWindow('" + name + "', '" + mediaItem + "', '" + location + "', '" + mw + "', '" + portfolioItem.Url + "', marker" + i + ");");
            @Html.Raw("});");

            @Html.Raw("$('#marker" + i + "').on('click', function() {");
            @Html.Raw("openInfoWindow('" + name + "', '" + mediaItem + "', '" + location + "', '" + mw + "', '" + portfolioItem.Url + "', marker" + i + ");");
            @Html.Raw("});");

            @Html.Raw("marker" + i + ".setVisible(true);");
            @Html.Raw("markers.push(marker" + i + ");");
          }
   }

      filterMarkers();
  }

    google.maps.event.addDomListener(window, 'load', initialize);

    selectAll = function(selected, type)
    {
        $(type + ' input').prop('checked', selected);
        filterMarkers();
    }

    filterMarkers = function()
    {
        var phases = [];
        var countries = [];
        var technologies = [];
        var date_start = '';
        var date_end = '';

        $("#phase input:checked").each(function(index, elem){
            phases.push($(this).val());
        });
        $("#country input:checked").each(function(index, elem){
            countries.push($(this).val());
        });
        $("#technology input:checked").each(function(index, elem){
            technologies.push($(this).val());
        });     
        date_start = $("#datestart option:selected").val();
        date_end = $("#dateend option:selected").val();



       for (i = 0; i < markers.length; i++) {
           var marker = markers[i];   

           var phasetrue = false;
           var countriestrue = false;
           var technologiestrue = false;

           if (phases.length == 0)
           {
               phasetrue = false;
           }
           else
           {
               for (j = 0; j < phases.length; j++)
               {
                   if ((marker.phase).indexOf(phases[j]) > -1)
                   {
                       phasetrue = true;
                   }
               }
           }
           if (countries.length == 0)
           {
               countriestrue = false;
           }
           else
           {
               for (j = 0; j < countries.length; j++)
               {
                   if ((marker.country).indexOf(countries[j]) > -1)
                   {
                       countriestrue = true;
                   }
               }
           }
           if (technologies.length == 0)
           {
               technologiestrue = false;
           }
           else
           {
               for (j = 0; j < technologies.length; j++)
               {
                   if ((marker.technology).indexOf(technologies[j]) > -1)
                   {
                       technologiestrue = true;
                   }
               }
           }

           if(phasetrue == true &&
              countriestrue == true &&
              technologiestrue == true &&
              ((date_start <= marker.date && date_end >= marker.date) || (date_start == undefined || date_end ==undefined) || (date_start == '' || date_end == ''))
            )
           {
               marker.setVisible(true);
           }
           else
           {          
               marker.setVisible(false);
           }
        }  
    }
    setCenter = function(latitude, longitude)
    {
        map.panTo(new google.maps.LatLng(latitude, longitude));
    }

    openInfoWindow = function (name, mediaItem, location, mw, url, marker) {
        var infoText = "<div class='portfolioTooltip'><div class='tooltipName'>" + name + "</div><img src='" + mediaItem + "' alt='" + mediaItem + "'title='" + mediaItem + "' />";
        var moreInformationLink = "<div><a class='tooltipLink' href=\"" + url + "\" target=\"_blank\">More Information</a></div>";
        if (location.length > 0) {
            infoText += "<div class='tooltipLabel'>Location</div>";
            infoText += "<div class='tooltipData'>" + location + "</div>";
        }
        if (mw.length > 0) {
            infoText += "<div class='tooltipLabel'>MW</div>";
            infoText += "<div class='tooltipData'>" + mw + "</div>";
        }
        infoText += moreInformationLink;
        infoText += "</div>";

        infowindow.setContent(infoText);
        infowindow.open(map, marker);
    }
</script>

Are your images picked with [media-picker](https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/media-picker)? — Marko Jovanov, Dec 03 '15 at 15:39
I suppose you have tried accessing them like the provided examples on the link? — Marko Jovanov, Dec 03 '15 at 15:49
Yes I've tried it - I've updated my post to show what I tried. — Madness, Dec 03 '15 at 15:53
The exception basically says that `Parse` cannot be used with the element which type is not known at the compile time. I would suggest you debug this part one line at the time and try to separate your LINQ statement in more lines, so you have the control and knowledge where exactly does the code fail to execute. — Marko Jovanov, Dec 03 '15 at 15:57
Well when I remove "Select(int.Parse); that fixes that error but then I receive this - Compiler Error Message: CS1977: Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type — Madness, Dec 03 '15 at 15:59
At the first glance, I can see that you're calling `Select` LINQ command parameter function and not lambda expression. Try to fix the `Select` command first. — Marko Jovanov, Dec 03 '15 at 15:59
Try to do the 'old-fashioned' split, [something like this](http://www.dotnetperls.com/split). Get to the point where you are just getting a list of ID strings and then move onwards from there. — Marko Jovanov, Dec 03 '15 at 16:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/96903/discussion-between-madness-and-marko-j). — Madness, Dec 03 '15 at 16:06

score 1 · Accepted Answer · edited Dec 04 '15 at 12:33

1

I managed to resolve this by using the following and with this, I'm able to see all of the images.

var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var imagesCollection = Umbraco.TypedMedia(imagesList);

foreach (var imageItem in imagesCollection)
{      
    <img src="@imageItem.Url" />
}

edited Dec 04 '15 at 12:33

dunston

2,670
1
21
11

answered Dec 04 '15 at 11:24

Madness

618
2
7
22

score 0 · Answer 2 · answered Dec 04 '15 at 00:39

0

Unless I have missed something, the code that is failing is on the Split line. However, all you are trying to do is to split a comma separated list of values that are always going to be numeric without any empty items so the following should work without all the extra work you are trying to do.

var imageList = portfolioItem.HasValue("Images") ?  portfolioItem.GetPropertyValue<string>("Images").Split(',').ToList() : null;

if(imageList != null)
{
    var imagesCollection = Umbraco.TypedMedia(imageList);
}

answered Dec 04 '15 at 00:39

wingyip

3,465
2
34
52

Thanks for your response. I get the following error when trying this - 'System.Array' does not contain a definition for 'ToList'. Exception Details: Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 'System.Array' does not contain a definition for 'ToList' – Madness Dec 04 '15 at 08:33
@Maddness - this was probably an error related to missing assembly. You could change this by adding the following Linq using: `using System.Linq;` at the top of your class. – Marko Jovanov Dec 04 '15 at 12:51

Umbraco - Multiple Media Picker - Split and output images

2 Answers2