Responsive Images on Slider - Please Vote!

Hello Dave,
Slider control has the Background option where Fill color, Gradient or Image could be used. We're interested in Image option

The background image could be displayed in number of different sizes:

You may select any you need. In fact these are typical values and they're described at http://www.w3schools.com/cssref/css3_pr_background-size.asp

In addition to it other background options could be specified

Remember that different settings could be specified for the different screen sizes.
For example you may specify the
Size: Wide (100% auto)
for the Desktop mode and
Size: Contain
for the Phone mode.

If value is not set up for the smaller screen size it is inherit from the larger screen size.

All said above concerns the other controls where Image could be selected as background option: Section, Container, Column, Hove Box, etc.

I hope it clarifies the issue and helps other Themler users to understand the background image settings.

Regards,
Aileen

Hello, unfortunately this does not solve the issue. You are taking a square image and stretching it out to be wide to make it fill in the container.

I am using this slider on a product website and I cannot "stretch" out a photo of a product. It would be like a movie star having photos of themselves on their website making them looked all deformed.

So you are saying there is no way to make these images responsive like a content image where they retain their dimensions proportionally as the screen is scaled up or down?

Surely you understand that only a part of your users are going to want a stretched out background image for a slider photo. Many of us want a non deformed/distorted image to show something on all screen sizes.

I have used a large number of Joomla slider extensions and not one of them does it this way. If they do it's an option you can select but it's never the default. I find it interesting you choose to do it this way.

Can you please ask your developers to make some changes to make this work like the images in the content do? So they just resize proportionately as the screen size becomes smaller than the image.

Thank you

Hello Dave,
I hope that I see your point.
However right now it's not in our plans to change the slider functionality, even if significant number of users vote for it, it will take some time to implement new functionality.
That's why I'm interested in providing fast solution/workaround for you.

The other way is to add Image control to the slide and set it up as Responsive.

regards,
Aileen

Can you explain how to use image control?

I would appreciate some workaround for this. There must be something that can be done besides setting each screen size for the slider which doesn't work very well.

Artisteer gave me this for sliders to work correctly. .responsive .eco-slide-item {background-size: cover !important;}
This fixes the issue for their HTML sites so the images just scales to any size screen.

Hello Dave,
I'm attaching sample HTML site with Image control added to Slide.
The width is set to 100%, Height is also auto on all mode except Phone mode. For the Phone the Height should be adapted for the screen sizes and set in pixels.
Please check the height settings of the Column, Slide and Image controls

regards,
Aileen

Hello, I'm sorry this is such a issue for us. However this is still just a stretched out image that looks like crap when it's viewed on certain screen sizes.

To be clear, I understand what you did with the slider and it's common on other sites to work this way. My point is there are certainly many people who just don't want their images all stretch out when set to contain. Covering is fine when you want a background image for the slider.

What I am asking for is the option to make the images not background or some way to make them fully responsive like an image in the content area would be. So across all screen sizes it says exactly the correct ratio to fit in the screen by adjusting the height based on the width. Does this make sense?

It's really probably just a matter of some settings to make the slider itself stay proportional not the actual images. Just a guess.

If you could please ask the developers if they understand and think it's a valid request to have this option for people who would like this.

For now I have accepted the behavior but very much hope it's voted on and you can give me an answer about this asap.

Thank you

Hi,

What you have described should be achieved with the width:100% and height:auto options, I'm not sure why it does not work for you.
In any case we'll consider this to become the default behavior, please continue voting.

Sincerely,
Hella

It's not working for you either. It stretches out the photo. Is this not clear what I am explaining to you? I feel it is not.

Here's how your solution theme you sent me looks. Is this acceptable to someone who just wants the images to stay proportional? I don't think it is.

Now the photo you have next to the slider (backpack) stays proportional and is responsive with no distortion. Why can't this be done with the slider images?

Hello Dave,
I see the issue.
For some screen sizes the Slider should have the strict height set in pixels, it is not the bug, it's specific option.
The workaround is to use media queries like

@media (max-width: 600px){
  .bd-layoutcolumn-18 {
    height:300px!important;
}
}

regards,
Aileen

Hello, that was my deduction as well. Just need to target the top 8 screen sizes. Hopefully we can also get a more fluid solution since that will still not be perfect.

Thanks

Hi,

OK, your suggestions are in our wish list already.

Sincerely,
Hella

Do you think you would ever consider the ability to add a couple more screen sizes to the "Settings" to target more screen sizes? Like horizontal phones, etc?

That might be nice?

Hi,

anyway so that we can not change the images in the administration of cms NEVER I will use this slider

Hi,

anyway so that we can not change the images in the administration of cms NEVER I will use this slider

Well, I want to use it so I don't have to load so many scripts and files.

Hello Dave,

Do you think you would ever consider the ability to add a couple more
screen sizes to the "Settings" to target more screen sizes? Like
horizontal phones, etc?

that's difficult to predict, but now the answer is rather "No" than "Yes"
In fact if image size is adapted on the Phone screen size, it should display OK in landscape mode too.
Right now if problem occurs if check each issue individually.

regards,
Aileen

Hello, I am talking about a general option here to make the phone modes more user friendly. At this point the images are busted unless you don't mind them being cropped. So it's more about the ability to target more mobile layouts.

The one thing I think we all want is more mobile options. Google announced the other day more traffic from mobile devices than none mobile for the first time in history. So I just wanted to find out if you would consider adding an additional 1 or 2 media sizes. Going from the phone to small tablet could use a in between setting.

I am going to make a short video of how a slider would be fully responsive vs what we have now. Just to be crystal clear.

Thanks

Hello, here is a short video with an Artisteer site and 2 Themler sites. The first is Artisteer and is how a fully responsvie slider would look. Can you please add some option to have this so the image can work just like a content image and scale without distortion on any size screen.

The second 2 are the options in Themler that either crop the images and cut off parts of them on certain screens or using media queries. The media queries is not a good solution unless you create a dozen or so to fit the top screen resolutions.

Responsive Slider

Hello Dave,
thank you for details and your efforts, we appreciate your help.
I'll pass your suggestion to developers but we cannot guarantee that it will be included into one of updates.

regards,
Aileen

Hello, how exactly do I target this slider so I can add the additional media queries? I have more clients asking for images that are not cropped or stretched in the slider.

Do you need an exact site to explain this or are the sliders similar enough to give me this without an example.

Thank you