HTML5 in Compo.sr directories

How can I add htm/html pages and link/call them

I am creating interactive content for teachers in HTML5 (using some editors, they work without problems on browsers). Yet, my main content is on compo.sr and I am happy. I am trying to link to, call or somehow include these interactive html5 pages among my compo.sr content and I wasn't able to reach any of the html/html pages via browsers by following the pages' link in the address bar (sounds so simple though). Is it so hard to do this? I have been reading lots of posts, tutorials and documents not to bother anyone with my questions, yet, I suppose I need help, or at least a cleaner instruction I may follow.

Are you trying to embed the HTML5 into Composr (e.g. a Comcode page or an iframe), or just link to them?

What kind of link is it? Is it just a standard hyperlink to a web page?

Hi Patrick, thanks for your interest.
I would like to put html pages into compo.sr directories and use them in iframes if possible (design, shape, size etc.) or link to those pages if needed. To make it more clear;

I provide people with downloads via compo.sr, and moreover I design some interactive course presentations in HTML5, when I finish a new presentation, the user will click the link (of the presentation on one of the compo.sr pages) and watch the presentation, when the presentation finishes, I will put another link somewhere in the presentation, and the user will follow the link to come back to compo.sr, of course, design and lots of other things will be different, yet, I don't want users to go out of the scope of my main domain (at least, it is my intention). It might be a bad idea, but I don't know if there is any better implementation of my goal here indeed.

Have you tried creating Comcode pages for each HTML5 page?

Via Admin Zone
Admin Zone -> Content -> Comcode pages. Create a new page.
Turn OFF the WYSIWYG editor if active.
In the page content, type:

Manually
Browse to your_zone/pages/comcode_custom/LANG/
Create a new .txt file. Give it a codename for your page.
In the txt file, put the same contents I mentioned above in it and save.


Of course, if your HTML5 pages have stuff like head attributes to pull in external CSS or JS, then the solution wouldn't be this simple. You'd have to put your JS and CSS in themes/your_theme/css_custom|js_custom accordingly, then under the html tag put Tempcode like this:

Alternatively, you could try using iframes, though Composr's security policies and browser CSP might prevent them from working. Worth a shot.

Upload your HTML5 pages as .html files to /uploads/filedump/wherever.

Create Comcode pages that look like this:

This won't be responsive though. You may wish to check online about how to make iframes responsive and adjust height accordingly to the content as well.

Hope these tips give you a good starting point.

Thanks for your quick answer Patrick, the first option doesn't seem feasible indeed, since I will need to upload lots of pages and scripts etc (I will be preparing hundreds of courses). I tried the second option (uploaded the folders into filedump and followed the link via address bar and requested it via iframe), it said "404 not found". I double checked if I did anything wrong, but for now it seems not.

Hi,

Try putting your HTML pages under the site/pages/html_custom/EN/ directory (or pages/html_custom/EN/ if Single Public Zone is set) then I believe they will show up in the sitemap/tree and be available for editing directly via Composr (if required, but the editor may mess things up).

Is there any reason the lessons you are creating couldn't be Comcode Pages (which is basically HTML with interactive blocks).
 

Hi Adam, I had already tried that while reading documents and tutorials on compo.sr website and It doesn't work, either. I suppose, I will have to let the users download interactive course content as HTML 5 packages and use them on their devices offline.

dragomangkhn said

Thanks for your quick answer Patrick, the first option doesn't seem feasible indeed, since I will need to upload lots of pages and scripts etc (I will be preparing hundreds of courses). I tried the second option (uploaded the folders into filedump and followed the link via address bar and requested it via iframe), it said "404 not found". I double checked if I did anything wrong, but for now it seems not.

From “Post #9,434”, 25th November 2023, 1:55 pm

Hmm… what happens if you put your full URL in the iframe src instead? "https://www.yoursite.com/uploads/filedump/wherever/file.html"

I tried everything, and I had tried it also before writing here, yet I checked again if I did something wrong, it doesn't work. I am planning to ask my host provider to host another server only for my course content and I will call it in iframe into Composr. Since the files will not be in Composr directories, then it won't prevent them from rendering onto the page, am I right?

dragomangkhn said

I tried everything, and I had tried it also before writing here, yet I checked again if I did something wrong, it doesn't work. I am planning to ask my host provider to host another server only for my course content and I will call it in iframe into Composr. Since the files will not be in Composr directories, then it won't prevent them from rendering onto the page, am I right?

From “Post #9,438”, 26th November 2023, 8:49 am

It depends. If the other server will not be running on the same domain, then the iframe might get blocked by Content Security Policy in web browsers. Version 10 does not utilize CSP that much, so I'm not sure if Composr 10 will cause the iframe to get blocked. I do know v11 will be much more strict and will block the iframe (unless you add in a configuration not to do that).

I'm baffled that it throws a 404 not found error, though. I'm puzzled why 404 and not something like 403 forbidden.

My hosting provider created a subdomain domain called "content.myurl.com" and I gave links to html5 content on my Composr site and it works. I didn't like the view of iframes actually (my website has a fixed size since it looks neat). I put the google analytics codes on html5 pages as well, so everything seems fine for now.