problem with slider images

Aye — it’s because your images are different sizes. The “long/thin” ones seem to be 3328 x 500px when the standard size for a full-width slider should be 1200 x 500px.

Hi

Sorry to disturb your post but I am using customizr also and
How can I add images for the slider in the fromt page ?

Anyone ?

Thanks

@taktar, please start a new topic next time.

Try this section of the documentation.

Thanks Chappie!

The pixel-perfect sizing of the images is 1170×500.

@electricfeet – for a full-width slider? I thought that was the recommended size for a framed slider.

Looking inside the code, the slider default size is set at 1170×500.

If you check “Full width slider”, it gets cropped at 99999×500 — not 1200×500 (I don’t know where that comes from, but I’ve seen it mentioned a few times here). In reality, this “dummy” 99999 value just means it gets as wide as it can on the page, no matter what the browser width.

A couple of the default slider images in the theme are sized at 1200×500, so this may be where the misconception comes in. It’s not indicative of what will happen in the code.

This is what happens:

If you have “Full width slider” unchecked:

1200px-wide or more browser viewport: (I choose 1200 because it’s a media query breakpoint, not because it’s a good image size)

• 1170×500 ratio img size is the perfect size, because the slider stops expanding at 1170, so there is no squishing nor stretching; it remains at 1170×500.
• Greater than 1170×500 ratio img size gets cropped back to 1170 at the sides. So if you have an image that is very very wide, you can lose a significant amount of it. And specifically, 1200×500 loses 15px either side.
• Less than 1170×500 ratio img size gets cropped significantly at the bottom.

Under 1200px wide browser viewport:

• 1170×500 ratio img size works pretty well, with some minor cropping at the bottom, depending on the viewport. Same is true of 1200×500 img size, with a tiny difference of a few (around 10) extra pixels showing at some specific widths.
• Greater than 1170×500 ratio img size continues to get cropped at the sides, including 1200×500, which loses 15px each side.
• Less than 1170×500 ratio img size gets cropped significantly at the bottom.

For a non-full-width slider, the clear winner 1170×500 ratio img size.

If you have “Full width slider” checked:

1200px-wide or more browser viewport:

• 1170×500 ratio img size has significant cropping at the bottom (as does 1200×500 img size and pretty much everything with a similar aspect ratio). It gets really messy on very wide screens.
• Greater than 1170×500 ratio img size finally comes into its own and you get to see the whole slide without scaling. So if you have an image that is very wide, you can now see it all. BUT, and that’s a big “but”, the bottom of your image will not line up with the others unless the viewport is wider than your width. Instead you’ll get a whole load of extra whitespace at the bottom. So, for example, a 2000×500 image will always have whitespace under it unless you have a viewport that’s 2000px wide (that’s not very many of us).

  For every image equal or over 1200px-wide, there will be one point where it’s perfect: a 1200×500 image will look perfect on a 1200-wide viewport; a 1201×500 image will look perfect on a 1201-wide viewport; a 2437×500 image will look perfect on a 2437-wide viewport; etc.

• Less than 1170×500 ratio img size gets cropped significantly at the bottom.

Under 1200px wide browser viewport:

• 1170×500 ratio img size scales down, keeping the aspect ratio — gradually cropping more at the bottom and resizing through the media breakpoints. 1200×500 img size is pretty much identical (as are 1199 and 1201). As you go to smaller viewports, the image gets cropped from the bottom again and resized etc.
• Greater than 1200×500 ratio img size is messy as above. Unless you have all your slides exactly the same, the bottom will move up and down. You get a lot of white space underneath, which you will have to deal with.
• Less than 1170×500 ratio img size &mdash disaster as above. Major cropping everywhere.

For a full width slider, 1170×500 and 1200×500 are pretty much neck and neck, as are 1201×500, 1202×500, etc. as well. However, as the underlying code has 1170×500 as the default and as you may decide to switch off full width in the future, I think the 1170×500 has to win even in this scenario.

Note that all sizes and viewports, the Customizr slides keep their aspect ratio (which is a big plus, as far as I’m concerned) — scaling and cropping, rather than squishing or stretching. Cropping is minimized over all scenarios by using a 1170×500 aspect ratio.

For me, the bottom line in all of this is to keep your images at 1170×500, in all cases. 1200×500 certainly has no more intrinsic validity than 1201×500, for example.

Interesting dissertation, ElectricFeet!

The 1200 x 500 possibly comes from the official video which shows images with those dimensions being added to a full-width slider.

In any event, basic geometry would seem to indicate that a full-width image should be wider than a framed image to display optimally.

Unless you change the @media responses, the former will always display wider than the latter at all viewports above 767px and might therefore logically demand a wider image to display optimally. But that won’t be true if the slider display width (which is narrower than the viewport width until <768px in the case of a framed slider) is less than 1170px since both images will then be scaled down.

