Merge pull request #523 from moodle-an-hochschulen/feature-162-final

Feature: Add frontpage slider functionality, solves #162

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2023-12-28 - Feature: Add slider which can be displayed on site home, solves #162.
 * 2023-12-27 - Improvement: Add content style setting to the advertisement tiles, solves #519.
 * 2023-12-27 - Test: Always reactivate debugging during Behat tests, solves #521.
 * 2023-12-26 - Improvement: Do not add the advertisement tiles div to the frontpage if no tile is activated, solves #516.

README.md

@@ -467,6 +467,10 @@ In this tab, you can enable and configure multiple information banners to be sho
 
 In this tab, you can enable and configure multiple advertisement tiles to be shown on site home.
 
+#### Tab "Slider"
+
+In this tab, you can enable and configure multiple slides to be shown on site home.
+
 ### Settings page "Functionality"
 
 #### Tab "Courses"
@@ -666,8 +670,9 @@ Moodle an Hochschulen e.V. would like to thank these main contributors (in alpha
 * Käferfreie Software, Nina Herrmann: Code
 * lern.link GmbH, Alexander Bias: Code, Peer Review, Ideating, Funding
 * lern.link GmbH, Beata Waloszczyk: Code
-* Moodle.NRW / Ruhr University Bochum, Tim Trappen: Code, Ideating
+* Moodle.NRW / Ruhr University Bochum, Annika Lambert: Code
 * Moodle.NRW / Ruhr University Bochum, Matthias Buttgereit: Code, Ideating
+* Moodle.NRW / Ruhr University Bochum, Tim Trappen: Code, Ideating
 * moodleSCHULE e.V., Ralf Krause: German translation and curation, Ideating
 * Ruhr University Bochum, Melanie Treitinger: Code, Ideating
 * RWTH Aachen, Amrita Deb Dutta: Code

lang/en/theme_boost_union.php

@@ -746,6 +746,71 @@
 $string['tileordersetting_desc'] = 'With this setting, you define the order position of the advertisement tile {$a->no}. By default, the advertisement tiles are ordered from top to bottom and left to right like you see them on this settings page here. However, you can decide to assign another order position with this setting. If you assign the same order position to two or more advertisement tiles, they will be ordered again according to the order on this settings page.';
 $string['tiletitlesetting'] = 'Advertisement tile {$a->no} title';
 $string['tiletitlesetting_desc'] = 'Here, you enter the title which should be displayed in the advertisement tile {$a->no}. This is an optional setting, the advertisement tile will be shown even if you do not set a title.';
+// Settings: Slider tab.
+$string['slidertab'] = 'Slider';
+// ... Section: Slider general.
+$string['slidergeneralheading'] = 'Slider general';
+$string['slideranimationsetting'] = 'Slider animation type';
+$string['slideranimationsetting_desc'] = 'With this setting, you control the slider animation. \'Slide\' applies a sliding animation, \'Fade\' applies a fading animation and \'None\' removes all animations.';
+$string['slideranimationsetting_fade'] = 'Fade';
+$string['slideranimationsetting_none'] = 'None';
+$string['slideranimationsetting_slide'] = 'Slide';
+$string['sliderarrownavsetting'] = 'Enable arrow navigation';
+$string['sliderarrownavsetting_desc'] = 'With this setting, you can add navigation arrows on both sides of the slider.';
+$string['sliderfrontpagepositionsetting'] = 'Position of the slider on site home';
+$string['sliderfrontpagepositionsetting_desc'] = 'The slider is shown on site home only. With this setting, you control if the slider is displayed before the site home content or after the site home content. If you want to show only the slider on site home and nothing else, all other site home content can be removed by changing the <a href="{$a->url}">site home settings</a>.';
+$string['sliderfrontpagepositionsetting_afterafter'] = 'After the site home content (and after the advertisement tiles)';
+$string['sliderfrontpagepositionsetting_afterbefore'] = 'After the site home content (but before the advertisement tiles)';
+$string['sliderfrontpagepositionsetting_beforeafter'] = 'Before the site home content (and after the advertisement tiles)';
+$string['sliderfrontpagepositionsetting_beforebefore'] = 'Before the site home content (but before the advertisement tiles)';
+$string['sliderindicatornavsetting'] = 'Enable slider indicator navigation';
+$string['sliderindicatornavsetting_desc'] = 'With this setting, you can add navigation indicators on the bottom of the slider.';
+$string['sliderintervalsetting'] = 'Slider interval speed';
+$string['sliderintervalsetting_desc'] = 'With this setting, you control how long a slide is displayed in milliseconds. The minimum value is 1000 (one second) and the maximum value is 10000 (10 seconds).';
+$string['sliderkeyboardsetting'] = 'Allow slider keyboard interaction';
+$string['sliderkeyboardsetting_desc'] = 'With this setting, you enable keyboard inputs (arrow keys) to control the slider. Please note that disabling this lowers accessibility.';
+$string['sliderpausesetting'] = 'Pause slider on mouseover';
+$string['sliderpausesetting_desc'] = 'With this setting, you prevent the slider from cycling through the slides when a user hovers over a slide. Please note that disabling this lowers accessibility.';
+$string['sliderridesetting'] = 'Cycle through slides';
+$string['sliderridesetting_desc'] = 'With this setting, you control the cycling behaviour of the slider. \'On page load\' begins cycling through slides after the page has finished loading, \'After interaction\' will start cycling after a user has interacted with the slider. \'Never\' disables the automatic cycling of slides altogether, requiring user input to cycle through slides.';
+$string['sliderridesetting_afterinteraction'] = 'After interaction';
+$string['sliderridesetting_never'] = 'Never';
+$string['sliderridesetting_onpageload'] = 'On page load';
+$string['sliderwrapsetting'] = 'Continuously cycle through slides';
+$string['sliderwrapsetting_desc'] = 'With this setting, you make the slider cycling through all slides. If you disable this, the slider will stop cycling at the last slide.';
+// ... Section: Slides.
+$string['slideheading'] = 'Slide {$a->no}';
+$string['slidebackgroundimagealtsetting'] = 'Slide {$a->no} background image alt attribute';
+$string['slidebackgroundimagealtsetting_desc'] = 'Here, you can set an alt attribute for the image of slide {$a->no}. This is an optional setting, the slide will be shown even if you do not set an alt attribute. Please note that not providing an alt attribute lowers accessibility.';
+$string['slidebackgroundimagesetting'] = 'Slide {$a->no} background image';
+$string['slidebackgroundimagesetting_desc'] = 'Here, you can upload an image file which will be shown as background image behind the content of slide {$a->no}. Please make sure or check that the content is still readable on the background image. Please also try to make sure that the aspect ratio of all slides\' background images is equal (as the background image aspect ratio controls the height of the slide and you might want to avoid flickering when the slides are changed). This is a mandatory setting, the slide will not be shown if you do not upload any background image.';
+$string['slidecaptionsetting'] = 'Slide {$a->no} caption';
+$string['slidecaptionsetting_desc'] = 'Here, you enter the caption which should be displayed in slide {$a->no}. The caption is displayed at the bottom center of the slide. This is an optional setting, the slide will be shown even if you do not set a caption.';
+$string['slidecontentsetting'] = 'Slide {$a->no} content';
+$string['slidecontentsetting_desc'] = 'Here, you enter the content which should be displayed in slide {$a->no}. The content is displayed at the bottom center of the slide. If a caption is set, the content is displayed below the caption. Please note that the rich-text editor produces left-aligned text by default, but you might want to change that to centered text for a nicer look. Please also refrain from adding too much content to the slide and please test your content on small devices as content which overflows the slide will simply be hidden. This is an optional setting, the slide will be shown even if you do not set any content.';
+$string['slidecontentstylesetting'] = 'Slide {$a->no} content style';
+$string['slidecontentstylesetting_dark'] = 'Dark (black font color for light background images)';
+$string['slidecontentstylesetting_darkshadow'] = 'Dark & Shadow (black font color with a light shadow for light background images)';
+$string['slidecontentstylesetting_desc'] = 'Here, you can modify the style of the content of slide {$a->no}. By default, the content style is a white font color for dark background images. However, to allow consistent and easy styling on all kinds of background images, you can override the style here. Please note that this setting will overrrule the font color which you set in the rich-text editor above in any case.';
+$string['slidecontentstylesetting_light'] = 'Light (white font color for dark background images)';
+$string['slidecontentstylesetting_lightshadow'] = 'Light & Shadow (white font color with a dark shadow for dark background images)';
+$string['slideenabledsetting'] = 'Enable slide {$a->no}';
+$string['slideenabledsetting_desc'] = 'With this setting, you can enable slide {$a->no}.';
+$string['slidelinksetting'] = 'Slide {$a->no} link URL';
+$string['slidelinksetting_desc'] = 'Here, you can set a (Moodle-internal or external) URL which the slide content of slide {$a->no} will link to. This is an optional setting, the slide will be shown even if you do not set a link URL.';
+$string['slidelinktitlesetting'] = 'Slide {$a->no} link title';
+$string['slidelinktitlesetting_desc'] = 'Here, you can set a link title which is presented as tooltip as soon as the user hovers over slide {$a->no}. This is an optional setting, the slide will be linked even if you do not set a link title. Please note that not providing a link title lowers accessibility.';
+$string['slidelinksourcesetting'] = 'Slide {$a->no} link source';
+$string['slidelinksourcesetting_desc'] = 'Here, you can control which elements of the slider link to the given link URL. You can choose between linking the background image only, linking the slide\'s text elements (caption and content) only or linking both of these.';
+$string['slidelinksourcesetting_both'] = 'Background image and text elements';
+$string['slidelinksourcesetting_image'] = 'Background image only';
+$string['slidelinksourcesetting_text'] = 'Text elements only';
+$string['slidelinktargetsetting'] = 'Slide {$a->no} link target';
+$string['slidelinktargetsetting_desc'] = 'Here, you can set the link target which is set for the slide link as soon as you set a link URL in the slide {$a->no}.';
+$string['slidelinktargetsetting_samewindow'] = 'Same window';
+$string['slidelinktargetsetting_newtab'] = 'New tab';
+$string['slideordersetting'] = 'Slide {$a->no} order position';
+$string['slideordersetting_desc'] = 'With this setting, you define the order position of the slide {$a->no}. By default, the slides are ordered as you see them on this settings page here. However, you can decide to assign another order position with this setting. If you assign the same order position to two or more slides, they will be ordered again according to the order on this settings page.';
 
 // Settings: Functionality page.
 $string['configtitlefunctionality'] = 'Functionality';

layout/drawers.php

@@ -28,6 +28,7 @@
  * * Include static pages
  * * Include Jvascript disabled hint
  * * Include advertisement tiles
+ * * Include slider
  * * Include info banners
  * * Include additional block regions
  * * Handle admin setting for right-hand block drawer of site home
@@ -202,6 +203,11 @@
     require_once(__DIR__ . '/includes/advertisementtiles.php');
 }
 
+// Include the template content for the slider, but only if we are on the frontpage.
+if ($PAGE->pagelayout == 'frontpage') {
+    require_once(__DIR__ . '/includes/slider.php');
+}
+
 // Include the template content for the smart menus.
 require_once(__DIR__ . '/includes/smartmenus.php');