First the basics, I am using Umbraco v4.7, currently trying to use the built in Image Cropper dataType.
I am looking to use this dataType to create an Image Gallery that displays formatted images
I would prefer not to upload the image in the media section, then go over to the content section and "pick" it.
XSLT has been my starting point but I would be open to Razor if it provides a better option.
Here is a basic look at the file tree and document type setup:
You can see here I want my childnodes of "Image Gallery" to be the individual images. Then in the docType I have an image upload, then image description, then the cropping area for the "Large" thumb. I would like it to work like this for my users.
Next is a picture of the folder structure. You can see that my "Cropped" image is automatically stored here:
I just need to replace (href="CROPPED IMAGE") with something that calls the correct cropped version of the image. I feel like there are probably some simple ways to get that URL but I haven't been able to get it right yet on my own. For example I have been looking at the uQuery GetImageCropperUrl method.. but no luck so far.
That all being said I think that if I could get this issue solved I would have a really sweet image gallery that I would be happy to share with everyone.
Also, on a side note, you can use Digibiz Advanced Media Picker instead of using nodes for each of your images and pick the images from the media library. The newer version still in development has support for cropping right from the datatype. And you can upload from the datatype so there is no need to switch back/forth from content/media like you mentioned. Your above way works fine too and these features are still in development (in the latest source), just thought I'd mention :)
Thanks for responding.. let me check with you cause I haven't gotten it working.. Maybe I'm just not sure on the "yourCropPropertyAlias" value. I thought I would go to Settings > Document Type > and click on the "New Gallery Image" doc type. (see pic below) Then the CropPropertyAlias should = "galleryImageLarge". But that returns nothing to me. Is this not the right value?
Yep, that looks right, but actually I made a mistake, you should drop the $currentPage/ since this is running inside a for-each loop, you want the property from the current item in the loop and not the currentPage.
There you go! Nice.. Thanks a lot.. I tried so many things.. I'll post a link to my final source code for the Image Gallery once I get it all wrapped up incase anyone else would like to use it.
I just finished my blog post about creating my gallery. You can check it out here: http://farmfreshcode.com/umbraco/image-gallery/226 I have included a video as well to show you what it looks like since I am still just working on a testing server. If you find the code helpful, let me know on the blog. Thanks!
Image Cropper - Call Cropped Image directly inside XSLT
Hello Everyone!
First the basics, I am using Umbraco v4.7, currently trying to use the built in Image Cropper dataType.
Here is a basic look at the file tree and document type setup:
You can see here I want my childnodes of "Image Gallery" to be the individual images. Then in the docType I have an image upload, then image description, then the cropping area for the "Large" thumb. I would like it to work like this for my users.
Next is a picture of the folder structure. You can see that my "Cropped" image is automatically stored here:
Where "Gallery Image" is the title I added to the specific crop action.
And Finally we have my current XSLT code:
I just need to replace (href="CROPPED IMAGE") with something that calls the correct cropped version of the image. I feel like there are probably some simple ways to get that URL but I haven't been able to get it right yet on my own. For example I have been looking at the uQuery GetImageCropperUrl method.. but no luck so far.
That all being said I think that if I could get this issue solved I would have a really sweet image gallery that I would be happy to share with everyone.
Thanks in advance!
Hi,
You can pull the crop's URL from the Image Cropper property like so:
Also, on a side note, you can use Digibiz Advanced Media Picker instead of using nodes for each of your images and pick the images from the media library. The newer version still in development has support for cropping right from the datatype. And you can upload from the datatype so there is no need to switch back/forth from content/media like you mentioned. Your above way works fine too and these features are still in development (in the latest source), just thought I'd mention :)
Hope this helps,
Tom
Hi Tom,
Thanks for responding.. let me check with you cause I haven't gotten it working.. Maybe I'm just not sure on the "yourCropPropertyAlias" value. I thought I would go to Settings > Document Type > and click on the "New Gallery Image" doc type. (see pic below) Then the CropPropertyAlias should = "galleryImageLarge". But that returns nothing to me. Is this not the right value?
Yep, that looks right, but actually I made a mistake, you should drop the $currentPage/ since this is running inside a for-each loop, you want the property from the current item in the loop and not the currentPage.
Ex:
There you go! Nice.. Thanks a lot.. I tried so many things.. I'll post a link to my final source code for the Image Gallery once I get it all wrapped up incase anyone else would like to use it.
I would be very keen to grab your code when you're done coz I have a feature planned just like this on my site. Please let me know when it goes up.
- Sean
Hi Sean,
I just finished my blog post about creating my gallery. You can check it out here: http://farmfreshcode.com/umbraco/image-gallery/226 I have included a video as well to show you what it looks like since I am still just working on a testing server. If you find the code helpful, let me know on the blog. Thanks!
Awesome, thanks for that. I'll check it out tonight.
Cheers,
Sean
is working on a reply...