By: mlapl1 (offline)  Sep 19 16 @ 10:08  (Read 344 times)  

Hello

I am running the rotator slider at the top of my front page. I would like to be able to adjust image size. Is that possible?

I have discovered that there is a setting called "slideWidth" in the options section, but that does not seem to make any difference to the final display.

Basically I have some large pictures that I would like to make smaller and would prefer not to resize the graphics manually if possible.

Thank you
Andrew

   
Forum Active Member
Active Member

mlapl1



Group Comfort
Level:
: +3
Registered:: 10/06/09
Posts: 450
By: Mark (offline)  Sep 20 16 @ 7:51   

Since the slider / rotator is 'responsive' - it will grow or shrink to the size of the container. The best thing to do is to wrap the slider in a container and force the width of the container.

For example, normally we just return the slider widget data from the static page like this:

PHP Formatted Code

return WIDGET_slider($sliderData);
 


So the slider is going to grow / shrink to fit the available space. Let's now wrap it in a div where we specify the width so the slider is now in a smaller container - so our code might look like this:

PHP Formatted Code

return '<div class="uk-responsive-width" style="width:500px;margin:0 auto;">' . WIDGET_slider($sliderData) . '</div>';
 


What we've done is create a wrapper div that is 500px wide. We add the class="uk-responsive" to ensure the slider will properly shrink on smaller devices. The margin: 0 auto; ensures that our slider is properly centered.

I think this will get you what you need - let me know if it works out.

Thanks!
mark


Join me on the glFusion Gitter Channel

   
Forum Admin
Admin

Mark



Group Comfort
Level:
: +114
Registered:: 10/21/05
Posts: 7499
Location: The Great State of
Texas
By: mlapl1 (offline)  Sep 23 16 @ 10:46   

Thank you - that works fine except that what I would really like to do is to control image size (both height and width). Actually I am a bit lost about how to control picture size in sliders generally... anyway I am sure I will solve it - just time needed...

   
Forum Active Member
Active Member

mlapl1



Group Comfort
Level:
: +3
Registered:: 10/06/09
Posts: 450
By: Mark (offline)  Sep 23 16 @ 10:53   

Sliders, when mixed with a responsive design, can get complicated. The first rule of thumb is to never mix portrait and landscape images - as the portrait image will drive the overall height of the slider. The second rule of thumb is to use the same size images in a slider - again this drives a consistent size of the slider.

Since we are using responsive layouts - the width of the slider is what will then controls / influences the height - as the page scales up / down, the width of the slider will change and so does the height automatically so the image retains the correct aspect ratio. Sliders will typically scale up to the available space - this is why we need to sometimes create a div wrapper to specify max width.

We can control the width by using the trick above and the height will be automatically set to ensure proper aspect ratio of the image is shown.

Trial and error is a great way to find the perfect mix.



Join me on the glFusion Gitter Channel

   
Forum Admin
Admin

Mark



Group Comfort
Level:
: +114
Registered:: 10/21/05
Posts: 7499
Location: The Great State of
Texas
By: mlapl1 (offline)  Sep 23 16 @ 10:56   

Thanks Mark, I kind of figured some of that out but as you say, trial and error is the way to do it.

   
Forum Active Member
Active Member

mlapl1



Group Comfort
Level:
: +3
Registered:: 10/06/09
Posts: 450
5 posts :: Page 1 of 1