Insert an image inside a pl exercise

[nborie]

I did upload an image to pl-test : napoleon.jpg

I have the file of the file next to my exercise. I did try to insert the image inside my exercise but I failled...

# @ /examples/napoleon.jpg
title = Histoire : resituer des événements historiques sur une frise chronologique
text==
Placer les événements historique suivant sur la frise chronologique.

<img src="examples/napoleon.jpg" />

<img src="napoleon.jpg" />

![Couronement de Napoléon](napoleon.jpg)
==

Nothing works in the previous code... If I uncomment the first line, I got that :

Failed to load 'historic_dates.pl':
'utf-8' codec can't decode byte 0xff in position 0: invalid start byte

This error disappears when I comment the import of the image in the sandbox... Does the sandbox hate image ????

I would be happy to have a minimal example of something in the documentation

[qcoumes]

This is actually interesting : there is currently no way to upload a binary file with a PL. This is due to the fact that we store the PL in the database as a Jsonfied.

So there's two main solution :

• Encode any binary file in Base64 (or any binary to text encoding)
• Store the file somewhere on the disk and store its path in the DB

  ---

  Another problem is the use of binary files in the HTML. Your example would not work even if the image could be store as the HTML is render on Premier Langage and not on the sandbox, any of the path in src are therefore incorrect.

So we also have to provide a way to use files in text and form.

[plgitlogin]

This is a very important ISSUE should have a very HIGH priority.

We need this rapidly.

EXTERNALS

images from out side no techical problemo. Except that the images can vanish (a local copy maybe ??) Warning to autors ? Copyright ++ ?

LOCALS

Images in the plserver Static and dynamic images.

static images are defined in files outside of the pl file (like the exemple below):

@ somedir/someiomage.format [alias] This should be accessible in a global storage space with a renaming sheme to advert name collision a uuid should be good. The alias is mandatory and is used to make reference in the html result : < img src="[alias]" > the [alias] is substitued with the "https://plserver/globaldir/uuid.whateever". as the user is not knoladgable of the uuid.

dynamic images

dynamic images are build dynamicaly in the build or in some forme of code,

serveur side code :

in this case the images are built on the sandbox there should not be any access to file in the sandbox, so the images must be base64 encoded for their transfert in the json (and saved in the pl), and some javascript to convert them on the client.

client side code :

In this case the javascript is calling the shots see @mciissee for help

[plgitlogin]

An other idea can we have a database table with files and a restfull api to those file then it become easy to use ....

[nimdanor]

Database not a good idea, spoke with PF who said i tried several time and each time when back to a file system.

django as an image management system https://www.online-convert.com/ yield svg image from pdf or jpg svg works fine.

[nimdanor]

I asked @mciissee to look into this.

[mciissee]

example of image usage inside pl file using @nborie Cbank repository

[nborie]

It was another attempt to try to implement a POC example for a subject other than computer sciences.

I am really impressed since no any hack are visible on the exercise source. Were is host the image ? Does the image live inside the sandbox ? How did you technically solve the problem ?

[mciissee]

When the browser render your code with an image tag like <img src="napoleon.png/> it will try to add 'napoleon.png' to the current location on the server and download the file at 'https://pl.u-pem.fr/filebrowser/napoleon.png'.

The problem is that the file is not located here on the server so I modified the pl parser to change every reference to an image with tag to a download link to the real location of the image depending to the location of the file that contains the tag. I have chosen this solution since this is transparent for the user and I will not break changes for peoples using tag.

An another advantage of this solution is that every user can upload a file in the editor and include it in a pl file (only inside keys interpreted as html code as text== or form==) this mean that the solution still works if you an tag inside an .html file included in a pl using @ operator.

Failed to load 'historic_dates.pl': 'utf-8' codec can't decode byte 0xff in position 0: invalid start byte'

was caused by usage of @ /examples/napoleon.jpg because pl parser will try to open the file as a text file instead of a binary file.

[qcoumes]

Does it also work on playexo?

[mciissee]

Yes it also work on playexo but the activities already using img tag and loaded should be reloaded since the parser is modified to replace all img tags with a download link.