need help with adding code in html editor

need help with adding code in html editor

by Gary Lynch -
Number of replies: 14

Hi all

I have purchased a 3rd party software that makes interactive images which are published in html5 (very much like google maps).

(Happy to share name of software but don't know rules about that smile)

I upload the files to my server and the software wizard provides the code.

Here is a sample of what the code looks like.

<script src="https://www.myserver.com/imap5customcore.js" type="application/javascript"></script><script type="application/javascript">imap5custom.init({usermap:74684951,local:true,base:"https://www.myserver.com/"});</script>


This does not display correctly in my course.

The ability for my organisation to make interactive images is key for our learners and i would rather embed into labels than have to create separate pages outside moodle and linking.

im currently using 2.7 but about to upgrade to 2.8

Hope someone can help me with this and thank you in advance

Regards

Gary


Average of ratings: -
In reply to Gary Lynch

Re: need help with adding code in html editor

by Just H -

iMap Builder by any chance smile

Where are you putting the code and what happens? Most likely the code is getting stripped by Atto.

Average of ratings: -
In reply to Just H

Re: need help with adding code in html editor

by Gary Lynch -

Hi

Actually it is iicreator lol

i am pasting the code into the html editor in a label as i want to embed the image in to topics, lessons and pages.

I can link to the html page fine but  i really would like it to work the way above

I paste the produced code from iicreator and it displays the 'box' but no image etc

i am using the TinyMCE editor smile

Gary

Average of ratings: -
In reply to Gary Lynch

Re: need help with adding code in html editor

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

This looks a good job for the Generico filter

https://moodle.org/plugins/view/filter_generico

The editor is stripping out the tags. You could set your embed code up as a Generico template and then add it into the html area something like this:

{GENERICO: type=iicreator,image=mybigimage}

Writing the template is not too tricky, but requires a bit of handiness with javascript and html.  If you need a hand, let me know.

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

Re: need help with adding code in html editor

by Gary Lynch -

Hi Justin

Funnily enough i looked at this last night smile

I would definitely need a hand to set up if this is my solution.

the only thing is that the script has 3 variables which i can send you the screenshot with the explanations.

I would rather have a solution for pasting the code as it saves me having to train my team up so much but i would be grateful for help

Gary

Average of ratings: -
In reply to Gary Lynch

Re: need help with adding code in html editor

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

If you want to just paste in the code, you would change your default text editor to a non html one.

This depends on your version being moodle 2.5(?) and its a site wide setting. So you would lose html editing all over the site.

But you could work around this by designating a user for editing these links, and make the default editor for just that user the text editor. This is done in the user's profile. Then when you need to put these links in, your team member logs in as the special user.

It depends on your own business logic and team I guess.

Post the screenshot of the variables and stuff here and I will look at it.

Average of ratings: -
In reply to Justin Hunt

Re: need help with adding code in html editor

by Gary Lynch -

Hi Justin

Being a hands on person smile

 i have downloaded Generico and am having a play on our development serversmile

i have made my first template screen shot attached

Screen shot 1 is my code with the variables

Screen 2 is the output when i use the

{GENERICO:type=Image,folder1=test21,number=41816745,folder2=test21}

as you can see there is no image or icons for tool tip boxes

Your help very appreciated as im hitting my head of the desk lolblack eye

Regards Gary

Attachment screen 1 template.png
Attachment screen 2.png
Average of ratings: -
In reply to Gary Lynch

Re: need help with adding code in html editor

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Hmm. I would check the browser console to see what errors were returned.  I am sure that there will be some.

 Since you are using https, if your map script doesn't pull the images via https, its likely it will fail in that way that we are seeing. ie. All script and no images. But it could also be something to do with the template.

I think its normal to load the main library file (imap5customcore.js) in the page head. You might try that(see Moodle -> appearance -> additional html). But actually Moodle usually executes the javascript only at the end of the page load, and has its own system for caching and loading js libraries. Generico tries to work with that. So I would probably:

i) upload (drag and drop) imap5customcore.js to the upload js section of the template

