Agamotto images not displaying

Submitted by anastasia_bbk on Fri, 02/19/2021 - 12:04
Forums: 
Bugs in content types

Hi, 

I am using the Agamotto content type in Moodle but none of the images I use display once I save my changes. I can see the thumbnail image in editing mode but when I go back to the course page none of the images are displayed. 

Our Moodle was migrated recently from locally hosted to cloud. In the local hosted version of the site this content type works. I add two png images and after I save my changes I can see them displaying in the course page. However if I do the same in our cloud hosted site it doesn't work. The only difference between sites is that I can see from the image links we now save media content in an aws s3 bucket. 

However all of the other Content types of H5P that use images do work on our cloud hosted site. The images are also stored in aws s3 bucket and they do work. It seems to be only an issue for Agamotto.

 

Any suggestions?

 

Thank you,

Anastasia

Attachments: 
Image icon cloud_hosted.png
Image icon local_hosted.png
Image icon other_content_type_cloud.png
Content types: 
Agamotto
otacke's picture

otacke

Sat, 02/20/2021 - 00:18

Hi Anastasia!

Could you please share any error messages that you receive in the development console (usually opened by pressing F12) and/or the PHP server log?

I have a hunch, but it's hardly possible to guess from seeing those images.

Best,

Oliver 

anastasia_bbk

Sat, 02/20/2021 - 00:49

Hi Oliver,

Thank you for your quick reply! There are no console errors but there is a warning which is not showing in our agamotto test in our local hosted Moodle.

This warning is only showing in our cloud hosted Moodle (media files uploaded to aws s3 bucket).

For both test I used the same images and same file types.

 

Attachments: 
Image icon console_error.png
otacke's picture

otacke

Sat, 02/20/2021 - 01:29

Hi!

You'll have to make sure that the server the images are fetched from is providing CORS approval, cmp. https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

Best,

Oliver 

anastasia_bbk

Tue, 02/23/2021 - 14:54

Dear Oliver,

Thak you for this suggestion.

I received an update from our Moodle hosting provider. One of the engineers explained:

"I believe this issue is because in the iframe which the activity content is displayed inside, it doesn't actually just display an image from a URL, it converts it to base64 code instead. Presumably this does not work when the file is accessed via the redirect to the aws url.

As far as I am able to tell, this conversion is not happening inside Moodle and is likely happening in the external HVP system and just being rendered in Moodle. "

As I mentioned other H5P content types that use images seem to be working fine for us. Is Agamotto the only content type that converts the images?

Can you advise on this?

Kind regards,

Anastasia

otacke's picture

otacke

Tue, 02/23/2021 - 15:09

Hi Anastasia!

The images are not encoded to base64 directly, but the content type uses the so called canvas as an intermediate to render images in order to avoid transparent images messing with the blending effect (cmp. https://github.com/otacke/h5p-agamotto/blob/master/src/scripts/h5p-agamotto-images.js#L56-L75). That happens inside the content type, yes, but the problem roots in the CORS settings of AWS as described in the link that I mentioned (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image). 

To the best of my knowledge, this is the only content type that uses the canvas, but similar CORS problems may occur with other content types, too.

Best, 

Oliver 

anastasia_bbk

Thu, 03/04/2021 - 12:04

Hi Oliver,

Our hosting partners have adviced that this deson't seem to be the issue.

They added the CORs settings to AWS S3 bucket but that didn't solve the issue.

They investigated it further and found that Pre-Signed URLs which does a 302 redirect when enabled is the root cause. We disabled it and got Agamotto content type working on staging.

This seems to be the issue we've got: https://advancedweb.hu/how-to-solve-cors-problems-when-redirecting-to-s3-signed-urls/

Kind regards,

Anastasia

otacke's picture

otacke

Thu, 03/04/2021 - 21:10

Hi Anastasia!

Thanks for letting me and the world know! I have no experience with AWS S3 and learned something new myself \o/

Best,
Oliver