The maths can be further complicated by any zoom preferences the reader sets. I’m currently typing in a window which is being reported as 1539px wide; but if I click Safari’s zoom button to make the text easier to read, the same window is now reported as 1282px wide. The only way for me to synchronise my browser window resolution with the native resolution of my theme is to stretch the window so that it covers the full width of the monitor and then adjust the zoom until it reads 1920px. In the real world, I don’t think people care – they set their zoom to default to what works best for them on the majority of pages visited, and much will depend on font size coding and on the reader’s eyesight.

So there are too many variables to allow a set of hard and fast rules to work for every situation. But since it makes no difference in terms of image quality below a slider width of 1170px, the contest should be decided on display quality at >1170px slider widths. At those widths, the 1200px image will always display better, ie sharper, than the 1170px image in a full-width slider (unless you instruct it via @media to stop expanding).

That’s not a huge gain and the deciding factor would probably be a quantitative one, ie what proportion of websites are viewed in viewports wider than 1170px? I assume that the proportion is dwindling as tablets and phones take over the world…

In any event, basic geometry would seem to indicate that a full-width image should be wider than a framed image to display optimally.

Ah, if only basic geometry were a guiding principle for CSS! ?? The reality is that your browser is rescaling the image constantly to fit your viewport.

Let me turn the above on its head:

There is only one moment in re-sizing your browser window where the 1200px-width image shows at its own exact size. That is when you have the slider selected full width and your browser window’s viewport is exactly 1200px. At every other window size—wider or narrower—it’s being scaled by your browser. Only for one fleeting pixel are you seeing a “perfect” image.

The 1170px-wide image also shows at its own perfect-pixel moment for a full-width slider. But in addition, it will show perfectly at all browser viewport widths above 1200px when you have full-screen unchecked.

The bottom line is that 1170 is always equal or better than 1200.

…what proportion of websites are viewed in viewports wider than 1170px? I assume that the proportion is dwindling as tablets and phones take over the world…

iPad retina has 2048 pixels ??

Agree re only one pixel-perfect moment (PPM) – and I suspect that is at 1200px viewport width whether you have a full-width slider (1200px image) or a framed slider (1170px image) since the slider frame is presumably 15px x2 at that moment.

This is true unless you elect to use an 1170px image in a full width slider – in which case the PPM comes when the viewport is 1170px wide.

My argument about the relative merits of using 1170 or 1200px images in a full-width slider only applies if you want a full-width slider and choose to allow it to expand merrily as wide as wide can be. If that’s what you want to do, 1200px is marginally preferred to 1170px since it requires fractionally less digital zooming once beyond the PPM.

And no argument from me about the best option being to stick with a framed 1170px slider or to force a 1200px full-width slider to stop expanding beyond the PPM.

But my best-case scenario would be to allow a full-width slider to scale in two directions (south and east) after the PPM. I’m guessing that bit of re-engineering isn’t an option though…

And no argument from me about the best option being to stick with a framed 1170px slider or to force a 1200px full-width slider to stop expanding beyond the PPM.

That’s in fact what I do with:

@media (min-width: 1200px) {
    #customizr-slider {
        max-width: 1170px;
        margin-left:auto;
        margin-right:auto;
        }
}

That gives me full-width on small screens and max 1170px on large screens. Large screens always see my slider images in their pixel-perfect moment.

But my best-case scenario would be to allow a full-width slider to scale in two directions (south and east) after the PPM. I’m guessing that bit of re-engineering isn’t an option though…

Not really, no. If you did this, you would have to scroll to see the features on many screens, which rather defeats their point.

Unless all your users have retina and you are serving 20MB images, it’s all rather academic, anyway: the quality of on-screen images is always pretty crappy ?? Even at arms length, I can see the pixels on my high-end monitor. Admittedly, I have an excellent optician ??

And I’m using your Snippet…

If you did this, you would have to scroll to see the features on many screens, which rather defeats their point.

Unless I have my browser window at full screen size (default is not, so that I can clear my Dock at the bottom and see a slice of my desktop on the right), I anyway have to scroll to get to the feature buttons so it’s just a question of degree.

great contributions, may I know if these dimensions apply to x2 themes as well. thanks

@patrickmawuli – you will need to ask the experts on the x2 support forum but I think their slider dimensions are different (eg 1000×250 for full-width). No idea what happens under their hood — but the principle will be the same…ie there can only be one PPM in a responding theme.

@electricfeet – have you looked at the LayerSlider plugin, discussed here? Is it handling scaling, geometry and white space extremely well – or it a case of trompe l’?il because the images have been carefully chosen with wide “padding” and small subjects?

Hi chappie. Yes, I know that there are lots of sliders that are more comprehensive than Customizr’s. Making this one do what I want has become an intellectual exercise more than anything ??