-
Posts
-
Hi,
I am trying to create an easy-slider which handles pictures with different aspect ratios well, like the image slider on the front page here:
Here there is e.g. a picture which is horizontally longer than the others, and this works well. No matter how the window is resized, the pictures are shown fully and uncropped, resizing automatically.
I have tried uploading pictures with different aspect ratios, all fitting within a bounding box of 2048x2048px to ensure they have enough resolution, but cannot achieve the same effect with the Enfold sliders. The Lightbox seems to be able to do this, but not e.g. the easy slider. I get pictures which are cropped or enlarged in ways that they are not shown fully.
Can you advice me on how to achieve this effect? It should be quite simple and something that all photographers using the Enfold theme could use.
Thanks in advance,
Peter
Hey voigt_peter,
Can you show us where you are using as a sample so we can see what goes wrong and try help you please?
Thank you very much for your understanding
Best regards,
BasilisHi Basilis,
I am working on a local MAMP site, so I cannot right now show you an example. It will take a day or two before I can get it onto a live site – then I will return.
But the question is general in nature – how to display a series of pictures with varying aspect ratios (e.g. resolutions before upload 2400×800, 800×2400, 2400×2400) in an easy slider such that they are not cropped or enlarged, but down-scaled to fit the display.
The LightBox does exactly that, but it seems it cannot be used as a slider. But I am looking for something like that.
For the sliders, you seem to have some predefined image sizes (both vertically and horizontally), but what if we have a series of pictures of varying aspect ratios that don’t exactly match your aspect ratios?
I have seen some Quick CSS-tips, but haven’t really gotten anything to work.
So maybe you can, while I get the live site to work, give a general recommendation on how to display images with varying aspect ratios in the sliders?
Thanks in advance,
Peter
Hi Peter,
Images have to be the same size and same aspect ratio, otherwise, the content beneath will be jumping up and down. Or have a big container in the first place, but such a slider is not available in Enfold.
Best regards,
VictoriaHi Victoria,
I think I understand you say. If you look at the example website and move between pictures with different aspect ratios, they are actually inside in a bigger container large enough to hold the tallest/widest ones. So the surrounding website stays fixed.
Could it be achieved with the Enfold sliders and some custom CSS in the following way:
1) In the slider options set the image size as before, but now let it denote the size of the “big container” the pictures must fit within.
2) With custom CSS scale the pictures down so they fit within the bounding box (depending on aspect ratios, either make height or width fit and scale the other dimension proportionally). If they are already smaller than the bounding box, center them within it.Alternatively, can you think of any other way I can achieve the same look as the slider on the sample website, maybe by using an external slider plugin?
Best regards,
PeterHi,
Thank you for the update.
Please try to use the Fullscreen Slider element. Set the Slideshow Image Size to 1030x1030px then add the following css code.
.avia-fullscreen-slider .avia-slideshow > ul > li { background-size: contain; background-position: center center; background-repeat: no-repeat; }Best regards,
IsmaelHi. I could not get this to work. The slideshow images do not seem to be resized to fit the container. Have you tried it yourself? Which size do your slidewhow images have? Mine are up to 2040px on either side and thus need to be sized down. But maybe I should resize them to be less than 1030px on either side to work with your fix?
I will spend some time getting my local website onto a public server and then get back to you.
Hi Peter,
The thing is that the sliders mostly use images as backgrounds and it hard to scale those, maybe more like a gallery plugin that will look like a slider could work.
And yes, get back to us when you get your website to a staging server.
If you need further assistance please let us know.
Best regards,
VictoriaHi again,
I have also been experimenting with the Layer Slider, setting the images not as background images but as layers. Here it seems to be possible to scale the layer images to fit (either set width or height to 100% depending on aspect ratio and set the other dimension to auto) and have them fit the slide area. Are your Easy/Full-sliders based on the Layer Slider? In that case, can you tell me how I get the same appearance wrt. the arrows?
Another question: It seems that responsiveness resizing only takes place when the width of the page is changed, not the height. I can understand this, as you can have a long page of content and it is hard to decide when it should be resized. But when you change the height to be very small such that the slider is e.g. only half way covered, that could trigger a resize. What I am looking for is the same behaviour as the example website where a vertical resize triggers a resize of the slide show. Is it possible to obtain the same effect in Enfold? I.e., trigger a resize when a slider cannot be fully shown?
Best regards,
Peter
- You must be logged in to reply to this topic.