How to: add an image rotator in Moodle 2.2

Since using Moodle as our primary website one of the things I’ve been asked for a lot is to tidy up our front page and make it a bit less “blocky”. Problem is we still need to provide an area for notifications of new courses, events etc of which there can be 4-5 at a time.

Having seen a few websites that employ a sliding banner rotator I wondered if the same could be done in Moodle, intially leaving it as something I’d get someone else to do to save time. However since playing with the new aardvark release a couple of days ago I decided to give it a try… the results are rather pleasing 🙂

Note: make sure your site is in Theme Designer mode or remember to Clear Theme Caches after updating the file structure and config.php on your theme or your changes won’t take effect! As always test, test and test again on a dev server before you put anything like this on your main site…

Here’s one I made earlier…

Yes I’ve been naughty and let the browser remember the site admin password…  panic over it’s only my local Wampserver 😉

Finding a suitable base…

A quick Google found this… Easy Slider

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

What you get in the download is a couple of .js files, some CSS and sample HTML files to work from… time to integrate this into the aardvark theme.

Step 1… create the file structure

Ref: http://docs.moodle.org/dev/Themes

First thing you need to do is add the .js files into your theme. This is nice and easy with Moodle 2. Open your theme’s root folder, you should see folders such as pix, style, lang etc. If it doesn’t already exist create a folder called javascript and place jquery.js and easySlider1.7.js in there.

I renamed easySlider1.7.js to easyslider.js as I don’t trust mixed case or punctuation in file names as a general rule… keep it all lowercase and make life easy for yourself 🙂

Create an additional .js file in the javascript folder called enableslider.js and paste the following into it…

$(document).ready(function(){ 
 $("#slider").easySlider({
 auto: true, 
 continuous: true
 });
 });

(you’ll notice this is the code from the Easyslider example files)

Next, rename and copy my updated CSS file (grab it from the SkyDrive link on the right) into the style folder in your theme (I called the renamed file easyslider.css) There’s some extra code (mainly for the demo pages) that isn’t required so I’ve removed it and also renamed the first 3 div IDs to be on the safe side so they won’t conflict with anything in Moodle.

Finally, create a folder called slider within the pix folder in the root of your Moodle installation (not theme folder). At the moment I’ve hard-coded the links to the slider images, not ideal and something I’ll look at changing when I have time. Copy in the sample files 01.jpg, 02.jpg, 03.jpg, 04.jpg, 05.jpg.

Optional: create a subfolder within pix/slider called controls and copy in btn_prev.gif and btn_next.gif if you want to try arrow instead of numeric navigation (let me know your results as they might not be pretty!)

Step 2… tweak the config.php for your theme

Updated to clarify which config.php to edit (see Emma’s comment on this post)

Now you’ve got the files there let’s enable them. Open up the config.php file within your theme folder in your text editor of choice (I’d recommend Notepad2 )

Enable the CSS file by adding it to the sheets array… note you don’t have to put the file extension at the end

$THEME->sheets = array('core', 'autohide','easyslider');
////////////////////////////////////////////////////
// Name of the stylesheet(s) you've including in
// this theme's /styles/ directory.
////////////////////////////////////////////////////

Enable the Javascript functions by adding this to the bottom of the file…

////////////////////////////////////////////////////
// An array of additional Javascript files
// for image slider
////////////////////////////////////////////////////
$THEME->javascripts_footer = array(
 'jquery','easyslider','enableslider'
);

Step 3… change the settings to suit your needs

Open up the javascript/easyslider.js file with your text editor and change the settings for continuous, auto, speed etc to suit your needs. The author’s website has full documentation on what each setting does. At the moment I’m using the numeric mode so set that to true (you can try the arrow navigation buttons but not sure how they’ll look!)

Open up the style/easyslider.css file with your text editor and change colours and the overall width of the rotator as required. By default the width is set to 674px so just find \ replace all instances of that to make the change. Obviously you’ll need to make sure your images match the width set for the rotator or it’ll look a bit odd!

Step 4… paste in the code

Choose where you want your rotator to go (usually front page), open up the Moodle HTML editor and switch to code mode. Position the cursor where you want the slider to be and paste this in…

Note the hard-coded paths to images in the site’s pix folder… if \ when I sort this I’ll update the post accordingly

<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/01.png" alt="Image 01" /></a></li>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/02.jpg" alt="Image 02" /></a></li>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/03.jpg" alt="Image 03" /></a></li>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/04.jpg" alt="Image 04" /></a></li>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/05.jpg" alt="Image 05" /></a></li>
</ul>
</div>

Hit refresh and you should see your rotator appear!

Advertisements

