Moodle in English: [LOOK & LEARN] Thumbnails with labels and captions.

[LOOK & LEARN] Thumbnails with labels and captions.

by Mary Evans - Sunday, 6 March 2016, 10:21 PM

Hi Moodlers...

Just testing an idea...but also following on from my previous Look & Learn Tutorial.

Here you can see three little boxes containing an image a 'label' and a 'caption'.

Not very exciting, but used in a theme that allows you to add an HTML Block in a header or footer position on the Frontpage, you can use these simple snipits of HTML to add Marketing Spots, if your theme does not have them.

You can even add these to your Site Topic area or indeed anywhere you want to use them for whatever purpose. You could add them as links to courses. More about how to add them in my next comment.

Thumbnail label

Thumbnail caption...
Read more
Thumbnail label

Thumbnail caption...
Read more
Thumbnail label

Thumbnail caption...
Read more

Average of ratings: Useful (5)

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Sunday, 6 March 2016, 10:36 PM

OK...here is the HTML mark-up to add the basic 'Thumbnails' as seen above...

Basic:

<div class="row-fluid">
<ul class="thumbnails text-center">
      <li class="span4">
        <div class="thumbnail">
          <img src=" image goes here " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
        </div>
      </li>
         <li class="span4">
        <div class="thumbnail">
          <img src=" image goes here " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
        </div>
      </li>
      <li class="span4">
        <div class="thumbnail">
          <img src=" image goes here " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
        </div>
      </li>
    </ul>
</div>

With links:

<div class="row-fluid">
<ul class="thumbnails text-center">
      <li class="span4">
        <div class="thumbnail">
          <img src=" image goes here " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
          <a href="link URL goes here" class="btn btn-mini btn-default">Read more <i class="icon-chevron-right"></i></a>
        </div>
      </li>
         <li class="span4">
        <div class="thumbnail">
          <img src=" image goes here " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
          <a href="link URL goes here" class="btn btn-mini btn-success">Read more <i class="icon-chevron-right icon-white"></i></a>
        </div>
      </li>
      <li class="span4">
        <div class="thumbnail">
          <img src=" " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
        </div>
          <a href="link URL goes here" class="btn btn-mini btn-dinfo">Read more <i class="icon-chevron-right icon-white"></i></a>
      </li>
    </ul>
</div>

With border:

<div class="row-fluid">
<ul class="thumbnails text-center well">
      <li class="span4">
        <div class="thumbnail">
          <img src=" image goes here " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
          <a href="link URL goes here" class="btn btn-mini btn-default">Read more <i class="icon-chevron-right"></i></a>
        </div>
      </li>
         <li class="span4">
        <div class="thumbnail">
          <img src=" image goes here " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
          <a href="link URL goes here" class="btn btn-mini btn-success">Read more <i class="icon-chevron-right icon-white"></i></a>
        </div>
      </li>
      <li class="span4">
        <div class="thumbnail">
          <img src=" " alt="" role="presentation" style="" class="img-responsive" height="130" width="130">
          <h3>Thumbnail label</h3>
          <p>Thumbnail caption...</p>
        </div>
          <a href="link URL goes here" class="btn btn-mini btn-dinfo">Read more <i class="icon-chevron-right icon-white"></i></a>
      </li>
    </ul>
</div>

Average of ratings: Useful (5)

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Gareth J Barnard - Monday, 7 March 2016, 4:42 AM

Bootstrap CC-BY-3.0 links for thumbnails:

BS2.3.2: https://getbootstrap.com/2.3.2/components.html#thumbnails

BS3.3.6: https://getbootstrap.com/docs/3.3/components/#thumbnails

(Edited by Mary Evans - updated original submission Sunday, 6 March 2016, 8:42 PM)

Average of ratings: Useful (1)

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Monday, 7 March 2016, 6:23 AM

Thanks for adding these links Gareth, I was having some problems with WiFi and so gave up.

I have more to add as this is only the start or this tutorial. I was also hoping to link the other Bootstrap components as there are quite a lot of good ideas in the Bootstrap docs.

Cheers

Mary

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Saturday, 9 April 2016, 2:07 AM

Sorry for the noise...I am not bumping this to the top...I have just been using this code in Morecandy theme footnote setting and found it needs...

<div class="row-fluid"></div>

...wrapping round the HTML mark-up I had here originally.

Cheers

Mary

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Justin Hunt - Sunday, 10 April 2016, 11:50 AM

I made a Generico template of this. Just for fun ..

https://moodle.org/mod/forum/discuss.php?d=324771#p1333446

Average of ratings: Useful (2)

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Sunday, 10 April 2016, 4:02 PM

Thanks Justin...just off to the Plugin shop to get that Mod!

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Derek Chirnside - Wednesday, 1 February 2017, 9:52 AM

Mary, does this work with BS4?

-Derek

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Friday, 3 February 2017, 7:56 AM

Hi Derek,

It does if you use the BS4 equivalent HTML.

I need to update this page as it only works with Bootstrap 2+

You can find similar layouts like the one on my website HERE

Cheers

Mary

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Friday, 3 February 2017, 8:10 AM

Further to my last comment, you need to use this HTML markup now for BS4 (4 alpha)

https://v4-alpha.getbootstrap.com/components/card/

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Friday, 3 February 2017, 8:18 AM

For example:

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Average of ratings: Useful (2)

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Daniell Goodin - Sunday, 8 October 2017, 9:31 PM

Mary,

Like to say thanks for the time in starting this thread and bump this to add to it over time.

While there are plenty that has been designing courses for a number of years. There are always going to be the fresh faces appear and its tutorials like this that help a great deal.

It has taken me hours to build a good set of codebooks that actually work. And mostly its trial and error as there is just so many variables that keep popping up. Its a shame these threads cant be stickied to the top so they are used for reference as they are too good to get buried.

Average of ratings: Useful (1)

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Sunday, 8 October 2017, 10:36 PM

Hi Daniell,

Thanks for the reminder that the LOOK & LEARN links need to be pinned to the board.

As you will notice, next time you pass by, I have pinned them to the top of the Forum.

Thanks

Mary

Average of ratings: Useful (1)

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Daniell Goodin - Thursday, 15 February 2018, 8:33 AM

Just a heads up if anyone is using\upgrading Adaptable 1.6.0.2 as a theme.

You will have to move to using the Components :

Unless you use custom CSS to re-insert the <div class="thumbnail"> Component.

I opened a ticket over on their site and we have been discussing it.

So with reference to :

Bootstrap 4 will drop the '.thumbnail' class

To future proof any work it would be better to design with the new classes.

Unfortunate for me in this instance it means going through and change close to 300+ pages of code, as we use a lot of technical diagrams and pictures within our lessons.

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Thursday, 22 February 2018, 10:41 AM

I have just read this and wondered why you felt you needed to make changes? Why not just add the CSS for the thumbnail to your theme using the CUSTOM CSS area?

Or am I missing something?

Mary

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Daniell Goodin - Thursday, 22 February 2018, 12:50 PM

Mary,

After the research, I did and opening a ticket over at the Theme site on it.

I did ask if there could be CSS added (supplied so I could add in what has been taken out) and the reply was that it was "a Paid for service".

Thus, I have decided to future proof the work done already.

As changing out to "cards or "well" does migrate the problem, and should in effect allow for it to be stable for a few more upgrades.

i.e bootstrap 4+

With out taking away the need for them to monetize the work they do. I closed the ticket.

Noting of course that I fully understand where they are coming from on the request.

But, the answer did not fit comfortable with me, thus its better for the community to be aware that there is this change of code.

(It took a few posts of supporting evidence to convince them that there was a problem, and then the answer was a "paid fix".

This is what I have taken cause with, its not the actual problem of paying for a fix, as I pay for other themes. Lambda - from ThemeForest who I might add has been most gracious in all her dealings. )

I haven't had time to research it and couldn't get a quick answer to the problem over a 2-3 day period I was working on it..

and as I had clients that where in the need to view the pictures as there is test questions on them and written materials attached to the box sets, you can feel the pain in was in..

Thus.. a weeks worth of late nights adjusting code to bring it right.

If someone in the community knows a quick set of CSS that help others that find themselves with messed up "thumbs"

Please feel free to share..

I guess this is where H5P becomes a viable alternative, as in, what has been created is "locked in" and is not open to generic code changes that will change the format of the internal materials housed with in the H5P activity.

I have also revisited the thoughts of building materials outside of Moodle and bring them back in using the SCORM package rules.

which will also migrate this problem.

Such a small code change, such a huge headache for some..

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Fernando Acedo - Thursday, 22 February 2018, 2:46 PM

We explained in the ticket that this is not an issue related to Adaptable mainly because we don't include this class in our styles and we don't overwrite in any case. A simple grep in the code will show you.

We offer support for free to all our customers but if you want to customize the code to meet your requirements then we offer paid services. e do not work for free even you could think we do it getting a premium theme for free instead to buy a commercial.

We tried to replicate the issue and we can't, so probably a bit of investigation will take you to the conclusion that you have some incompatibility in the Adaptable, and other themes, code with some of the plugins in your moodle installation.

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Daniell Goodin - Thursday, 22 February 2018, 6:17 PM

Hi Fernando,

Thanks for popping your head in to the thread..

Best to concentrate on my reporting back that changing out to:

"cards or "well"

does migrate the problem I have experienced with this set of code I have heavily used across multiple courses. It may not be a pretty fix from a coders point of view, but it is working thus...

So as it stands on the 3 setups I am Running.

Moodle Version 3.3 Adaptable version 1.6.0.1 - Class "thumbs" not playing nice - since upgrade to Adaptable v1.6.0.1.

(As noted there could be more investigation if there is incompatibly with one of the plugins that is running, thus need more then 1 site to experience this, all I can do is report my experience.)

Moodle Version 3.2.2 (Build: 20170313) Adaptable 1.5.1- Class "thumbs" working (same code and plugins as it is our development site)
Moodle Version 3.1.1 (Build: 20160711) Pioneer v1.4.6 - Class "thumbs" working ("Mostly" same code and plugins as it is first production site)

