diff --git a/CHANGES.md b/CHANGES.md index c4180886d9fff397876b32c1be2f6c3d23a0a423..e59b0683b966719103d8074237a384a2d3307438 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,7 @@ Changes ### Unreleased +* 2020-03-24 - Changed setting imageareaitemslink to imageareaitemsattributes to be able to add alt text to the images. * 2020-03-10 - Fixed accessibility issues with in-course settings. * 2020-03-09 - Fixed accessibility issues with back-to-top button. * 2020-03-05 - Adjusted function full_header() in core_renderer.php due to upstream changes in theme Boost. diff --git a/db/upgrade.php b/db/upgrade.php index 39e26b5a11a584831ecb33ec710e88bd4b3a65ab..2c37566735e52f625d3d015f4de01badde26cf68 100644 --- a/db/upgrade.php +++ b/db/upgrade.php @@ -59,5 +59,19 @@ function xmldb_theme_boost_campus_upgrade($oldversion) { upgrade_plugin_savepoint(true, 2018121700, 'theme', 'boost_campus'); } + if ($oldversion < 2020030800) { + + // The setting "theme_boost_campus|imageareaitemslinks" has been renamed to imageareaitemsattributes. + // If the setting is configured. + if ($oldimageareaitemslinks = get_config('theme_boost_campus', 'imageareaitemslink')) { + // Set the value of the setting to the new setting. + set_config('imageareaitemsattributes', $oldimageareaitemslinks, 'theme_boost_campus'); + // Drop the old setting. + set_config('imageareaitemslink', null, 'theme_boost_campus'); + } + + upgrade_plugin_savepoint(true, 2020030800, 'theme', 'boost_campus'); + } + return true; } diff --git a/lang/en/theme_boost_campus.php b/lang/en/theme_boost_campus.php index a6f3d1ed1aa8dd4155baa7a4f167e12cd1c77077..c02e8f40e9ce62ede32450072807f84ea4c588e1 100644 --- a/lang/en/theme_boost_campus.php +++ b/lang/en/theme_boost_campus.php @@ -138,12 +138,18 @@ $string['imageareaheadingsetting'] = 'Image area'; $string['imageareaheadingsetting_desc'] = 'The following settings allow adding an additional region for displaying images like logos. This region will be added beneath the standard footer and above the optional footnote region. If images are uploaded this area will be displayed on all sites that use the columns2 layout.'; $string['imageareaitemssetting'] = 'Image area items'; $string['imageareaitemssetting_desc'] = 'With this widget you can upload your images that will be displayed in the additional image area region. The images will be sorted and displayed alphabetically by the filename. To remove this region, simply delete all uploaded images.'; -$string['imageareaitemslinksetting'] = 'Image area item links'; -$string['imageareaitemslinksetting_desc'] = 'With this optional setting you can add links to your uplaoded images.<br/> -Each line consists of the file identifier (the file name) the a link URL, separated by pipe characters. Each link declaration needs to be written in a new line. <br/> +$string['imageareaitemsattributessetting'] = 'Image area item additional attributes'; +$string['imageareaitemsattributessetting_desc'] = 'With this optional setting you can add additional attributes to your uplaoded images: +<ul> +<li>a link</li> +<li>an alt attribute which describes the image</li> +</ul> +Each line consists of the file identifier (the file name) the link URL and the alt-text, separated by pipe characters. Each link declaration needs to be written in a new line. <br/> For example:<br/> -moodle.jpg|http://moodle.org<br/> -You can declare links for a abitrary amount of your uplaoded images. The links will be added only to those images that match their filename with the identifier declared in this setting.'; +``` +moodle.jpg|https://moodle.org|Moodle logo +```<br/><br/> +You can declare the additional attributes for an arbitrary amount of your uplaoded images. The attributes will be added only to those images that match their filename with the identifier declared in this setting.'; $string['imageareaitemsmaxheightsetting'] = 'Image area items maximal height'; $string['imageareaitemsmaxheightsetting_desc'] = 'With this setting you can change the height in pixels for your uploaded images. All images will have the same maximum height and their width will be resized proportionally. The default value is set to 100 pixels.'; // ...Footnote. diff --git a/locallib.php b/locallib.php index ffa2b32aaa849e8ea764de8c1e43a8204e37403b..1cde398ffd278ef20f111dfdfb8042940b15cc86 100644 --- a/locallib.php +++ b/locallib.php @@ -183,9 +183,9 @@ function theme_boost_campus_get_imageareacontent() { // Only continue processing if there are files in the filearea. if (!empty($files)) { - // Get the content from the setting imageareaitemslink and explode it to an array by the delimiter "new line". + // Get the content from the setting imageareaitemsattributes and explode it to an array by the delimiter "new line". // The string contains: the image identifier (uploaded file name) and the corresponding link URL. - $lines = explode("\n", get_config('theme_boost_campus', 'imageareaitemslink')); + $lines = explode("\n", get_config('theme_boost_campus', 'imageareaitemsattributes')); // Parse item settings. foreach ($lines as $line) { $line = trim($line); @@ -194,41 +194,64 @@ function theme_boost_campus_get_imageareacontent() { // Create an array with a dummy entry because the function array_key_exists need a // not empty array for parameter 2. $links = array('foo'); + $alttexts = array('bar'); continue; } else { $settings = explode("|", $line); - // Check if both parameters are set. - if (!empty($settings[1])) { - // The name of the image is the key for the URL that will be set. - $links[$settings[0]] = $settings[1]; + // Check if parameter 2 or 3 is set. + if (!empty($settings[1] || !empty($settings[2]))) { + foreach ($settings as $i => $setting) { + $setting = trim($setting); + if (!empty($setting)) { + switch ($i) { + // Check for the first param: link. + case 1: + // The name of the image is the key for the URL that will be set. + $links[$settings[0]] = $settings[1]; + break; + // Check for the second param: alt text. + case 2: + // The name of the image is the key for the alt text that will be set. + $alttexts[$settings[0]] = $settings[2]; + break; + } + } + } } } } + // Initialize the array which holds the data which is later stored in the cache. + $imageareacache = []; // Traverse the files. foreach ($files as $file) { // Get the Moodle url for each file. $url = moodle_url::make_pluginfile_url($file->get_contextid(), $file->get_component(), $file->get_filearea(), - $file->get_itemid(), $file->get_filepath(), $file->get_filename()); + $file->get_itemid(), $file->get_filepath(), $file->get_filename()); // Get the path to the file. $filepath = $url->get_path(); // Get the filename. $filename = $file->get_filename(); - // If filename and key value from the imageareaitemslink setting entry match. + // If filename and link value from the imageareaitemsattributes setting entry match. if (array_key_exists($filename, $links)) { - // Set the file and the corresponding link. - $imageareacache[] = array('filepath' => $filepath, 'linkpath' => $links[$filename]); - // Fill the cache. - $themeboostcampuscache->set('imageareadata', $imageareacache); - } else { // Just add the file without a link. - $imageareacache[] = array('filepath' => $filepath); - // Fill the cache. - $themeboostcampuscache->set('imageareadata', $imageareacache); + $linkpath = $links[$filename]; + } else { + $linkpath = ""; + } + // If filename and alt text value from the imageareaitemsattributes setting entry match. + if (array_key_exists($filename, $alttexts)) { + $alttext = $alttexts[$filename]; + } else { + $alttext = ""; } + // Add the file + $imageareacache[] = array('filepath' => $filepath, 'linkpath' => $linkpath, 'alttext' => $alttext); } // Sort array alphabetically ascending to the key "filepath". usort($imageareacache, function($a, $b) { return strcmp($a["filepath"], $b["filepath"]); }); + // Fill the cache. + $themeboostcampuscache->set('imageareadata', $imageareacache); return $imageareacache; } else { // If no images are uploaded, then cache an empty array. return $themeboostcampuscache->set('imageareadata', array()); diff --git a/settings.php b/settings.php index e17aab86ee849c7ed665b90e0a4041bea83ab74b..bd8acb002b967f2d14a440095ea39a132cefdf29 100644 --- a/settings.php +++ b/settings.php @@ -447,9 +447,9 @@ if ($ADMIN->fulltree) { $setting->set_updatedcallback('theme_boost_campus_reset_app_cache'); $page->add($setting); - $name = 'theme_boost_campus/imageareaitemslink'; - $title = get_string('imageareaitemslinksetting', 'theme_boost_campus', null, true); - $description = get_string('imageareaitemslinksetting_desc', 'theme_boost_campus', null, true); + $name = 'theme_boost_campus/imageareaitemsattributes'; + $title = get_string('imageareaitemsattributessetting', 'theme_boost_campus', null, true); + $description = get_string('imageareaitemsattributessetting_desc', 'theme_boost_campus', null, true); $setting = new admin_setting_configtextarea($name, $title, $description, null, PARAM_TEXT); $setting->set_updatedcallback('theme_boost_campus_reset_app_cache'); $page->add($setting); diff --git a/templates/imagearea.mustache b/templates/imagearea.mustache index 68cf6498fecb35a31a2c5b21782cfbc3bbc7f84a..e02ad2d8480ec5e245c8d7d27079ebc6df01d2a9 100644 --- a/templates/imagearea.mustache +++ b/templates/imagearea.mustache @@ -23,12 +23,14 @@ * imageareafiles - array of uploaded images. * linkpath - true if image has a link defined in setting imageareaitemslink. * filepath - the path where the uploaded image is stored. + * alttext - the text that will be set for the alt attribute of an image, if set Example context (json): { "imageareafiles": { "filepath": "/pix/moodlelogo.png", "linkpath": "http://moodle.org" + "alttext": "Moodle logo" } } @@ -36,7 +38,7 @@ <div class="imagearea d-flex justify-content-center flex-wrap pb-3 bg-dark"> {{#imageareafiles}} - {{#linkpath}}<a href="{{linkpath}}">{{/linkpath}}<img src="{{filepath}}" class="mt-3">{{#linkpath}}</a>{{/linkpath}} + {{#linkpath}}<a href="{{linkpath}}">{{/linkpath}}<img src="{{filepath}}" class="mt-3" {{#alttext}} alt="{{alttext}}"{{/alttext}}>{{#linkpath}}</a>{{/linkpath}} {{/imageareafiles}} </div> diff --git a/tests/behat/theme_boost_campus_additional_layout_settings.feature b/tests/behat/theme_boost_campus_additional_layout_settings.feature index e4e75fc6033827a097366dd5d8985f4713031675..3361201453c4f9125822d3b568bddab1421715e9 100644 --- a/tests/behat/theme_boost_campus_additional_layout_settings.feature +++ b/tests/behat/theme_boost_campus_additional_layout_settings.feature @@ -36,15 +36,16 @@ Feature: Configuring the theme_boost_campus plugin for the "Additional Layout Se # Dependent on setting "Image area items" @javascript @_file_upload - Scenario: Add "Image area item links" + Scenario: Add "Image area item attributes" When I log in as "admin" And I navigate to "Appearance > Boost Campus" in site administration And I click on "Additional Layout Settings" "link" And I upload "theme/boost_campus/tests/fixtures/moodle_logo.jpg" file to "Image area items" filemanager - And I set the field "id_s_theme_boost_campus_imageareaitemslink" to "moodle_logo.jpg|http://moodle.org" + And I set the field "id_s_theme_boost_campus_imageareaitemsattributes" to "moodle_logo.jpg|http://moodle.org|Moodle Logo" And I press "Save changes" Then ".imagearea img" "css_element" should exist And "//div[contains(concat(' ',normalize-space(@class),' '),' imagearea ')]//a[contains(@href, 'http://moodle.org')]" "xpath_element" should exist + And "//div[contains(concat(' ',normalize-space(@class),' '),' imagearea ')]//img[contains(@alt, 'Moodle Logo')]" "xpath_element" should exist # Dependent on setting "Image area items" # This is not testable with behat. diff --git a/version.php b/version.php index 2137cfd808f106242fa66a7c68035ecef929b859..2224d010a3a3756b8fe0d1f41a59e2ae29a48f3c 100644 --- a/version.php +++ b/version.php @@ -25,7 +25,7 @@ defined('MOODLE_INTERNAL') || die(); $plugin->component = 'theme_boost_campus'; -$plugin->version = 2020021200; +$plugin->version = 2020030800; $plugin->release = 'v3.7-r4'; $plugin->requires = 2019111800; $plugin->maturity = MATURITY_STABLE;