Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Euge 23 posts 130 karma points
    Dec 10, 2015 @ 14:06
    Euge
    0

    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.

    Slider syncing

    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

  • Ian 178 posts 752 karma points
    Dec 10, 2015 @ 23:41
    Ian
    100

    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

    <img src="@mediaItem.GetCropUrl("umbracoFile", "MainImage")" ...
    

    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.

    <img src="@mediaItem.GetCropUrl(propertyAlias: "umbracoFile", height:300, width:400)" ...
    
  • Ian 178 posts 752 karma points
    Dec 15, 2015 @ 11:10
    Ian
    1

    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:

    1. 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)
    2. 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
    3. 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

    1. 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
    2. 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.

  • Euge 23 posts 130 karma points
    Dec 16, 2015 @ 12:07
    Euge
    0

    Thanks Ian

    Really useful reply. I'll let you know how I get on.

    E

  • Euge 23 posts 130 karma points
    Dec 18, 2015 @ 15:41
    Euge
    0

    Hi

    I have two custom media types (image and folder)

    So I should be able to do this OK?

        private WidgetViewModel GetContent(IPublishedContent content)
        {            
    
            var widget = new WidgetViewModel
            {
                Id = content.Id,
                Title = content.Name,
                Url = content.Url,                
                BigImageSrc = content.GetCropUrl("umbracoFile", "details")
        };
    
Please Sign in or register to post replies

Write your reply to:

Draft