display images from mediapicker

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

Søren Chr. 10 posts 100 karma points

Oct 15, 2015 @ 20:18

Using Umbraco 7

Hi all

Hope you can help with a newbee question, how do I display the images in a foreach loop?

I can retrive the name but can't display the images.

   @if (CurrentPage.HasValue("sliderImages"))

    {
        var imagesList = CurrentPage.SliderImages.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
        var imageCollection = Umbraco.Media(imagesList);

                            <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item">
                @foreach (var images in imageCollection)
                {
                    <img src="@images.UrlName" />
                }

            </div>
        </div>
    }

Copy Link

Marc Goodson 2144 posts 14347 karma points MVP 8x c-trib

Oct 15, 2015 @ 20:54
0
Hi Soren

Try:
```
 <img src="@images.Url" />
```
in your loop!

Also, really helpful I found when getting to grips with Umbraco and available properties, is the cheat sheet, that Peter Gregory put together:

https://our.umbraco.org/FileDownload?id=8866

regards

marc
Copy Link
Søren Chr. 10 posts 100 karma points

Oct 16, 2015 @ 11:34

0

Thank you for the quick reply.

I got the cheat sheet and tried with .Url but get this error

"Cannot resolve a Url for a media item when there is no 'umbracoFile' property defined."

Copy Link
Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Oct 16, 2015 @ 12:14
0
Hi Søren

Does your media item has a property with alias "umbracoFile" .. it is the property with the upload datatype (or you might have chosen to use image cropper).

If it has another alias you can use
```
<img src="@image.GetPropertyValue("aliasOfProperty")" />
```
/Bjarne
Copy Link

Søren Chr. 10 posts 100 karma points

Oct 16, 2015 @ 12:43

Hi Bjarne

I am using the "multiple media picker" with alias "sliderImages".

@foreach (var images in imageCollection)
                            {
                                <img src="@images.GetPropertyValue("sliderImages")" />
                            }

In developer tools it counts the right amount of images but no src:

<div class="carousel-inner" role="listbox">
                        <div class="item">
                                <img>
                                <img>
                                <img>

                        </div>
                    </div>

Thank you for the help

Copy Link

Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Oct 16, 2015 @ 13:08
0
Okay, but "slideImages" is the alias of your multiple media picker property in content section, right?

It picks some media items, so images (or image because it represent 1 media image item) and then inside the loop you can access the properties on the media item.. if you go to Settings --> Media Types --> Image just can see the properties similar to how it works with Document Types.

Does this give you any result?
```
@foreach (var image in imageCollection)
{
      <img src="@image.GetPropertyValue("umbracoFile")" />
}
```
/Bjarne
Copy Link

Søren Chr. 10 posts 100 karma points

Oct 16, 2015 @ 13:25

enter image description here

  @foreach (var image in imageCollection)
{
      <img src="@image.GetPropertyValue("umbracoFile")" />
}

no result.

I can grab the Url.Name and Url.Id in the loop but Url returns nothing :(

<div class="carousel-inner" role="listbox">
                            <div class="item">
                                    <img src="slide1">
                                    <img src="slide2">
                                    <img src="slide3">

                            </div>
                        </div>

I appreciate your help Bjarne!

I need to find a good tut on implement a slider in umbraco 7 :)

Copy Link

Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Oct 16, 2015 @ 13:44
100
Okay, so I guess it is the Slider media items you pick and not the default Image media item?

Which properties does Media Types --> Slider have?

Ensure it has umbracoFile if your want to use .Url .. otherwise you should also be able to access the property with:
```
@foreach (var image in imageCollection) { 
        <img src="@image.GetPropertyValue("someCustomPropertyAlias")" />
}
```
/Bjarne
Copy Link
Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Oct 16, 2015 @ 13:51

0

Here is an example of similar to yours: https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/media-picker

Can't remember want .Url returns on media items or if it is a typo, because it exists on content nodes.

Could you try with .UmbracoFile?

https://our.umbraco.org/documentation/Getting-Started/Design/Rendering-Media/

Copy Link
is working on a reply...

Please Sign in or register to post replies