To get you in the ball park, I use 1250 x 315. The title of the slide shows between 110 px and 510 px left → right.
Peace
And I use 1200x300 So yes, I'd say Kirk has about the right figures and you wont be far out if you go with something around that range.
But I believe the images are using background-size css rules to fill the space available anyway, so provided you start with something reasonable it should be fine. ('Reasonable' in this instance reflecting the screen size that the majority of your users are likely to have, rather than being a fixed size - e.g. around 1200px for most laptop/desktops, smaller if you know your users are primarily going to be stuck in an older computer lab with 1024px screens, or even smaller if you know the majority of your users are going to be accessing on mobiles - but not too small so it doesn't pixelate for the ones that are using bigger screens )
Thank you SO much, Kirk & Richard. I can go to sleep tonight now!
(Would be great if in the next update they included "1200 x 300" next to the "256 x 256" in the slider settings. Simple stuff but for newbies, well..
Have great weekend!
Sorry - Bit confused here. Where IS this "large background image" mode setting exactly?
I can get the image showing and used the suggested size here but its not exactly responsive. The picture only scales to a certain maximum size and then just stops bothering (maybe intentional)
This (www.ukfilmnet.org/welcome) is what I would call an edge-to-edge image slider - but I cant get that with this theme - what am I doing wrong? (I clearly dont want top to bottom, but I DO want side to side full images especially if the image is a whopping 1300x 315 pixels!
It sounds like I may not have this "large background image" mode setting switched on but I'm blowed if I can find where it is
(The screen grab shows nicely the big white gaps either side of this theme slider) Frustrating!
Thanks
P.S> The title and site logo are being covered up by the slider - Cant fathom why
Also the site heading and logo are being crashed on by the same slider. I am sure there must be something wrong with the slider - or page setup...or... .. (see screen grab)
"Large background image" mode may have existed in the past, but would have been removed with the old slider. This was because of bugs in the code and licencing issues: https://github.com/DBezemer/moodle-theme_essential/issues/61.
The maximum height for an image on a desktop is set at 300 pixels in the CSS. Therefore the width of the image is a ratio product of the height at the maximum. To get edge to edge images with this constraint would mean stretching the image. This would look awful.
I believe that beyond 300 pixels even on a large display means that the image is taking up lots of space, so much so that the 'scroll of death' would leech its way into the fray.
Therefore adjust the source images to have the maximum width desired at a height of 300 pixels or change the CSS. Being the max-height of the '#essentialCarousel.carousel .carousel-inner > .item > .carousel-image' selector. There are others to change too for lower resolutions.
Thanks Gareth. So there is no way to have a "correctly responsive" left-to-right image? Just to be sure so I dont spend ages head-scratching. What about changing the image height (bigger aspect ration) to - say - 200px. Would *that* allow an edge-to-edge image to work? I'm really baffled how Julian managed this (MoodleMan) here Did he simply drag his browser very cafefully to choose a browser window size that just happened to make it look OK?
I confess I also am baffled why a clean install of Moodle 2.65 and the right theme version for 2.65 results in a site heading and logo that is covered up by the same image slider - and the social links on the top right hand that are also badly messed up with a virgin "out of the box" install? (see screen grab)
Any suggestions gratefully appreciated
Dom
(screen grab with problems annotated in green)
If you wrote css to add the images as background images then that would achieve what you want Which is basically 100% width coverage.
Hi Mary
Thanks for that feedback. I see. It sounds like I'll have to wait till I find a CSS coder then.
I assume the demo video for it was unintentionally somewhat misleading as a re-coded/designed theme build.
D
Hi Dom,
Ok, with the header issue, I looked at your site and you appear to have the following custom CSS (its at the very end of the styles and I could not replicate the issue in my installation):
#page-header{height:10px}and this is causing it. So that needs to be removed. If it is there for a reason, then please say what the reason is and I'll see what I can do.
With regards the slider, as I said earlier, the one in the video was the old one which has license issues: https://github.com/DBezemer/moodle-theme_essential/issues/61 - so I had to go with a rational solution that was also GPLv3 compatible, so chose in the first instance to implement the Bootstrap carousel as its replacement.
I have doubts about the background solution as conceptually images would still be of a given aspect ratio, so if the ratio was kept then logically to keep a 300 pixel height, then cropping would have to happen when the width was edge to edge. If the ratio was ignored then you get slanting / distortion as has been evident until a recent fix: https://moodle.org/mod/forum/discuss.php?d=270135.
Of course another solution is the implementation of another slider that appears to do what is required and is GPLv3 compatible. For the moment, that is not a priority for David and I. In addition Bootstrap 3.2.0 has an improved slider - http://getbootstrap.com/javascript/#carousel - and we plan to update in the future: https://github.com/DBezemer/moodle-theme_essential/issues/24.
Gareth
Many thanks Gareth - I appreciate the ongoing advice. Am I right to understand you're personally very involved with this theme yourself?
Its odd what you say about the CSS. No such change has been made, Its important to stress that this is a virgin 2.65 install with an equally virgin theme install. Perhaps you could give me idiot level advice on what I need to change and where that file is to fix this?
I also have a direct question / query to ask you given your expertise, which I have (will send) in a DM to you, which i hope you'll permit.
Hi Dom,
As you can see from the plugins page - https://moodle.org/plugins/view.php?plugin=theme_essential - I am one of the co-developers now. David and I have taken over from Julian with his blessing.
To be honest, I don't think the page-header CSS is in the theme as distributed, but will need to check as I operate mainly on M2.7. So it could be in a file or even the Custom CSS box in the settings. I just found the issue and thought it was odd.
Feel free to send me direct questions, but I do take the view that one-to-ones are 'paid consultancy' when related to specific installations, unless they are an issue that will benefit all by fixing / making an enhancement. When specific issues are posted here on the forums, then the answers benefit all and are up to me with no pressure to answer if I choose.
Cheers,
Gareth