multiple media picker show images - Using Umbraco 7

Go to solution

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

René Andersen 238 posts 684 karma points

Jan 30, 2015 @ 11:54
0

Multiple Media Picker - Show images
Hello,

I want to show multiple images in a slider using the "Multiple Media Picker" but at the moment I am only able to show one image using the standard "Media Picker". The images in the html should be seperatet with a comma like the example below:
```
<div class="preview-content" data-images="/images/image1.jpg,/images/image2.jpg">
```
See a part of the code below (It is the part with the singleImage that works fine with one image):
```
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@if (CurrentPage.Children.Where("Visible").Any())
{
   foreach (var childPage in CurrentPage.Children.Where("Visible"))
     {
       <article class="col-md-4 col-sm-6">
         <div class="preview-content" data-images="@Umbraco.Media(childPage.singleImage).Url"></div>
       </article>
     }
}
```
I have tried differen solutions from this forum but I have not managed to get it working.

If you have any idea how to solve my problem then please edit my code above. Thanks in advance!

// René
Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jan 30, 2015 @ 12:07

100

Hej René

Try to see the documentation for the media picker in Umbraco 7, http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors-v7/Media-Picker make sure that have you ticked the check on the data type so it uses multiple media picker instead of a single item media picker.

And your property is set to use the multiple media picker on the document type.

Hope this helps,

/Dennis

Copy Link

René Andersen 238 posts 684 karma points

Jan 30, 2015 @ 12:44

Hi Dennis

Thank you. Sometimes it helps that someone else confirms that I have been looking the right place in the forum. :-)

Now I have managed to see both images but the output is like this:

<img src="/media/1005/test_image_645_1.jpg" /><img src="/media/1006/test_image_645_2.jpg" />

And i need it to be like this:

<img src="/media/1005/test_image_645_1.jpg,/media/1006/test_image_645_2.jpg" />

Do you have any idea how to achieve that? I thought that this line of code did that Split(new string[] { "," }.

See my working code below:

@if (childPage.HasValue("portfolioImages"))
{
  var caseStudyImagesList = childPage.portfolioImages.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    var caseStudyImagesCollection = Umbraco.Media(caseStudyImagesList);

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

//René

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Multiple Media Picker - Show images