Pictures do not appear in Mobile App

Pictures do not appear in Mobile App

by Bruno Tran -
Number of replies: 7

I am very excited with version 3.3, which I have been waiting for impatiently for some months now.. and off-line lessons are here: this is fantastic! Thank you so much to the development team.... it will be a game changer for our students - in rural Africa.


I have a little problem, though - and I am sure it's a setting I missed somewhere: we have pictures - photos or drawings, usually JPEG files - in our lessons, and they do not appear in the App. Just their title is displayed.


Could you point me to the setting option I missed?


Many thanks in advance..


Bruno

Average of ratings: -
In reply to Bruno Tran

Re: Pictures do not appear in Mobile App

by Bruno Tran -

I think I may need to provide more details: we use lessons and we have inserted pictures in our lessons. These appear as expected on the browser version of the course, but not in the Android version of Moodle app.

I add screenshots of the same page from both systems, as illustration:

First, the browser page, with pictures:

Browser version

Then the Moodle app page which does not reveal pictures:

Moodle App

In reply to Bruno Tran

Re: Pictures do not appear in Mobile App

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi Bruno,

thank you for letting us know. Can you send us a test account so we can take a look? Please send us your Moodle URL and a username and password to mobile@moodle.org.

In our testing the images worked fine, let's see if we can find the problem smile

Cheers,

Dani

Average of ratings: Useful (1)
In reply to Dani Palou

Re: Pictures do not appear in Mobile App

by Bruno Tran -

Thanks very much for following up on this, Dani.

I have just created a student account for you on our test site, and it's all gone to the mobile@moodle.org email address..


Bruno

In reply to Bruno Tran

Re: Pictures do not appear in Mobile App

by Bruno Tran -

Oh.. except that the email bounced back with an error message saying mobile was not found at moodle.org.. could you confirm the email address?


Bruno

In reply to Bruno Tran

Re: Pictures do not appear in Mobile App

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Sorry Bruno,

my bad, it's moodle.com, not moodle.org.

So it's mobile@moodle.com.

In reply to Dani Palou

Re: Pictures do not appear in Mobile App

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi Bruno,

thanks for the credentials.

I checked your site and, for some reason, the WebService isn't returning the images in the HTML of the lesson page. Also, I saw that your images are in base64. Why is that? How did you add the images?

IMO adding the images using the Atto editor (the image button) could solve the problem, but I'm not 100% sure since I don't know why are they being filtered. In any case, using base64 images isn't recommended because:

  • The images are larger.
  • Images aren't cached in the browser.
  • The WebServices don't know that there is an image in there.

I give you some technical data so you can debug the problem if you have a development team.

The WebService mod_lesson_get_page_data (function get_page_data in mod/lesson/classes/external.php) returns two fields with the page HTML: pagecontents, that does have the image, and page->contents, that doesn't include it.

pagecontents has the whole page HTML, including header and buttons, it's the same HTML that is rendered in Moodle web.

page->contents only has the content of the page itself, it doesn't include other data like the buttons or the header.

The app uses page->contents because we don't want to include the buttons created by Moodle, we create them ourselves, and that's why the image isn't shown: for some reason the WebService isn't returning the image in this field.

In pagecontents we receive:

<p style="text-align: center;"><img src="data:image/png;base64..." alt="" style="display: block; margin-left: auto; margin-right: auto;" /></p>

However, in page->contents we receive:

<p style="text-align: center;"></p>

Like I said, I don't know why the image is being filtered. I'm sorry for not being able to help you more.

Cheers,

Dani

Average of ratings: Useful (1)
In reply to Dani Palou

Re: Pictures do not appear in Mobile App

by Bruno Tran -

Hi Dani,

Thank you so much for this!!

I passed on your message to our technical guy who confirmed that the likely reason for the base64 format is that our course developers click and drag on a photo or cartoon to insert it in a lesson's page. That creates the base64 embedded picture when if we use the button on the menu and upload (which of course is slower for the course developer) the resulting format is adequate and will be read by the App.

  • So, great news is that we know where the problem comes from.
  • Less good news is that we now need to go through the 32 existing courses and change each photo or cartoon..

But it is worth it because then we will be able to use the App and offer full off-line experience to our students.

Once again, MANY THANKS for your help!!

Bruno