Slider Image Size

@mitchpowell – a framed slider (1170 x 500) will show all of your image, all of the time. A full-width slider (1200 x 500) will crop from the bottom on scaling – and if the depth is constrained to 500, which it is, it is mathematically impossible to display the whole image once the viewport opens wider than 1200…and by the time you get to 1920, you will have lost a big slice of your image. If it isn’t possible to create your images so that they can be cropped without losing critical subject matter then you should switch to the framed slider which stays centred and stops growing as the window widens.

FWIW, I see that @joanwalsh, formerly of this parish, has switched to a theme called Pinboard which gives the illusion of a full-screen slider while being a framed slider. Not the same wow factor as full-screen but quite an elegant alternative – and I especially like the way that theme transitions between @media sizes.

I like Customizr’s real full-screen slider but I think it would be improved if it could be re-engineered to scale the image depth once the viewport grows beyond 1200. But since that would mean filling the screen with the image at extreme widths, it would be nice to include an option to start with shallower images, eg 1200 x 300 or 1200 x 400.

Next best option (for me) would be to force the slider to switch from full-width to framed once the screen gets to, say, 1300. That would be a handy Snippet!

Next best option (for me) would be to force the slider to switch from full-width to framed once the screen gets to, say, 1300. That would be a handy Snippet!

I do this on darioalfonsi.com with this CSS:

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

Change to 1300 if that’s what you need. Best is to limit at full-image size (which should be 1170 if you’ve set up your slider images well for the Customizr theme).

@electricfeet – thank you! That’s just what I wanted and will save the day until we get some built-in controls. My home page slider is 1200px full-width and that’s the troublesome one. My other sliders are 1170px framed and don’t cause any trouble. So max-width should probably be 1200px for me – or more if I want to preserve the full width for longer, at the expense of losing a little of my image to the cropper.

Lovely site, btw (and v interesting). I also noticed that your slider behaves much better than mine in the smaller viewports – particularly down at around 500px where yours is glued to the top rule while mine develops a sizeable gap above the slider. Have you used any other tricks there?

For the slider/margins etc., only CSS, which you should be able to see at
https://darioalfonsi.com/wp-content/themes/customizr-child/style.css

The CSS is only valid for Customizr 3.0.13 (I’ve not updated yet).

Your CSS is a thing of beauty: a veritable masterclass in minimalism (which I espouse).

In fact, it’s so good, I’m now contemplating installing v3.0.13 so that I can steal it (since I don’t know enough to be able to adapt it for v3.1.5).

The only thing I would add is a (minimalised) Search tool – maybe in the white footer where the social icons once were. Not just because I think every site should have one but because I want to copy how you do it!

Thank you so much, chappie, and ElectricFeet! I’ll be trying out some of your suggestions.

Your CSS is a thing of beauty: a veritable masterclass in minimalism (which I espouse).

Thank you ?? All learned this spring/summer. The key, I find, is to make sure you comment it well. I need to do this because of my lousy memory, but it makes it easier for others too.

In fact, it’s so good, I’m now contemplating installing v3.0.13 so that I can steal it (since I don’t know enough to be able to adapt it for v3.1.5).

There’s probably nothing to change in the CSS for 3.1.5. I made a few mods to the code that I need to update for 3.1.5, but it looks like the CSS will probably be the same.

Sorry about the lack of search ?? Dario Alfonsi’s site is simple enough not to need the extra clutter, so I never implemented it (and probably wont).

For all those who wants to disable the 500px image crop for their image slider in customizr theme for wordpress, please follow
this tutorial.

@elnino3838 – thanks for the link. Have you tried this method? I would like to but I daren’t touch my php until my official food-taster, @electricfeet, has run it through his coffee grinder. In fact, I would be surprised if he hasn’t already played with that code and ruled it out for some reason…

I am actually the person that did the tutorial after having looked for hours a solution to this 500px cropping! So yes I did try it and it worked, hence this tutorial!

Cool – thanks for doing that.

I went to your walks website to check it out but there are no sliders on view. Do you have a working demo somewhere that I can view?

There and There (this one only have one picture but it is a slider).

Thanks Elnino3838 – the images are lovely…but they are still being cropped.

They aren’t. They are rescaled only. For example on this page:

https://www.greatwalksoftheworld.ca/waterton-lakes-national-park-carthew-alderson-trail/

original picture is 2994 x 1996 px.

With the bit of code I’ve done, the height is rescaled to 1000px and the width to 1499 px for the slider.

Name of the file: https://www.greatwalksoftheworld.ca/wp-content/uploads/2014/03/Photo-1-3.Prince-of-Wales_2-1499×1000.jpg

We have the exact same division factor applied to height and width (1.996 in this case) so no information has been lost like when they are cropped.

Maybe I didn’t give them enough time — they initially look cropped as I quickly resized my viewport but if I slow down then there’s an adjustment made. I’ll check it out further tomorrow as I would love it to work.