I have a problem using Essential theme .
I want to set the slide show up so it can show the images in a full screen width manner. But there is no settings for that . I'm using the latest version of the theme and Moodle 2.8.
I believe (although Gareth can correct me if I'm wrong) that the way the slideshow is set up at the moment is that it displays the images at 100% height upto a max of 300px. The width is then a function of the image height to keep the image in proper perspective
e.g. an image that was originally 600px high by 800px wide would show at 300 by 400 (max height of 300px and width to keep in perspective), while an image that was originally 150px high x 800px wide would display at 150x800 (100% of its original).
To ensure your images show full screen (whatever full screen is on your users' displays) you probably need to make them 300px high by whatever screen width you determine is most appropriate for your users.
Alternatives are to alter the css but you then have to trade off either not seeing the whole image sometimes (it fills the screen width but at the expense of losing some of its height) OR it is distorted by stretching both dimensions to 100% whatever the original dimensions of the image.
Richard
Thanks Richard , but the problem is I can't get it to show images with more than 1000 px in width. (the height is 300 px)
When it goes more than 1000 px in width, although I keep the height fixed in 300 px, the slider scales the image (and I don't know why!) , so the image will be smaller in both width and height.
Any solutions ?!
Well, the only thing I can see in firebug is that the image container is limited to 90% width with 5% left and right padding.
The other thing is do you have the theme set to use full screen (variable width) or is it set at one of its fixed widths? (see the general settings page within the Essential theme settings)
It seems to be more than 90% !!! I changed the setting to variable width, but again the scaling happens ! I set an image in 1200 x 300 and it scaled it into 1134 x 284 .
Hi,
I think you will find that you would need to make the outer container bigger at least give it more space by removing any padding and margins.
Cheers
Mary
Thanks Mary,
How could I do that? Would you please guide me through ?
Try adding this in your Essential > General settings -> Custom CSS box, then save settings.
#essentialCarousel.carousel .carousel-inner > .item .carousel-image-container { width: 100%; padding: 0; margin: 0 auto;}
Thank you very much Mary. It worked. Just a little bit of padding at the left side of the screen. Can I remove it as well so I could get the fully edge to edge slider ? Sorry for the number of my questions.
Finally managed to get it right . In addition to your line of code I changed the properties of #page and #middle-blocks too.
There's only one thing left. Although not that much important, but it'd be nice if you could help me to solve this as well. The problem is when I change the size of my browser page, at some point the horizontal scroll bar will appear on the screen and I can't figure out the reason. It happens when the size of the page is about half or less than that.
Thanks again for your help
The scrolling probably comes from an overflow: auto; somewhere within the page content, if it exists, which could be changed to overflow: visible; but not knowing what other changes you have made to page and middle blocks I can't say. I would need to see your Moodle site to determine that.
Thanks Mary, I'll check it. Unfortunately my Moodle site is now running on a local host. But I try to find what may cause the problem as you mentioned. Just meanwhile, would you please give me the code to change the hight (max-height) of that slider too? I used this
#essentialCarousel.carousel .carousel-inner.item.carousel-image-container { max-height: 500;}
But it seems it lacks something to apply the changes.
Thanks a lot !
That is the wrong place to make the change...
The CSS rule should be for the image NOT the container. The container needs to stay flexible, whereas the image is not so, it is restricted. Also you need units of measurement in px
#essentialCarousel.carousel .carousel-inner > .item .carousel-image {
width: auto;
max-height: 500px;
}
Well I think the container's height is also restricted. I added your code but it seems we have to expand the height of the container too. Is that correct ?
I put width: auto; instead of height: auto;
How are you displaying the images?
Are they loaded into the page, or as a background using CSS?
Also have you purged caches?
moodle/admin/purgecaches.php
Hi Mary and thank you again for your kind replies.
I simply put the images in the slide show through slide show setting page. And yes, I purged all the caches but still it resizes the height of the images. (e.i. 1600x400 into 1600x313)
In that case there may be some CSS that is acting on the image. Please make sure the CSS is correctly written as a small mistake can stop some CSS being applied.
There is no extra CSS added by me other than what I mentioned and those given by you . Is there any other parts I should look for ? (Other than the Custom CSS part)
By the way, Do you suggest switching to the Elegance theme to get rid of these kind of issues? It seems to have a more customizable slideshow and other parts too if I'm right .
Well the best thing to do is try the Elegance theme and see if that works any better.
The thing with Essential may just be that the image is being resized by the browser as this is calculated.
perhaps your images are not in the correct ratio.
I suppose you could send me a copy of your theme and I could test it.
cheers
Mary
Thanks again Mary, the issue got surprisingly solved !!!
I don't know why! , but I found that while uploading my image , Moodle has changed the ratio into a width bigger than the original and a height smaller than that ! I have uploaded it several times though. Finally when I found the issue I uploaded it again and it's just Ok!
So, by inserting your lines of code it is working as it should now and I really thank you for the support and patience.
Regards
You're welcome!!
So pleased it is working OK now.
CHEERS
Mary
Essential has three 'Slide caption options' that affect the size of the image container. Pick one that best suits your needs.
Thanks Gareth. I did as you mentioned. It got better. But yet I can't have an edge to edge image in the slides. Is there any solution on removing the remained space on the sides of the slider?
You can change the CSS via the LESS if you want. It's defined in: https://github.com/gjb2048/moodle-theme_essential/blob/master/less/essential/carousel.less and https://github.com/gjb2048/moodle-theme_essential/blob/master/less/essential/settings/carousel.less. To compile from LESS to CSS, watch this for Shoehorn as it applies to Essential too: https://moodle.org/mod/forum/discuss.php?d=279485
Essential theme is excellent. Are you perhaps planning to make it possible to change the order of the existing slides? Now we have to make it with copy/paste, field by field.
See: https://github.com/gjb2048/moodle-theme_essential/issues/657 - needs defining exactly what will happen by somebody who wants and is willing to pay for the development, then I'll work out the cost, then needs a contract to fund the development.