Crop slider image from top instead of bottom?

  • Hi Nicolas,

    In a recent thread, you said:

    as of now, the slider height is fixed, depending on the screen resolution : 500px for a normal computer screen, 385px for a tablet, …

    It might be an interesting additional feature tough, to be able to set the slider height. I will definitely think about it as an improvement for the next version of the theme.

    I love the slider in Customizr and more ability to customize it would be great.

    One customization is indeed size, so that you can have a slider that does or doesn’t dominate the page, depending on your choice.

    However, there is another slider feature that I would consider more important than simple size: The ability to decide which part of the photo gets cropped when there is automatic cropping to do (to be responsive).

    For instance, a simple choice of
    “In responsive situations:

    • crop from bottom of photo or
    • crop from top of photo”

    …would be wonderful.

    To give a concrete example: my site has a slider photo that is 1170×500, as you recommend. It shows an artisan in a beautiful workshop. The aim of the photo is to show mainly the workshop, with the man in it, so the man only occupies 2/5 of the height of the photo, from head to hands:
    https://darioalfonsi.com/wp-content/uploads/2013/06/slider_dario.jpg

    But a lot of the man often gets cut off. I got a call from a user tester this morning to tell me that on her setup (an iMac Firefox window), with her level of skills (she didn’t know how to resize a browser window), the man’s nose was cut off. That is, a full 25% of the bottom of the photo was cropped, leaving only the top of the head … which rather screws up the point of the photo.

    If, on the other hand, I had the ability to crop from the top instead of the bottom when being responsive, the photo would be OK. I’d lose a bit of the magic of the photo (the wooden-beamed ceiling), but not an essential part of it.

    This is a specific example, but I think it captures the problems that some people are having with the slider. It’s not so much a problem of the size, but what gets shown when it’s reduced.

    Really cool would be to be able to say where the centre point should be (or allow a balance between vertical and horizontal cropping). But I can wait for version 16.3 for that. For, now–for version 3.1, say ?? –a simple “crop from the top” check-box would be great.

    p.s. Or could I achieve this already myself by a small tweak in the code?

    p.p.s. Thanks for all your help!

Viewing 13 replies - 1 through 13 (of 13 total)

  • Hi ElectricFeet – I’ve just encountered the exact same problem you are describing here (an image of a skyline that, cropped from the bottom, is all sky and no line…), but from the looks of your (beautiful!) website I gather your eventual solution was to make the slider fixed width rather than full width. I can live with that, but I’m wondering if you or Nikeo came up with any alternative PHP or CSS way to crop from the top?

    Thread Starter ElectricFeet

    (@electricfeet)

    Sorry loudnotes, no. I have not found a way to do this.

    I didn’t make it fixed width, in my case. I have the slider set at full-width, then added the following CSS:

    @media (min-width: 1200px) {
    /*Stop the slider growing too much*/
    #customizr-slider {
        max-width: 1170px;
        margin-left:auto;
        margin-right:auto;
        }
}

    This makes it full-width in viewports < 1200px and then switches it to 1170px wide when it starts to grow too much.

    The only other solution I could offer would be to disable the Customizr slider and substitute another.

    Thanks for the reply – good idea. I seem to be having some luck by using an 1170×500 image with a full-width slider and commenting out the customizr height/width instruction altogether, but the reason it works is specific to my hosting provider which has its own image cropping defaults.

    Theme Author presscustomizr

    (@nikeo)

    Hi, I just came up today with a new snippet that automatically centers the slides vertically.
    I thought you might be interested : https://www.themesandco.com/snippet/customizr-slider-centering-slides-vertically-full-width-mode/
    Best

    Thread Starter ElectricFeet

    (@electricfeet)

    Yay! Thanks! Off to try it…

    Thread Starter ElectricFeet

    (@electricfeet)

    So far, so good! ??

    @loudnotes: In nikeo’s code, you can take the line:
    Adjustment = Math.ceil(( ImgHeight - HeightSliderContainer )*0.5);
    and change it to:
    Adjustment = Math.ceil(( ImgHeight - HeightSliderContainer ));
    to crop from the top instead of the bottom.

    I thought you might be interested

    @nikeo – thank you! You are the master of the understatement.

    The only problem I can see with this is that the text panel overflows the image at the bottom between approx 550px and 481px viewports — although this might be caused by something in my custom CSS…

    Thread Starter ElectricFeet

    (@electricfeet)

    @chappie: Site link?

    No link as localhost only but here’s a screen grab.

    The image is 1170×500 and the slider is full-width. If yours doesn’t exhibit the same overflow (only when viewed at at 481-550px) then I need to hunt through my CSS.

    Thread Starter ElectricFeet

    (@electricfeet)

    You could play around with:

    .carousel-caption {
    vertical-align: 20%;
}

    …changing the % figure to suit. You may need to use the @media query @media (min-width: 480px) and (max-width: 767px) to restrict the CSS to your problem widths.

    Thanks – I’ll keep that in reserve. But if others aren’t seeing this overflow then the answer lies in my CSS.

    Thread Starter ElectricFeet

    (@electricfeet)

    I saw it in my local install with plain Customizr, so it’s not just you. But mine only overlaps very slightly. The button size makes a difference (I normally run without buttons), but the button on your screenshot looks good, so I wouldn’t reduce it.

    Nice looking site, BTW.

    Thanks – I wish I could reveal more of it. Maybe one day it will go live. But it grows like Topsy and I’ve just spent an entire week working on a single page. My son tells me I have OCD.

    Btw, that slider screengrab would have looked a lot less good before I saw your great superglue snippet.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Crop slider image from top instead of bottom?’ is closed to new replies.