Adaptable News Slider

Blocks ::: block_news_slider
Maintained by Manoj Solanki, Jez H, Kevin Moore
Part of set Adaptable UI.
Part of the Adaptable UI set, this block allows you to add a news slider that displays: 1: Unread course announcements (from all enrolled courses) 2: Site announcements (front page news announcements) 3: Both of the above (combined course and site announcements) The slider uses the jQuery slick slider and whilst designed to work with the Adaptable Theme, it *may* work with other themes.
Latest release:
374 sites
62 downloads
32 fans
Current versions available: 3

Moodle News Slider is a jquery news slider that integrates the slick carousel jquery slider with some customisation.  It has been designed to work well on large and small screen devices.  It displays site announcements, course announcements for the current user, or both of these.   These are ordered by date.

Currently this plugin works only with the Adaptable theme, version 1.4 onwards.

The video below shows the News Slider plugin in use alongside two other plugins (Course Discuss and Discussion Feed):


Configuration

Each slider instance can be configured to display only site announcements, course announcements or both. There are also options for max length of subject and excerpt strings.  Full configuration options available are shown below.  When used on a course page, only that specific course's unread announcements will display.


General configuration

  • Configurable max length of excerpt
  • Configurable max length of subject
  • Use caching plus cache expiry time


Per instance configuration

  • Option to display site news or course news or both
  • Maximum number of site announcements to display
  • Maximum period (in days) to show site announcements for
  • Link to older news items
  • Show bullet (dots) navigation on bottom of slider
  • Adjust the height of the slider (in px)
  • Support for RTL languages, such as Hebrew & Arabic

