How to display image in custom activity module?

How to display image in custom activity module?

by Mike Finch -
Number of replies: 2

Moodle 3.0.2 (Build 20160111)

I have developed a custom activity module.  The name of the activity is "gate".  The content that an instance of the activity displays is very simple:  just one block of rich text, followed by a form with a checkbox and a button in it for the user to accept the condition I specify in that rich text.

The short story is:  an image in the rich text does not display.


When the rich text contains some markup, it displays correctly.  The following is an example of rich text that works.

<p>By starting this course, I understand that my use of the course <strong><em>will be tracked</em></strong>.</p>

However, when I add an image to the rich text, that image does not display.  The following is an example of rich text containing an image that does not work.

<p>By starting this course, I understand that my use of the course <strong><em>will be tracked</em></strong>.</p><p><img width="80" height="80" class="img-responsive" role="presentation" style="margin: 0px 0.5em; vertical-align: text-bottom;" alt="" src="http://host01/moodle/pluginfile.php/10911/mod_gate/condition/0/logo.png"></</p>

When I am a site administrator, a broken image icon (i.e., a black box with an X in it) displays instead of the image.  When I am a student, nothing displays where the image should be.

When I added the image in the rich text editor control, I was the site administrator, and I uploaded the image in the File Picker.

Custom activity vs feedback

I have been using the feedback activity as an example to follow, and specifically how it deals with editing and displaying the value of the page_after_submit field of the mdl_feedback record.

Editor options

The editor options I use are the same as what the feedback activity uses.  For example, in my moodle/mod/gate/mod_form.php:

    $options = gate_get_editor_options();
$form->addElement( 'editor', 'condition_editor', 'Condition', null, $options );

Where the editor options are provided by:

function gate_get_editor_options()
{
return array(
'maxfiles' => EDITOR_UNLIMITED_FILES,
'trusttext' => true
);
}

Extract data from editor

When a gate activity module instance is created or updated, I extract the data from the editor control in a similar way that the feedback activity does it.  For example, in my moodle/mod/gate/lib.php:

function gate_update_instance( $gate )
{
  global $DB;

...

  //------------------------------
  // Extract data from the condition_editor field.
  $draftItemId = $gate->condition_editor['itemid'];
  if ( $draftItemId )
  {
    $context = context_module::instance( $gate->coursemodule );
    $editorOptions = gate_get_editor_options();

    $gate->condition_text = file_save_draft_area_files(
      $draftItemId,
      $context->id,
      'mod_gate',
      'condition',
      0,
      $editorOptions,
      $gate->condition_editor['text'] );

    $gate->condition_format = $gate->condition_editor['format'];
  }

  //------------------------------
  // Update the record.
  return $DB->update_record( 'gate', $gate );
}

That seems to be straightforward.  The resulting value of the condition_text field in my mdl_gate record is like the following.  The URL of the image seems to be valid, containing a "@@PLUGINFILE@@" token which will be converted later.

<p>By starting this course, I understand that my use of the course <strong><em>will be tracked</em></strong>.</p><p><img width="80" height="80" class="img-responsive" role="presentation" style="margin: 0px 0.5em; vertical-align: text-bottom;" alt="" src="https://moodle.org/pluginfile.php/154/mod_forum/post/1525747/logo.png"></p>

Rewrite image URL and print to page

When I print a gate activity module instance, I convert the rich text value of the condition_text field before printing it, in a similar way that the feedback activity does it.  For example, in my moodle/mod/gate/view.php:

...
$gate = $DB->get_record( 'gate', array( 'id' => $courseModule->instance ) );
...
$text = file_rewrite_pluginfile_urls(
  $gate->condition_text,
  'pluginfile.php',
  $context->id,
  'mod_gate',
  'condition',
  0 );

echo format_text( $text, $gate->condition_format )

The context ID, component name, filearea name, and item ID are the same as when I called file_save_draft_area_files() to extract the data from the editor.

End of rope

I have run out of things I know to check.  It seems that I am doing everything just like the feedback activity.  Any suggestions are appreciated.

Average of ratings: -
In reply to Mike Finch

Re: How to display image in custom activity module?

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Working with files is pretty tricky, especially the first time. From the URL that is showing of the broken image it almost looks ok.


One place that you did not mention checking is in your plugin's:  [activityname]_pluginfile() function 
ie gate_pluginfile()

that should be in lib.php. The URLs to your plugin's file go to Moodle's pluginfile.php script, but that in turns calls the plugin's pluginfile function to return the file. I would check there next.

NB You might get more help in the developers forum, than this one.


Average of ratings: Useful (1)
In reply to Justin Hunt

Re: How to display image in custom activity module?

by Mike Finch -

Thank you, Mr. Hunt.  Implementing gate_pluginfile() was the important piece I was missing.