use image cropper when looping trough images in folder

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

Daniel Larsen 116 posts 381 karma points

Mar 12, 2015 @ 11:03

0

Use Image Cropper when looping trough images in folder

Razor

Hi, is it possible to use the image cropper, when making a gallery?

I would like to loop trough a folder in the media section and create thumbnails, to use with fancybox, in a gallery.

Any questions, just ask! :-)

Thank you!

Daniel

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib

Mar 12, 2015 @ 11:05

1

Hi Daniel

That should indeed be possible. You'll just need to define a thumbnail crop and then use that crop when rendering the thumbnails view.

You can see how to fetch crops in the documentation here https://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Image-Cropper

Does this make sense?

/Jan

Copy Link
Daniel Larsen 116 posts 381 karma points

Mar 12, 2015 @ 11:19

0

Hi Jan

Thank you.

I know how to fetch crops from the image cropper datatype, but I dont know, how to get it working for the images in the media section. Do you have an example?

Thank you for the quick response!

Daniel

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib

Mar 12, 2015 @ 11:59
100
Hi Daniel

Have you changed the property editor on the Image document type to use the image cropper? I can't remember if this is done out of the box with the later releases of Umbraco 7.2.x - Perhaps one still needs to do this manually...But can't honestly not remember what the consequences of changing it might be. So be careful if you need to change it!

But if that is already in place you should be able to use the media examples shown in the documentation
```
@Umbraco.Media(1234).GetCropUrl("banner")
@Umbraco.TypedMedia(1234).GetCropUrl("banner")
```
I guess you use the "media picker" to reference one or more images on a textpage?

/Jan
Copy Link
Daniel Larsen 116 posts 381 karma points

Mar 12, 2015 @ 12:05

0

Thank you, I'll give it a go!

I will make a backup, just in case! Thanks for the warning ;-)

Daniel

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib

Mar 12, 2015 @ 12:05

1

Hello,

You could have a look at the Hybrid Framework. It's an example website that also has a gallery.

Jeroen

Copy Link
Daniel Larsen 116 posts 381 karma points

Mar 12, 2015 @ 13:07

0

Thank you Jan! That did the trick and the switch from Upload to Image Cropper went smoothly.

I have another question:

I want to access my members avatar/picture, also an Image Cropper, but it does not work. Do you have a surgestion?

Thank you again. You are a champ!

Daniel

Copy Link

Daniel Larsen 116 posts 381 karma points

Mar 12, 2015 @ 13:29

Just realised that it fetches the images for the gallery allright, but not the crop...

Here is my code:

@foreach (var mediaItem in mediaFolder.Children)
{
   var id = mediaItem.Id;

   <li>
      <a rel="group" href="@Umbraco.Media(@id).GetCropUrl("umbracoFile", "Fancybox")" class="gallery-item-image fancybox">
         <img src="@Umbraco.Media(@id).GetCropUrl("umbracoFile", "Gallery")">
      </a>
   </li>
}

Can you spot the error?

Thank you again, for your help!

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib

Mar 12, 2015 @ 13:51

1

Hi Daniel

Have you re-saved the images to make sure that the cropped versions does in fact exist?

/Jan

Copy Link
Daniel Larsen 116 posts 381 karma points

Mar 12, 2015 @ 14:09

0

Always the simple solution!

Thank you! :-D

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib

Mar 12, 2015 @ 14:13

1

Hi Daniel

Happy that I was able to point you in the right direction - Have fun coding! :)

/Jan

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?