WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Crop slider image from top instead of bottom? (14 posts)

  1. ElectricFeet
    Member
    Posted 1 year 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 1170x500, 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!

  2. loudnotes
    Member
    Posted 5 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?

  3. ElectricFeet
    Member
    Posted 5 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.

  4. loudnotes
    Member
    Posted 5 months ago #

    Thanks for the reply - good idea. I seem to be having some luck by using an 1170x500 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.

  5. nikeo
    Member
    Theme Author

    Posted 5 months 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

  6. ElectricFeet
    Member
    Posted 5 months ago #

    Yay! Thanks! Off to try it...

  7. ElectricFeet
    Member
    Posted 5 months 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.

  8. chappie
    Member
    Posted 5 months 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...

  9. ElectricFeet
    Member
    Posted 5 months ago #

    @chappie: Site link?

  10. chappie
    Member
    Posted 5 months ago #

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

    The image is 1170x500 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.

  11. ElectricFeet
    Member
    Posted 5 months 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.

  12. chappie
    Member
    Posted 5 months ago #

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

  13. ElectricFeet
    Member
    Posted 5 months 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.

  14. chappie
    Member
    Posted 5 months 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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic