v 2.8.1, Essntl - 2014111000
I'm trying to determine the size of an image to load as a slide which will cover the entire slide block portion. I've attempted to change the h/w pixel size of images to no avail. (I found a maximum limit...lol!)
Is there a previous thread that discusses this? Haven't found it.
Thank you in advance for your guidance!
As long as the images are all the same height/width the Carousel slider should adjust accordingly at least that is how the one I use in my themes work.
This is my mock bootstrap website http://bylazydaisy.co.uk where the slide images there are 1200px (w) by 480px .
Hope this answers your question?
Cheers
Mary
At the top of the 'Slide show' settings page there is already a lengthy description:
"This creates a dynamic slide show of up to sixteen slides for you to promote important elements of your site. The show is responsive where image height is set according to screen size. The recommended height is 300px. The width is set at 100% and therefore the actual height will be smaller if the width is greater than the screen size. At smaller screen sizes the height is reduced dynamically without the need to provide separate images. For reference screen width < 767px = height 165px, width between 768px and 979px = height 225px and width > 980px = height 300px. If no image is selected for a slide, then the default_slide image in the pix folder is used."
Mary, Gareth,
I'm sort of confused. I resized the photos to 1200x480 and they don't quite cover the entire screen. Attached is a screen capture. You can see that the photo doesn't cover the background image much less extend to the margins.
Also, why do I have a white border around each photo? I'm guessing there is a way to remove it?
Thanks!
Hi Tim.
Ok, Essential is almost certainly the most feature rich theme available for Moodle and as such if there is a bit of functionality, then there is likely to be a setting for it. So, there is a setting 'slidecaptionoptions' that you will find on the slide show settings page that has three types. The default is the 'beside' option which does indeed put the white boarder around like an old instant photo. Please explore the other two to see what works best for you. But I'm pretty sure that they all will constrain the image to a certain extent. Just need to see what happens.
Gareth
Gareth, Thanks for the suggestion. Kinda strange that an image border would be controlled by a setting that references caption.
After playing with the different settings, border is removed. However, both height and width are significantly resized. Frustrating!
So, why is it that Mary's slide (below) nearly covers the entire area and mine (1200x480) barely covers 1/2 of the same space? Is there another parameter I'm missing? (I removed the docked blocks and there is no significant change.)
Thanks again.
Hi Tim,
Ok, Essential has a past and that past is CSlider (http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/) - it was originally in Essential, but had to be removed because of:
So had to be removed and replaced with a slider that was GPLv3 compatible - hence the Bootstrap slider. However, after lots of complaints, I spent ages creating both the 'beside' and 'caption underneath' options such that the new slider looked like the last. As with things in life, if you are going to do something radical do it in a new product rather than an existing one because you'll loose the supporters. Hence being the way it is. Thus, Mary's solution is one way for the slider in another theme (I think). The solution I have in Shoehorn is subtly different.
And I do need to state, that CSlider will NOT be coming back to Essential. Unless its published under a GPLv3 licence.
So, this also means that I've attempted to make the slider both visually the same as the old and at the same time improved responsively. You can see from the attached how a wide image can fit. There are margins around it so that the arrow's are not on top. And indeed there is a page width setting that you can play with and which does have an impact on how the slider needs to be styled.
Gareth
Gareth, Mary
Thank you for the thorough explanation and history lesson!
I'll leave well enough alone (for now) as I am in development and have until August to tweak things.
The support from you all is AWESOME! I can't thank you enough.
Cheers!
Tim
(p.s. Onward to my next frustrating task!)
Hi Gareth, thanks for your answer in my topic. I think this discussion is what I was looking for.
My only problem is that I don't find in the settings menu the page about the "width setting" that you wrote about ( "indeed there is a page width setting that you can play with and which does have an impact on how the slider needs to be styled." )
I cannot take a shot of the visualization with the previous settings and visualization but I will post you a screenshot with the new slider width and the width that I'm looking for (I added a plugin for the bigger slider but I'd like to have it into the theme itself)
*just saw that there is written slicer instead of slider! sorry!
Have you tried some of the other values for the 'slidecaptionoptions' setting?
Yes, I tried all of the 3 values. This is the screenshot with the Caption option "underneath".
It is definitely better than the frame around but at least there is still a lot of space from the borders.
However, I don't think there will be a quick solution for this since you cannot really set up the pixels (width and height) of the pictures in the slide show. I guess this is the biggest difference between the Slideshow in your theme and the SlideShow block that I added on the top.