Compatibility

  • Moodle 3.7, 3.8 (Older version that supports from 3.2 to 3.6 also available, but it won't have latest updates)
  • Adaptable version 1.4 onwards

Guidelines for use

You may want to experiment with the general configuration settings. E.g. for wider displays, you could increase max lengths of excerpts and vice-versa. 

Please note that caching is switched on by default and set to expire every 5 minutes (300) for a user session by default.

Using the slider on course pages


There is custom block region on course pages in the Adaptable theme called "course page slider region", designed for use with the news slider.  

See basic instructions below:

1. Add the news slider to the "Course slider" block region that can be seen by admins on the frontpage.  Configure it to appear on all pages.
2. Go to any course page. You should the news slider appear just above course content. Now configure this block to appear only on course pages.

Customising colour and styling using CSS


You can customise various parts of the slider using CSS, such as the banner colour, font size, type etc.  You can use the developer tools of Chrome and Firefox for example, to find out the name of the css selectors that need to be modified.  Below are some examples to get you started.

Slider left banner colour


A common requirement is to change the default colour of the left banner from orange, to one that matches the colours of the site.  This can be done using css, as per the below example.  In this case it changes it to a blue.

.slider-banner-col {
background-color: #0066CC;
}

Example CSS to change various styling elements of the slider


    .slider-banner-col {
        background-color: #FF0000; /* Change banner background colour */
    }
    /* This is the text displayed inside the left banner */
    .slider-banner-col span {
        color: #ffe968;   /* Change text colour */
        font-size: 26px;  /* Change font size */
    }
    /* !important is required in this case to override it correctly */
    .news-slider .slick-dots li button:before {
        font-size: 18px !important;
        color: red !important;
        opacity: 1;  /* To make it a solid colour */
    }

Known issues


When the slider is used with Adaptable tabs, or anything similar, it is possible that when changing tabs and going back and forth, the slider will render slides all the way down the page momentarily in a messy fashion. This appears to be due to how the slick js works internally. A way around it is to inser  code like the following within the custom JS section of Adaptable settings (sample shown for Adaptable tabs):

    <script type="text/javascript"> 
    if (typeof $('.responsive').slick === "function") {
        $("#coursetabcontainer :radio").on("change", function() {
            $('.responsive').slick('setPosition');
        });
    $("#dashboardtabcontainer :radio").on("change", function() {
            $('.responsive').slick('setPosition');
        });
    }
    </script>


Screenshots

Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3

Contributors

Please login to view contributors details and/or to contact them

Comments RSS

Mostrar comentários
  • Fernando Acedo
    qua., 28 fev. 2018, 02:17 AM
    As you stated, this block is part of Adaptable UI and only works with Adaptable. Anyway, this block never could work with Boost because are based in a different Bootstrap version.

    You are free to modify the code to adapt the block for Boost.
  • Manoj Solanki
    sex., 2 mar. 2018, 00:13 AM
    Whilst the block has been designed to work with Adaptable UI, it could work with Boost. I suggest you check if anything else on the page, such as other custom block plugins, are conflicting with this plugin.
  • Cathy Hunt
    sex., 2 mar. 2018, 00:15 AM
    Love this slider but just checking if I can change the colour.. as orange isn't in our branding
  • Jamie Kramer
    qui., 8 mar. 2018, 22:56 PM
    I've reported an issue with installing this plugin at https://bitbucket.org/covuni/moodle-block_news_slider/issues/31/dependencies-check-failed
    There is a dependencies check error when installing, even with theme_adaptable already installed.
  • Manoj Solanki
    qua., 18 jul. 2018, 22:08 PM
    @Cathy, it is possible to change the banner colour in custom css for the theme. You can modify the background colour for this css class: ".slider-banner-col" in your custom css settings.
  • Rheman Pessek
    ter., 28 ago. 2018, 13:53 PM
    Hello. Great plugin. I am using the lastest release under moodle 3.3 with adaptable plugin. But I have created course announcement but nothing is displayed on Adaptable News Slider. Moreover how to create site announcement under moodle 3.3.

    regards
  • Manoj Solanki
    seg., 3 set. 2018, 15:50 PM
    Hi Rheman,

    Course announcements display for users enrolled on that particular course only. Maybe that's the issue. Other than that, check the other settings for news slider (maximum period) and cache settings. If cache enabled, it may not show straight away.

    M
  • Kathryn Woodhead
    sáb., 12 jan. 2019, 00:18 AM
    Hi, I have just installed this and its on my front page, but its not picking up any of the announcements.

    I would also like it on each course page, how do I do this?

    Thanks,
    Kathryn
  • Manoj Solanki
    ter., 15 jan. 2019, 18:00 PM
    Hi Kathryn,

    For the front page, have you checked the settings for the news slider instance? In particular, the one called "Maximum period to show site announcements for (in days)", and if there are some valid site announcements within that period?

    To have it on a course page will require you to add a news slider block to a region that will appear on the course page. I don't know which theme you are using, but this is available in the Adaptable theme, as there is a specific block region that has been created in there for that purpose. I don't know if there are any other themes that have a block region you can add it to in this way.

    Hope that helps,

    M
  • Samuel Sánchez sanz
    qui., 5 dez. 2019, 03:43 AM
    Hola.

    tengo el siguiente problema no consigo que el bloque de News Slider quede en la parte de arriba como en las capturas, solo me deja agregarlo en el lado derecho como un bloque normal.

    también quería preguntar si habría alguna forma de limitar los mensajes que salgan, me refiero que solo salgan los mensajes de un foro determinado (avisos), ya que lo quiero usar como un anuncio para mis alumnos de las novedades que hay.

    muchas gracias .
  • Karel Janssen
    ter., 15 set. 2020, 15:33 PM
    Hi and thanks for this plugin. Is it possible to change the interval between different headlines? By that I mean the time it takes before it slides to the next item? Thanks!
  • Brigitte Denton
    ter., 15 dez. 2020, 11:49 AM
    How do you change the date display format from DMY to MDY? I could not find that option in the settings. Everything else on my site is in MDY format.

    I am running Moodle 3.9.1+
  • Al
    dom., 24 jan. 2021, 05:58 AM
    Is there any chance you make the plugin so that when you update moodle it automatically downloads the plugin as part of the upgrade? This would save so much time as currently when you upgrade it just says, "Additional Missing from disk!". Thank you so much.
  • Al
    sáb., 18 set. 2021, 21:57 PM
    Please can you update the version this plugin supports to 3.11, this will mean that moodle will automatically install it during an update?
  • Al
    dom., 24 out. 2021, 00:08 AM
    Hi, sorry to bother you again. Is there any chance you can change the version number that is supported to include 3.11 I have just updated moodle again and it has not installed your plugin during the upgrade as moodle thinks it will only work on versions up to 3.8. If you can change the version it supports to 3.11, the next time we update it, which we do most weeks, it will install automatically. Thank you.
1 2
Please login to post comments