Slider Responsive Images Look bad

DaveOzric
935 Posts
DaveOzric posted this 11 October 2016

Hello, I want my images to be responsive on mobile devices but they are all more or less set to cover so it looks bad. Your documentation shows settings that are nowhere to be found.

Any suggestions?

2016-10-11-111125.jpg

2016-10-11-111234.jpg

Hello, I want my images to be responsive on mobile devices but they are all more or less set to cover so it looks bad. Your documentation shows settings that are nowhere to be found. Any suggestions? !2016-10-11-111125.jpg! !2016-10-11-111234.jpg!
Vote to pay developers attention to this features or issue.
18 Comments
Order By: Standard | Newest
DaveOzric
935 Posts
DaveOzric posted this 11 October 2016

I would be interested in how this can be done but am not using it on the site now.

Thanks

I would be interested in how this can be done but am not using it on the site now. Thanks
Support Team
Support Team posted this 12 October 2016

Hi,

Have you tried to set the Size option for each Image in each Slide to be 100% auto? You can attach the project with the issue to this ticket and we will look into the slider.

Sincerely,
Hella

Hi, Have you tried to set the Size option for each Image in each Slide to be 100% auto? You can attach the project with the issue to this ticket and we will look into the slider. Sincerely, Hella
DaveOzric
935 Posts
DaveOzric posted this 12 October 2016

I was hoping for a single setting for the slider like other extensions I use in Joomla vs having to do it for each and every slide. I resize them before I add them. Seems clunky to do it that way.

I was hoping for a single setting for the slider like other extensions I use in Joomla vs having to do it for each and every slide. I resize them before I add them. Seems clunky to do it that way.
Support Team
Support Team posted this 13 October 2016

Maybe it will be changed somehow in the future. Let us know if you need our further help.

Sincerely,
Hella

Maybe it will be changed somehow in the future. Let us know if you need our further help. Sincerely, Hella
DaveOzric
935 Posts
DaveOzric posted this 18 October 2016

Hello, I am sorry, I cannot figure this out. I am just trying to make these images responsive so they resize like images in the content do.

Attached it theme from Desktop version with slider.

Thank you

Hello, I am sorry, I cannot figure this out. I am just trying to make these images responsive so they resize like images in the content do. Attached it theme from Desktop version with slider. Thank you

Last edited 18 October 2016 by DaveOzric

Support Team
Support Team posted this 19 October 2016

Hello Dave,
the slider image is in fact background image and thus its size in Phone mode should be set in %. The solution for your theme requires 2 steps. Switch to Phone mode.
1.open the Slide 1, open Image options and set Size and Repeat options as on screenshot

SliderPhone.png

follow the same for Slide 2

2.set Height of the Slider control to auto

regards,
Aileen

Hello Dave, the slider image is in fact background image and thus its size in Phone mode should be set in %. The solution for your theme requires 2 steps. Switch to Phone mode. 1.open the Slide 1, open Image options and set Size and Repeat options as on screenshot !SliderPhone.png! follow the same for Slide 2 2.set Height of the Slider control to auto regards, Aileen
DaveOzric
935 Posts
DaveOzric posted this 19 October 2016

Hello, this is a mess. I feel there is some bug in the version I am using. I change the values but they don't reflect in the program GUI and then the image disappears. I have to mess around with the slide and then it comes back but I am never able to get it to work.

What I do not understand is why you would of programmed this to be a background image only. Not everyone wants the image to get cut off as the screen size shrinks. It should have 2 settings, cover and contain so people who want to see the whole image can allow it to just become responsive like any normal content image that just fills the width of the screen/container.

I should not have to spend hours trying to get a slider to show 2 images on all screen sizes. Pretty much every Joomla slider does it automatically. Some give you the 2 options but none make you pull your hair out.

Hello, this is a mess. I feel there is some bug in the version I am using. I change the values but they don't reflect in the program GUI and then the image disappears. I have to mess around with the slide and then it comes back but I am never able to get it to work. What I do not understand is why you would of programmed this to be a background image only. Not everyone wants the image to get cut off as the screen size shrinks. It should have 2 settings, cover and contain so people who want to see the whole image can allow it to just become responsive like any normal content image that just fills the width of the screen/container. I should not have to spend hours trying to get a slider to show 2 images on all screen sizes. Pretty much every Joomla slider does it automatically. Some give you the 2 options but none make you pull your hair out.
DaveOzric
935 Posts
DaveOzric posted this 19 October 2016