There is only respect here for all work done with in the community and the "paid" community.

Thus my carefully worded post on the subject and the closed thread in the Adaptable support forum.

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Richard Oelmann - Saturday, 24 February 2018, 12:57 AM

Daniell,

Just to make you aware, you should use 'card' rather than 'well' for future proofing.

As Boost (and Moodle) work to move to Bootstrap4 STABLE, 'well' has actually been deprecated. Although 'well' can still be used right now (and will continue in themes using BS2, those using BS4 will eventually need to switch to 'card' instead.

"If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards." https://v4-alpha.getbootstrap.com/components/card/

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Saturday, 24 February 2018, 4:56 AM

Technically you can use both so that you end up with an either or option:

class="card well"

If your site use Bootstrap 2.3.2+ it will use "well" if using Bootstrap 4.0+ it will use "card"

Simples!

Average of ratings: Useful (2)

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Daniell Goodin - Saturday, 24 February 2018, 9:28 AM

Richard,

Thanks for the post.

Fully agree, that looking forward is the best place to be when creating interactive course materials.

Thus reporting back into a thread like this is where the community is made aware of best practice.

We know Moodle with all its add-ons is a beast of an environment to work on and I laugh when a client\teacher\trainer pops an email when something is not looking right. If only they knew what goes on behind the scenes to make that click of a mouse produce the desired line of text or picture in the right position.

So there we have it.. The preferred method going forward is.

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Daniell Goodin - Sunday, 18 March 2018, 5:47 PM

Hi Team ,

Just want to report back on this bug that has just come to light.

And really wish I had this in my book of tricks to do after theme upgrades..

Once again, big thanks to Mary Evans...

This little duty may save a lot of grief on theme upgrades for others that come across any strange behaviour on an upgrade.

Site taken back to Clean theme, caches cleared.

As referenced in the

Re: Adaptable version 1.6.1\H5P Embed - Course presentation

I just had a look at a few pages of books I keep that are the "best of" code for a bit of work I am doing and noticed that "<div class="thumbnail">" is working again.

This can only have come about via the above trick given by Mary.

Such a simple fix but so lost in all of the information we have at our fingertips..

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails (HTML mark-up)

by Mary Evans - Monday, 19 March 2018, 5:21 AM

Hi Daniell,

Purging all Caches works wonders for most problems, however, testing the default Moodle theme, to see if there is a BUG in the works, is common sense if one wishes to rule out a specific theme.

Glad all is working well for you.

Cheers and thanks!

Mary

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails with labels and captions.

by Mary Evans - Wednesday, 24 August 2016, 5:33 PM

HOME

This icon was added using <I></I> tags so why does this work and yet not for FontAwesome when using TinyMCE?

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails with labels and captions.

by Emma Richardson - Wednesday, 24 August 2016, 6:48 PM

Ok, that is very strange...

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails with labels and captions.

by Mary Evans - Wednesday, 24 August 2016, 8:02 PM

I found this in moodle/lib/editor/tinymce/lib,php...which makes me suspect there is a bug in there somewhere!

        if (!empty($options['legacy']) or !empty($options['noclean']) or !empty($options['trusted'])) {
            // now deal somehow with non-standard tags, people scream when we do not make moodle code xtml strict,
            // but they scream even more when we strip all tags that are not strict :-(
            $params['valid_elements'] = 'script[src|type],*[*]'; // for some reason the *[*] does not inlcude javascript src attribute MDL-25836
            $params['invalid_elements'] = '';
        }
        // Add unique moodle elements - unfortunately we have to decide if these are SPANs or DIVs.
        $params['extended_valid_elements'] = 'nolink,tex,algebra,lang[lang]';
        $params['custom_elements'] = 'nolink,~tex,~algebra,lang';

        //Add onblur event for client side text validation
        if (!empty($options['required'])) {
            $params['init_instance_callback'] = 'M.editor_tinymce.onblur_event';
        }

        // Allow plugins to adjust parameters.
        editor_tinymce_plugin::all_update_init_params($params, $context, $options);

        // Remove temporary parameters.
        unset($params['moodle_config']);

        return $params;
    }

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails with labels and captions.

by marisol castro - Wednesday, 6 December 2017, 1:31 AM

Mary,

Thank you for all your helpful posts on tips and tricks!

I am currently running Moodle 3.3 with the Adaptable theme 1.5.3 and I would love to do something like these thumbnails on the front page for course categories. I am having a heck of a time trying to find info on how to make categories like tiles instead of just text.

Any suggestions you have would be greatly appreciated!

Average of ratings: -

Re: [LOOK & LEARN] Thumbnails with labels and captions.

by Mary Evans - Tuesday, 12 December 2017, 9:09 AM

You would be better off asking for help from the team of people who made Adaptable. They have their own website, but you cab ask for help here in this forum. Just add the theme name in the subject line as a heading along with your question.

Mary

Average of ratings: -