ii) add a placeholder of some sort ( a div with an id) where you want the map to appear. That would basically be all the template contained.

iii) Call imap5custominit from the custom js section, to swap the placeholder div for the main content.

But the way you have done it should work, and is far simpler, and Moodle won't interfere with it. So I think you should do it the simple way, if you can. Once its working simply, you could come back and dot the i's and cross the t's.


Average of ratings: -
In reply to Justin Hunt

Re: need help with adding code in html editor

by Gary Lynch -

Hi Justin

Thanks for the reply smile

The files are all load custom for every image which is uploaded via ftp to its ow named directory i don't know if it is a common file that could be placed on its own and be called.

i have attached a couple of files that are exported and placed on the server.

if i just open the imap5custom.html in a browser all works fine


Using your Generico would actually be a good solution as it would be simple for my team to use once the template was set up

Already set up template for Vimeo as my team keep forgetting the way to embed code!

I really appreciate your help as this is not a very strong area for me sad


Gary

Average of ratings: -
In reply to Gary Lynch

Re: need help with adding code in html editor

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

See the two attached screenshots.

Its pretty much what you had I think, it was probably just the 'base' path to the images etc was not right.

I put a folder called imap5 into a directory called poodlldata at the root of my moodle program directory. Then the imap5 path became /poodlldata/imap5. A folder for each set would be copied into there and you just tell the filter string the set name (ie folder name) and the set id number. So the string ultimately looks like this:

{GENERICO:type=imap5,set=test21,setid=41816745}

Attachment PLD__Administration__Plugins__Filters__Generico__Template__imap5.jpg
Attachment Video_Easy__Big_Picture.jpg
Average of ratings: Useful (1)
In reply to Justin Hunt

Re: need help with adding code in html editor

by Gary Lynch -

Hi Justin

Apologies for the slow reply.

Thank you for your help on this. I will have a look at this today and let you know how i get on. I may have one or two small questions for guidance.


Regards  Gary

PS this is a really good plugin that i think im going to find very very useful smile perhaps there is scope to include this as core?

Average of ratings: -
In reply to Gary Lynch

Re: need help with adding code in html editor

by Gary Lynch -
HI Justin

I have found an anomally sad
I use the Archiaus theme customised for my needs and it looks like the theme interferes with the plugin.
I found this out after spending a day sad trying to get this to work and i had the revelation to change the appearance soooo maybe its worth a look for you  incase others have the same issue
After that change Generico worked absolutely fine smile so looks like im going to have to redesign our theme based on a different one unless you have a nice solution smile
Gary
Average of ratings: -
In reply to Gary Lynch

Re: need help with adding code in html editor

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Gary

Glad you got it working ... kind of.

Generico is unlikely to conflict with anything by itself.  Of course its possible, but for the most part it is just a kind of a wrapper. So if you run into conflicts of some sort, it is probably just a case of reworking the template to get it to work. 

You may recall the way we did it was the ugly brute force way. The better way be to load the JS library from the footer and then execute the js after the page has finished loading, to swap out a placeholder div with your cool widget. If you look at the other templates this is how they work. It is a bit more complicated though.

Without more details I can't offer much help or be sure that is the cause of the problem, but send me a PM if you want to make a job out of it. 


Average of ratings: -
In reply to Justin Hunt

Re: need help with adding code in html editor

by Gary Lynch -

Hi Justin

It maybe ugly but it works black eye

We are due for an upgrade within the next couple of weeks and I think its time for a change.

Your suggestion is welcomed if 'we' ( obviously the emphasis on the you side smile) can make it work better but its now into the realms of 'gibberish' to me.

If you let me know what information you need then i look forward to learning more smile

Gary

Average of ratings: -
In reply to Gary Lynch

Re: need help with adding code in html editor

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

If its working, then thats fine. I was not sure how big of a deal having to use another theme was.


Average of ratings: -