27 Responses to How to: add an image rotator in Moodle 2.2

  1. Emma Richardson says:

    This in an awesome article. Questions, however…I am presuming that we are tweaking the theme config.php file? Surely not the site one…If I am right with theme config file, I am all there except for actually getting it to work! I tried inserting the html code through the Moodle additional html and added it to the header just to see if it would work. I got the pictures to show but no slider..oh, and how are you using the Moodle HTML editor to edit the frontage?

  2. gshaw0 says:

    Hi Emma,

    On the first point… yup it’s the theme’s config.php… will add a note on the article as I completely forgot the site config.php even existed while writing it!

    A few things to check…

    – have you cleared your Theme Cache after making the changes to the theme?
    – which slider are you using? The newer one (with the named tabs) uses different code to the numbered one in the guide
    – if you have the Firefox plugin Firebug installed look for this section in the code and expand it…

    You should see the text of the JavaScript files you added in (proves they’ve activated correctly)

    – as for the HTML editor on the front page it’s the Topic Section, think that’s turned on by default in 2.x but if not search for the option “Include a Topic Section”

    ref: http://docs.moodle.org/22/en/Front_page_settings

    Let me know how you get on 🙂

  3. Emma Richardson says:

    Got it! A few typos, a final refresh and I have it working – thanks! FYI, in your html file, the first image is referenced as png. instead of .jpg. Now just have to figure out how to embed it in the Rocket theme in the banner area – if you have any tips, would love some help with that!

  4. gshaw0 says:

    Great stuff, yup I think I used png as I didn’t want any compression affecting the banner text 🙂

    If you set the rotator to be the right width / height you might get away with dropping the code into the appropriate layout file for the theme, again Firebug will be your friend here!

  5. Saad Faruque says:

    this is useful
    cheers

  6. Hi I am trying this imageslider out in my moodle site. What exactly should we be putting up here when u say http://templatica.com/preview/30 in the html tags .

    • gshaw0 says:

      Hi Kanthi,

      The templatica.com code is there if you want the tab to act as a hyperlink. Either change “http://templatica.com/preview/30” to a web link of your choice or remove and entirely to have a non-linked tab.

      Hope this helps!

  7. Ezra says:

    Hey, I think your website might be having browser compatibility issues.
    When I look at your blog site in Chrome, it looks fine but when opening
    in Internet Explorer, it has some overlapping. I just wanted to give you a
    quick heads up! Other then that, excellent blog!

    • gshaw0 says:

      Hi thanks for the feedback, the template is one of the WordPress default ones so I’ll blame them for any issues (!) What version of IE are you running and has compatibility mode turned itself on by any chance?

  8. Mahek says:

    Hi gshaw0 ,

    When i add this code in my theme config.php here is some kind of error. Please check it

    $THEME->sheets = array(‘core’, ‘autohide’,’easyslider’);
    ////////////////////////////////////////////////////
    // Name of the stylesheet(s) you’ve including in
    // this theme’s /styles/ directory.
    ////////////////////////////////////////////////////

    ////////////////////////////////////////////////////
    // An array of additional Javascript files
    // for image slider
    ////////////////////////////////////////////////////
    $THEME->javascripts_footer = array(
    ‘jquery’,’easyslider’,’enableslider’
    );

    and slider not working.

    • gshaw0 says:

      Hi Mahek,

      One quick thing to check in your text file is that if you’ve copied \ pasted any code make sure you’ve got the right ‘ character; I’ve been caught a couple of times where I get a different version of the apostrophe that doesn’t get processed correctly. Can you upload your full theme config.php with the bits above to somewhere like http://pastebin.com/ to get a better look at it?

      Also which theme \ Moodle version are you running it with?

  9. hjtejuco says:

    hi there i would like to ask how did you created the banner http://moodle2.redbridge-iae.ac.uk/
    its very intesting

  10. awais says:

    great post…
    i have a problem, i just want to include image rotator on every page of moodle. where should i post these lines in moodle file so images can appear on every page…





    • gshaw0 says:

      Depends where you want the rotator to appear, best bet if you want it on every page is to edit the layout file(s) of your theme. You’ll find them in the layout folder. If you want it on every page edit general.php . Depending on your theme you may also have frontpage.php, footer.php etc… edit these if \ as required.

      You’ll need all the code pasted in inluding the div tags…

      • Image 01
      • Image 02
      • Image 03
      • Image 04
      • Image 05

      As for where to paste into the layout files you’ll need to experiment with this for your particular theme. Take a look at the sample files of how to add an image banner via layout files and see if you can apply the concepts to your theme…

      https://moodle.org/mod/forum/discuss.php?d=170386

      Use the rotator code above instead of that used to add an image and it should do the trick. Just tried it with the tabbed rotator on a standard theme and it worked OK in the header.

  11. Alex says:

    Congratz from Brazil! Great Post! Great work… It’s because of people like you, that disseminates free good informations like this that the world is a little better haha
    Keep doing that Job ;D

  12. Scott says:

    Great post

    I am trying to get this working on the latest version of Aardvark, unfortunately my company’s firewall is preventing me from getting your CSS file in step 1. Is there another place I can get this file?

    Scott

    • gshaw0 says:

      Hi Scott, I’ll email you the file as a .txt attachment so it should make it through the filters 😉

      • Scott says:

        Thanks for the file. Everything is working, but is it possible to change from a hardcoded image path to a dynamic one? Thanks again for your instructions, they were great.

        Scott

  13. cherry says:

    Hi,

    how can I add image in slider of moodle in frontent

  14. Hi, first thanks for this script, it works great! But I’m having a problem displying the slider in tablets and cell phones… is there any trick to make the slider word on mobile devices?

    • gshaw0 says:

      Hi Ana,

      What version of Moodle are you using and also which theme? I think the newer mobile friendly themes might be part of the problem – does the slider appear at all on the mobile devices?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: