looping through and displaying a list of images with the image cropper document type

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

ThomasBrunbjerg 90 posts 182 karma points

Aug 28, 2017 @ 11:23
0

Looping through and displaying a list of images with the Image Cropper document type
I currently in the midst of changing my multiple media picker document type to 10 image cropper document types instead.

I'm unsure how to go about looping through these newly created properties and displaying them in my carousel element.

Before I used this code to loop through me media files:
```
@{var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("sommerhusSlideshowBilleder").ToList()};
@for (var i = 0; i < images.Count; i++)
                                        {
                                        <div class="@(i < 1 ? " active":"") item" data-slide-number="@i">
                                            <img src='@images[i].Url'>
                                        </div>
                                        }
```
Now I instead need to loop through X number of "image cropper" images, which each has their own alias. What is the best way to approach this?
Copy Link
Alex Skrypnyk 6168 posts 24148 karma points MVP 8x admin c-trib

Aug 28, 2017 @ 12:28
1
Hi Thomas

What format of each property alias will be?

For example, you can do it like that:
```
@for (var i = 0; i < 10; i++)
{
    var image = Model.Content.GetPropertyValue<IPublishedContent>("sommerhusSlideshowBilleder" + i);
    <div class="@(i < 1 ? " active":"") item" data-slide-number="@i">
        <img src='@image.Url'>
    </div>
}
```
All your properties should be sommerhusSlideshowBilleder0, sommerhusSlideshowBilleder1, sommerhusSlideshowBilleder2 and etc.

Thanks,

Alex
Copy Link
ThomasBrunbjerg 90 posts 182 karma points

Aug 28, 2017 @ 12:38

0

Hi Alex

I'm getting a NullReferenceException.

http://i.imgur.com/TkJsb0L.png

I changed the loop to start at 1 due to my alias naming.

I'm not sure what object reference the error is referring to here.

Copy Link
Alex Skrypnyk 6168 posts 24148 karma points MVP 8x admin c-trib

Aug 28, 2017 @ 12:40
101
Hi Thomas

Looks like I made mistake when I wrote render code, but I fixed it, look on this one:
```
@for (var i = 1; i < 11; i++)
{
    <div class="@(i < 1 ? " active":"") item" data-slide-number="@i">
        <img src="@Url.GetCropUrl(Model.Content, "billede" + i)" />
    </div>
}
```
Copy Link

ThomasBrunbjerg 90 posts 182 karma points

Aug 28, 2017 @ 12:53

Ah, no problem. It works now, although I would like to not include empty image URLs when there is no image to be retrieved with the GetCropUrl() function.

I tried doing something like this:

if(@Url.GetCropUrl(Model.Content, "billede" + i, "Main") != null)
                                            {
                                                <div class="@(i < 2 ? " active":"") item" data-slide-number="@i">
                                                    <img src="@Url.GetCropUrl(Model.Content, "billede" + i, "Main")" />
                                                </div>
                                            }

But that still returns empty images. Is there a way to check whether an image has been uploaded to an image cropper property type?

Copy Link

Alex Skrypnyk 6168 posts 24148 karma points MVP 8x admin c-trib

Aug 28, 2017 @ 13:07

Try this code:

@if(Model.Content.HasValue("billede" + i))
{
    <div class="@(i < 2 ? " active":"") item" data-slide-number="@i">
        <img src="@Url.GetCropUrl(Model.Content, "billede" + i, "Main")" />
    </div>
}

Copy Link

ThomasBrunbjerg 90 posts 182 karma points

Aug 28, 2017 @ 13:16

0

Thanks, that worked for me! :)

Copy Link
Alex Skrypnyk 6168 posts 24148 karma points MVP 8x admin c-trib

Aug 28, 2017 @ 13:16

0

Glad to help you!

Have a great evening!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?