I need to implement an image carousel and will be using Slick http://kenwheeler.github.io/slick/#demos and more specifically will be using the “slider syncing” option.
What is the best approach for reusing the same image for both the main image and for the list image (see image number 1 above) using image cropper.
Ideally I don't want to be creating both small and large images for each image.
Hi for the image crop side of things I would edit/create the media type to be used in your slider replacing the umbracoFile property with a property based on the image cropper datatype making sure to keep the property alias as umbracoFile. Then when you want to display your slider get the media item into a view
var mediaItem = Umbraco.TypedMedia(some_media_id);
Then using the html formatting and elements required by slick image carousel
use something like this to display the large main image
Hi there, the information provided in the previous post only relates to the handling / creation of the images to be used in your slider. You can but are not forced to create a new media type.
Reasons for:
Potentially makes it clearer for your editors - because one of the
features of umbraco's image picker is to choose a particular folder
of images, you may decide to create two media types a) one called slide image folder b) one called slide image. When you set up the image picker it would point to the slide image folder, which only contains slide images ( this is because you will have configured using the 'structure' tab on the media type to only contain slide images)
You already have a website which uses an existing 'image' media type but that media type does not currently use image cropper. Making changes to the image media type in this case would probably involve altering page templates so that images can continue to render on your site
It just doesn't make sense in your own mind that every image on your site would have crop sizes attached to it which only ever relate to the image slider
Reasons against
Extra effort. For it to make sense you would need to create the two media types, the first as your folder and the the one for your image
In 7.2 I experienced a problem where if you were editing a slide and you uploaded a new 'slide image' (your new media type), instead creating a slide image once upload was complete umbraco created a new 'image'. To get round this I created a new application event handler and used the MediaService.Saved event to change the media type to my slide image.
Aside for the image editing side of things it would be difficult for me to prescribe the approach you should take for managing the slider itself as every situation is so different. Here are some suggestions
Using the umbraco 7 grid?
If yes look at leblender this video https://www.youtube.com/watch?v=ChGZ_CDnNls demonstrates creating an image carousel. I would generate a list of images which you would then wire up to slick image when displaying on the front end.
Only ever going to display images i.e no title or description overlays?
If you are not using the grid but the slider will only ever display images then you might decide to create a single datatype which you call slide image picker
When you select what type it is you would choose image picker and choose the slide image folder detailed earlier as your image source.
Tick the box allowing multiple selections.
Create one new document type called slider and add a property which you might call images, in the 'type' drop down you would select your slide image picker.
Using Slick image carousel and imagecropper
Hi
I need to implement an image carousel and will be using Slick http://kenwheeler.github.io/slick/#demos and more specifically will be using the “slider syncing” option.
What is the best approach for reusing the same image for both the main image and for the list image (see image number 1 above) using image cropper.
Ideally I don't want to be creating both small and large images for each image.
Thanks
Hi for the image crop side of things I would edit/create the media type to be used in your slider replacing the umbracoFile property with a property based on the image cropper datatype making sure to keep the property alias as umbracoFile. Then when you want to display your slider get the media item into a view
Then using the html formatting and elements required by slick image carousel
use something like this to display the large main image
and this in the list for image thumbs
in this example "MainImage" and "ThumbImage" would be two sizes set up in you image cropper datatype.
If you didn't want to preconfigure you image sizes, then you would have less control over things like focal point but following the premise set out here https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper, you could use something like.
Hi there, the information provided in the previous post only relates to the handling / creation of the images to be used in your slider. You can but are not forced to create a new media type.
Reasons for:
Reasons against
Aside for the image editing side of things it would be difficult for me to prescribe the approach you should take for managing the slider itself as every situation is so different. Here are some suggestions
Using the umbraco 7 grid? If yes look at leblender this video https://www.youtube.com/watch?v=ChGZ_CDnNls demonstrates creating an image carousel. I would generate a list of images which you would then wire up to slick image when displaying on the front end.
Only ever going to display images i.e no title or description overlays? If you are not using the grid but the slider will only ever display images then you might decide to create a single datatype which you call slide image picker
When you select what type it is you would choose image picker and choose the slide image folder detailed earlier as your image source.
Tick the box allowing multiple selections.
Create one new document type called slider and add a property which you might call images, in the 'type' drop down you would select your slide image picker.
Thanks Ian
Really useful reply. I'll let you know how I get on.
E
Hi
I have two custom media types (image and folder)
So I should be able to do this OK?
is working on a reply...