Single page section image.

Author: Gareth Barnard

Changes.md

@@ -3,6 +3,8 @@ History
 Version 3.10.1.1 - TBR
 ============================
  1. Fix 'Site default not applied to setsection0ownpagenogridonesection'.
+ 2. Add new 'single page summary image' functionality (with settings) to show the section image in the section summary on a
+    single section page.
 
 Version 3.10.1.0 - 29/3/2021
 ============================

db/upgrade.php

@@ -143,6 +143,11 @@ function xmldb_format_grid_upgrade($oldversion = 0) {
         $value = get_config('format_grid', 'defaultsection0ownpagenogridonesection');
         set_config('defaultsetsection0ownpagenogridonesection', $value, 'format_grid');
 
+        global $CFG;
+        require_once($CFG->dirroot.'/course/format/grid/lib.php'); // For format_grid.
+
+        format_grid::update_displayed_images_callback();
+
         upgrade_plugin_savepoint(true, 2020111402, 'format', 'grid');
     }
 

lang/en/format_grid.php

@@ -159,6 +159,11 @@
 $string['setnewactivity'] = 'Show new activity notification image';
 $string['setnewactivity_help'] = "Show the new activity notification image when a new activity or resource are added to a section.";
 
+$string['singlepagesummaryimage'] = 'Show the grid image in the section summary on a single page.';
+$string['singlepagesummaryimage_help'] = "When the 'Course layout' is set to 'Show one section per page' then show the grid image for that section in the section summary when there is a summary in the position stated.";
+$string['defaultsinglepagesummaryimage'] = 'Show the grid image in the section summary on a single page.';
+$string['defaultsinglepagesummaryimage_desc'] = "When the 'Course layout' is set to 'Show one section per page' then show the grid image for that section in the section summary when there is a summary in the position stated.";
+
 $string['setfitsectioncontainertowindow'] = 'Fit the section popup to the window';
 $string['setfitsectioncontainertowindow_help'] = 'If enabled, the popup box with the contents of the section will fit to the size of the window and will scroll inside if necessary.  If disabled, the entire page will scroll instead.';
 
@@ -271,6 +276,10 @@
 $string['resetnewactivity_help'] = 'Resets the new activity notification image to follow the site default value.';
 $string['resetallnewactivity'] = 'New activities';
 $string['resetallnewactivity_help'] = 'Resets the new activity notification images to follow the site default value.';
+$string['resetsinglepagesummaryimage'] = 'Single page summary image';
+$string['resetsinglepagesummaryimage_help'] = 'Resets the single page summary image to follow the site default value.';
+$string['resetallsinglepagesummaryimage'] = 'Single page summary images';
+$string['resetallsinglepagesummaryimage_help'] = 'Resets the single page summary images to follow the site default value.';
 $string['resetfitpopup'] = 'Fit section popup to the window';
 $string['resetfitpopup_help'] = 'Resets the \'Fit section popup to the window\' to follow the site default value.';
 $string['resetallfitpopup'] = 'Fit section popups to the window';

lib.php

