Image Slider help
Permalink
so, i added 1000x1000 images to the image slider block expecting at least to have it auto-resize so the entire fits into the block, but no, it's cropped off at the bottom (overflow: hidden) - i try editing the css and the only thing i can seem to work with is the max-height but i do not want the full height... just want the image to fit within the parameters of the height of the block image slider in proportion, without being cropped (i want the block size height width of my choosing (the defaults) but the image to fit inside (auto resize) i don't care about blank space on the sides or above)....
so i resize the images to 400x400 - so they at least fit inside the max-height of 429px...
i empty cache and reload the page, and wow - the images are exactly as they were before (cut off at the bottom) but now with less resolution as if the block resized them up
so my question is, wtf?
can anyone help with this ?
thanks
so i resize the images to 400x400 - so they at least fit inside the max-height of 429px...
i empty cache and reload the page, and wow - the images are exactly as they were before (cut off at the bottom) but now with less resolution as if the block resized them up
so my question is, wtf?
can anyone help with this ?
thanks
yes sorry, the default elemental theme - ok i will try this now and report back with results... thanks in advance!
nope, sorry, it just lessened the width of the overall slider block - and the images are still cropped ...
what else can we do?
what else can we do?
Wait
I'll upload a couple of screenshots.....
I'll upload a couple of screenshots.....
See attached
Is this a local or remote site?
If remote url please.
If remote url please.
Hi emanoyhl,
A similar question was asked on GitHub.
"The slide images are displayed responsively and proportionally, where the width of the image determines the height.
The default CSS that comes with the Elemental theme sets a max-height on each slide (li tag). If the slide image is taller than the max-height, the bottom of the image will be cut off. The reason for this is to keep the slider from growing and shrinking in height as each slide is displayed. If you want to change this behavior, you can customize the slider CSS.
My recommendation would be to create a copy of the desired image and crop it. When you crop it, make sure the focal point is centered and the image is roughly the same proportions of the image slider container.
As browser support improves, you will be able to use object-fit and object-position to handle positioning:
https://css-tricks.com/almanac/properties/o/object-fit/...
https://css-tricks.com/almanac/properties/o/object-position/"...
https://github.com/concrete5/concrete5/issues/4695#issuecomment-2620...
Another option is to try an image slider block from the marketplace that handles sizing in a different way.
A similar question was asked on GitHub.
"The slide images are displayed responsively and proportionally, where the width of the image determines the height.
The default CSS that comes with the Elemental theme sets a max-height on each slide (li tag). If the slide image is taller than the max-height, the bottom of the image will be cut off. The reason for this is to keep the slider from growing and shrinking in height as each slide is displayed. If you want to change this behavior, you can customize the slider CSS.
My recommendation would be to create a copy of the desired image and crop it. When you crop it, make sure the focal point is centered and the image is roughly the same proportions of the image slider container.
As browser support improves, you will be able to use object-fit and object-position to handle positioning:
https://css-tricks.com/almanac/properties/o/object-fit/...
https://css-tricks.com/almanac/properties/o/object-position/"...
https://github.com/concrete5/concrete5/issues/4695#issuecomment-2620...
Another option is to try an image slider block from the marketplace that handles sizing in a different way.
yes i understand how it works and how it crops and the reason why, however this isn't very handy when trying to have an end user "simply upload a photo" - the end user does not want to fuss with cropping, or creating new images to fit into the width/height limitations of the image slider.... a simple upload of image that the image gets resized to fit inside the actual block would be nice - not a cut-off of the image....
i've tried editing the css on the block but nothing seems to work
is there a bootstrap code i'm missing or something else?
thanks
i've tried editing the css on the block but nothing seems to work
is there a bootstrap code i'm missing or something else?
thanks
Locate concrete/themes/elemental/css/build/image-slider.less
Change line 17 from max-height:220px to height:100%;
Remove lines 21 to 54.
See if that works.