Looking this up in the forum it's pages of the same issue.

I strongly feel you should put as much effort as possible into making the responsive portions of this work simple and easy without all the complex settings. As for the slider, people are going to want to do this one of two ways. A contain option like me on this site or a cover for large background sliders.

I see one person did what I was hoping to avoid. Make each view a set height based on the photo but that's a large not a solution because there are umpteen screen sizes out there and the photo will not actually fill the width unless it's exactly the size of the 4 you have in the program.

Looking this up in the forum it's pages of the same issue. I strongly feel you should put as much effort as possible into making the responsive portions of this work simple and easy without all the complex settings. As for the slider, people are going to want to do this one of two ways. A contain option like me on this site or a cover for large background sliders. I see one person did what I was hoping to avoid. Make each view a set height based on the photo but that's a large not a solution because there are umpteen screen sizes out there and the photo will not actually fill the width unless it's exactly the size of the 4 you have in the program.

Last edited 19 October 2016 by DaveOzric

DaveOzric
935 Posts
DaveOzric posted this 20 October 2016

Hello, If this is possible now can you provide a demo and then send me a zip file to open on my side? Can you please do this in a HTML5 template for me to open on my desktop version to see how to do it.

I cannot get it to work.

Thank you

Hello, If this is possible now can you provide a demo and then send me a zip file to open on my side? Can you please do this in a HTML5 template for me to open on my desktop version to see how to do it. I cannot get it to work. Thank you
Support Team
Support Team posted this 21 October 2016

Hello Dave,
regarding the background images. They have number of options which allow to output images in different ways:

ImgSize.png

Please note that different options could be specified for different screen sizes. If option is not set its value is inherit from the larger screen size

ImgBgOptions.png

It concerns different controls where background image could be set up, for example Section, Container, Slide, Hoverbox, Column, etc.

I'm attaching your theme with the changes applied. I do not see any problem with disappearing images. If you have got the one, please describe it in more details.

Also I:m attaching the Themler site in HTML format, it includes Slider, Image and HoverBox controls with different settings applied to the images and containers for different screen sizes.
Check it and let us know if you have additional questions.

Regards,
Aileen

Hello Dave, regarding the background images. They have number of options which allow to output images in different ways: !ImgSize.png! Please note that different options could be specified for different screen sizes. If option is not set its value is inherit from the larger screen size !ImgBgOptions.png! It concerns different controls where background image could be set up, for example Section, Container, Slide, Hoverbox, Column, etc. I'm attaching your theme with the changes applied. I do not see any problem with disappearing images. If you have got the one, please describe it in more details. Also I:m attaching the Themler site in HTML format, it includes Slider, Image and HoverBox controls with different settings applied to the images and containers for different screen sizes. Check it and let us know if you have additional questions. Regards, Aileen
DaveOzric
935 Posts
DaveOzric posted this 23 October 2016

Hello, I responded to the other ticket regarding the BGImages HTML version of the them you provided. This is not a solution to my problem.

I tested the jcSupport them in my desktop version and it's not a solution either.

Even Artisteer can do this. Here is a slider in an Artisteer HTML site that simply resized the images as you move the screen by dragging your mouse. http://spectrumhealthmedical.com/

Is this not possible to just have a image resize like a image in the content area vs cropping or stretching? I feel this is a rather large issue for some one trying to show an important image that cannot be cut off or distorted by stretching. Do you understand what I am requesting?

Thank you

Hello, I responded to the other ticket regarding the BGImages HTML version of the them you provided. This is not a solution to my problem. I tested the jcSupport them in my desktop version and it's not a solution either. Even Artisteer can do this. Here is a slider in an Artisteer HTML site that simply resized the images as you move the screen by dragging your mouse. http://spectrumhealthmedical.com/ Is this not possible to just have a image resize like a image in the content area vs cropping or stretching? I feel this is a rather large issue for some one trying to show an important image that cannot be cut off or distorted by stretching. Do you understand what I am requesting? Thank you
DaveOzric
935 Posts
DaveOzric posted this 24 October 2016

Hello, I disparately need some way to get this working. I have a client who wants an HTML site and a slider that does what Artisteer does.

Thanks

Hello, I disparately need some way to get this working. I have a client who wants an HTML site and a slider that does what Artisteer does. Thanks
jrgweb
26 Posts
jrgweb posted this 25 October 2016

Good morning Dave,

I put together a possible work around until support fixes the responsive slider. You can view your template that you posted above here.