@@ -207,20 +207,21 @@ protected function section_nav_selection($course, $sections, $displaysection) {
      * @return string HTML to output.
      */
     protected function section_header($section, $course, $onsectionpage, $sectionreturn=null) {
-        if (($section->section == 0) && ($onsectionpage)) {
+        if ($onsectionpage) {
             return $this->section_header_onsectionpage($section, $course, $sectionreturn);
         } else {
             return parent::section_header($section, $course, $onsectionpage, $sectionreturn);
         }
     }
 
     /**
-     * Generate the display of the header part of a section before course modules are included for
-     * when section 0 is used with a single section page.
+     * Generate the display of the header part of a section before course modules are included
+     * with a single section page.
      *
      * @param stdClass $section The course_section entry from DB
      * @param stdClass $course The course entry from DB
-     * @param int $sectionreturn The section to return to after an action
+     * @param int $sectionreturn The section to return to after an action.
+     *
      * @return string HTML to output.
      */
     protected function section_header_onsectionpage($section, $course, $sectionreturn = null) {
@@ -247,7 +248,8 @@ protected function section_header_onsectionpage($section, $course, $sectionretur
         );
 
         // Create a span that contains the section title to be used to create the keyboard section move menu.
-        $o .= html_writer::tag('span', get_section_name($course, $section), array('class' => 'hidden sectionname', 'id' => "sectionid-{$section->id}-title"));
+        $sectionname = get_section_name($course, $section);
+        $o .= html_writer::tag('span', $sectionname, array('class' => 'hidden sectionname', 'id' => "sectionid-{$section->id}-title"));
 
         $leftcontent = $this->section_left_content($section, $course, true);
         $o .= html_writer::tag('div', $leftcontent, array('class' => 'left side'));
@@ -257,14 +259,72 @@ protected function section_header_onsectionpage($section, $course, $sectionretur
         $o .= html_writer::start_tag('div', array('class' => 'content'));
 
         $o .= html_writer::start_tag('div', array('class' => 'summary'));
-        $o .= $this->format_summary_text($section);
+        $o .= $this->single_section_page_summary($section, $sectionname, $course);
         $o .= html_writer::end_tag('div');
 
         $o .= $this->section_availability($section);
 
         return $o;
     }
 
+    /**
+     * Generate the single section page summary.
+     *
+     * @param stdClass $section The course_section entry from DB.
+     * @param string $sectionname The section name.
+     * @param stdClass $course The course entry from DB.
+     *
+     * @return string HTML to output.
+     */
+    protected function single_section_page_summary($section, $sectionname, $course) {
+        $summary = $this->format_summary_text($section);
+        $o = '';
+
+        if ($this->settings['singlepagesummaryimage'] > 1) { // I.e. not 'off'.
+            if (!empty($summary)) {
+                $data = new stdClass;
+                switch($this->settings['singlepagesummaryimage']) {
+                    case 2:
+                        $data->left = true;
+                        break;
+                    case 3:
+                        $data->centre = true;
+                        break;
+                    case 4:
+                        $data->right = true;
+                        break;
+                    default:
+                        $data->left = true;
+                }
+
+                $sectionimage = $this->courseformat->get_image($course->id, $section->id);
+                $coursecontext = context_course::instance($course->id);
+                /* If the image is set then check that displayedimageindex is greater than 0 otherwise create the displayed image.
+                   This is a catch-all for existing courses. */
+                if (isset($sectionimage->image) && ($sectionimage->displayedimageindex < 1)) {
+                    // Set up the displayed image:...
+                    $sectionimage->newimage = $sectionimage->image;
+                    $icbc = $this->courseformat->hex2rgb($this->settings['imagecontainerbackgroundcolour']);
+                    $sectionimage = $this->courseformat->setup_displayed_image($sectionimage, $coursecontext->id,
+                        $this->settings, $icbc);
+                }
+
+                $gridimagepath = $this->courseformat->get_image_path();
+                $iswebp = (get_config('format_grid', 'defaultdisplayedimagefiletype') == 2);
+
+                $data->image = $this->courseformat->output_section_image(
+                    $section->id, $sectionname, $sectionimage, $coursecontext->id, $section, $gridimagepath, $this, $iswebp);
+                $data->summary = $summary;
+
+                $o = $this->render_from_template('format_grid/singlepagesummaryimage', $data);
+            }
+        } else {
+            $o = $summary;
+        }
+
+        return $o;
+    }
+
     /**
      * Output the html for a single section page.
      *
@@ -279,6 +339,8 @@ public function print_single_section_page($course, $sections, $mods, $modnames,
         if (($this->section0attop) && ($this->settings['setsection0ownpagenogridonesection'] == 1)) {
             return parent::print_single_section_page($course, $sections, $mods, $modnames, $modnamesused, $displaysection);
         } else {
+            /* Output the single section page without section 0 at the top.
+               Thus when section 0 is on its own page, it won't be displayed twice. */
             $modinfo = get_fast_modinfo($course);
             $course = course_get_format($course)->get_course();
 

renderer.php

@@ -284,6 +284,19 @@
     );
     $settings->add(new admin_setting_configselect($name, $title, $description, $default, $choices));
 
+    // Show the grid image in the section summary on a single page.
+    $name = 'format_grid/defaultsinglepagesummaryimage';
+    $title = get_string('defaultsinglepagesummaryimage', 'format_grid');
+    $description = get_string('defaultsinglepagesummaryimage_desc', 'format_grid');
+    $default = 1;
+    $choices = array(
+        1 => new lang_string('off', 'format_grid'),
+        2 => new lang_string('left', 'format_grid'),
+        3 => new lang_string('centre', 'format_grid'),
+        4 => new lang_string('right', 'format_grid')
+    );
+    $settings->add(new admin_setting_configselect($name, $title, $description, $default, $choices));
+
     // Fix the section container popup to the screen. 1 = no, 2 = yes.
     $name = 'format_grid/defaultfitsectioncontainertowindow';
     $title = get_string('defaultfitsectioncontainertowindow', 'format_grid');

settings.php

@@ -34,6 +34,7 @@
     padding: 0;
     padding-bottom: 5px;
 }
+
 .course-content ul.gtopics-0 #section-0 {
     background: transparent;
     border: 0 none;
@@ -141,7 +142,9 @@ div#gridmiddle-column > ul {
     text-overflow: inherit;
     white-space: pre-wrap;
     word-wrap: break-word;
+    z-index: 1;
 }
+
 .course-content ul.gridicons li .icon_content.content_inside.top {
     left: 0;
     right: 0;
@@ -194,12 +197,13 @@ div#gridmiddle-column > ul {
             box-sizing: content-box;
     overflow: visible;
     position: relative;
-    text-align: center;
-    vertical-align: middle;
 }
 
-.course-content ul.gridicons li img {
-    margin-top: 0;
+.course-content ul.gridicons li .image_holder img {
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .course-content ul.gridicons li img.info {

styles.css

@@ -0,0 +1,49 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template format_grid/singlepagesummaryimage
+
+    Single page summary image.
+
+    Context variables required for this template:
+    * centre - If true, centre the content.
+    * image - Image markup.
+    * left - If true, align the content to the left.
+    * right - If true, align the content to the right.
+    * summary - Summary markup.
+
+    Example context (json):
+    {
+        "centre": true,
+        "image": "Image markup",
+        "left": false,
+        "right": false,
+        "summary": "Summary markup"
+    }
+}}
+{{#left}}
+<div class="d-flex flex-row">
+{{/left}}
+{{#centre}}
+<div class="d-flex flex-column align-items-center">
+{{/centre}}
+{{#right}}
+<div class="d-flex flex-row-reverse">
+{{/right}}
+    <div class="p-1">{{{image}}}</div>
+    <div class="p-1{{^centre}} w-100{{/centre}}">{{{summary}}}</div>
+</div>