Crop slider image from top instead of bottom?

ElectricFeet
(@electricfeet)

10 years, 9 months ago
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:
http://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)

loudnotes
(@loudnotes)

10 years, 2 months ago

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)

10 years, 2 months ago
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.
loudnotes
(@loudnotes)

10 years, 2 months ago

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)

10 years, 1 month ago

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

Thread Starter ElectricFeet
(@electricfeet)

10 years, 1 month ago

Yay! Thanks! Off to try it…

Thread Starter ElectricFeet
(@electricfeet)

10 years, 1 month ago

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.

chappie
(@chappie)

10 years, 1 month ago

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)

10 years, 1 month ago

@chappie: Site link?

chappie
(@chappie)

10 years, 1 month ago

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)

10 years, 1 month ago
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.
chappie
(@chappie)

10 years, 1 month ago

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)

10 years, 1 month ago

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.

chappie
(@chappie)

10 years, 1 month ago

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.