This is a minfied version of the css I created and you can add to the template.min.css file.

.bd-slide-10, .bd-slide-12 { background-size:100% auto!important; background-position:center center!important; background-repeat:no-repeat!important; } @media screen and (min-width: 320px) and (max-width: 480px) { .bd-slider-2 { height:120px!important; } } @media screen and (min-width: 481px) and (max-width: 767px) { .bd-slider-2 { height:143px!important; } } @media screen and (min-width: 768px) and (max-width: 991px) { .bd-slider-2 { height:225px!important; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .bd-slider-2 { height:290px!important; } } @media (min-width:1200px) { .bd-slider-2 { height:360px!important; } }

Good morning Dave, I put together a possible work around until support fixes the responsive slider. You can view your template that you posted above [here][1]. This is a minfied version of the css I created and you can add to the template.min.css file. .bd-slide-10, .bd-slide-12 { background-size:100% auto!important; background-position:center center!important; background-repeat:no-repeat!important; } @media screen and (min-width: 320px) and (max-width: 480px) { .bd-slider-2 { height:120px!important; } } @media screen and (min-width: 481px) and (max-width: 767px) { .bd-slider-2 { height:143px!important; } } @media screen and (min-width: 768px) and (max-width: 991px) { .bd-slider-2 { height:225px!important; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .bd-slider-2 { height:290px!important; } } @media (min-width:1200px) { .bd-slider-2 { height:360px!important; } } [1]: http://tinyurl.com/jm689ah

Last edited 25 October 2016 by jrgweb

DaveOzric
935 Posts
DaveOzric posted this 25 October 2016

Hi jrgweb, I was thinking along the same lines to just add a bunch of new media sizes for now. I will give this a shot but the site I am working on is a different one. Do you think just targeting the main 7 or 8 screen resolutions could be a Band-Aid for now? Sure it won't cover all sizes but at least it will be a start.

Support, please help identify some way to make this as responsive as possible. There must be a way to get it to work. It would be very much appreciated.

Thanks

Hi jrgweb, I was thinking along the same lines to just add a bunch of new media sizes for now. I will give this a shot but the site I am working on is a different one. Do you think just targeting the main 7 or 8 screen resolutions could be a Band-Aid for now? Sure it won't cover all sizes but at least it will be a start. Support, please help identify some way to make this as responsive as possible. There must be a way to get it to work. It would be very much appreciated. Thanks
Support Team
Support Team posted this 27 October 2016

Hello Dave,
have you checked the theme attached to the topic
http://answers.themler.com/questions/104260/responsive-images-on-slider-please-vote
?
The image size is adapted for different screen sizes. What is wrong here?

As for Artisteer slider, it is using the background image for the slide and "cover"/"contain" background size

ArtSlider.png

The same settings are available in Themler slider: you may specify background image for the slide and set size to contain/cover.

Can you provide link to the page which demonstrates the issue with slider images and attach screenshot how you'd like the slider to look in Phone mode?

regards,
Aileen

Hello Dave, have you checked the theme attached to the topic http://answers.themler.com/questions/104260/responsive-images-on-slider-please-vote ? The image size is adapted for different screen sizes. What is wrong here? As for Artisteer slider, it is using the background image for the slide and "cover"/"contain" background size !ArtSlider.png! The same settings are available in Themler slider: you may specify background image for the slide and set size to contain/cover. Can you provide link to the page which demonstrates the issue with slider images and attach screenshot how you'd like the slider to look in Phone mode? regards, Aileen
Gifford Monument
1 Posts
Gifford Monument posted this 05 July 2023

thanks

thanks
appliancerepaircalg01
30 Posts
appliancerepaircalg01 posted this 04 August 2023

Got it. Thank you for sharing this. Fence Repair Amarillo, TX

Got it. Thank you for sharing this. [Fence Repair Amarillo, TX][1] [1]: https://www.fencecompanyamarillo.com/
Abbas Khan
37 Posts
Abbas Khan posted this 12 October 2024

As Latin music gains international recognition, Peso Plumas dad has risen to prominence. His journey to success is a testament to the love, dedication, and resilience of his parents, who have played a crucial role in shaping his musical path.

As Latin music gains international recognition, [Peso Plumas dad][1] has risen to prominence. His journey to success is a testament to the love, dedication, and resilience of his parents, who have played a crucial role in shaping his musical path. [1]: https://usabignetwork.com/peso-pluma-parents/
You must log in or register to leave comments