There are already some similar questions in forum, but could not get them properly and we are not sure whether they apply to OJS 3.0 as well.
We are on OJS 3.0.
This is the first time we are trying to upload HTML galley.
We have produced html file by exporting from inDesign and some modifications. It looks OK.
Problem 1: With no link to stylesheet in html file and uploading html galley and dependent css file, we only get text, not style. Should we write some link for css file in the head of html galley?
Problem 2: After uploading css file on its own (not as a dependent file of html galley) in public folder and linking it to the html galley produced the style. But would it be feasible to maintain separate css file that way when we grow bigger.
Here is the link: http://jlmc.edu.np/index.php/JLMC/article/view/57/66
Problem 3: Though we had temporarily solved the style problem as stated in problem 2, we got a blank page with the article only and no OJS structures all around. What steps exactly should we follow to wrap our html article inside OJS layout.
Check to see that the MIME type of the CSS file was detected properly (the dependent file, that is). This is in the submission_files table. I suspect it’s been detected as text/plain, not text/css. This will cause browsers not to render it.
Regards,
Alec Smecher
Public Knowledge Project Team
Thanks @asmecher,
Now I am able to apply styles to html galley with the dependent css file.
The html file opens in plain window (ofcourse css style applied). Now, is there a way to to output the html file contents within the header and sidebars of OJS?
I have already tested iframes and it has several issues, which are reported in pkp github. Internal links are not working properly (the page structure shifts up), external are not working at all. So if you declare the css and javascript in the head of html as external files they simple would not work. They not working even in case they are situated in you web access folder and you point to the like /path/to/CssOrJavascript. Iframes blocks it.
For us its far more convenient to place css and js in the web access directory and not to download them every time manually through admin panel.
Already I am running html galleys without it and can say, that iframes is simply not required if you know basics of javascript. For example you can see this article: Prevention of alcohol and other drug use using motivational interviewing among young adults in the Ukraine | Psychosomatic Medicine and General Practice
There you can see that the page is even adapted to mobile devices (requires reloading the page if you use browser on desktop to check it, it uses ajax for checking device width). It is quite simple because I begun to learn html/css/javascript only 2 month ago in a free time.
With javascript it is possible also to make in-article navigation by copying all subheadings in the another div, which will serve as a menu (working on it right now).
Another pretty thing is to adapt article for mobile devices. It is simple with jquerymobile. It need to be noted that jquery mobile need to be stopped (or page refreshed), when user leave the page via internal link. It can be done for example through autorefreshing page after user clicks on link:
Other possibility is to make with php page for each html galley on load. With its own header and footer. So article text could be injected in the body. This will be good solution for all users. But I do not know how to do it.
All manipulations will take near 3 hours. As a result you will have JATS xml, that can be viewed by eLens viewer and html, that will be indexed in google scholar (because xml is not).
For now we work with our own xslt for transformation xml to html, because the one on github is not ideal.
you’re talking about 3 hours per article – right? That meets my time estimation for this task.
One further question: Is it possible to only upload the article.css and jquery.js once to the webserver and reference to them in the HTML galley? I tried, but it didn’t work …
If this will not work: How do you upload multiple files (HTML, CSS, JS) as a HTML galley to OJS? I haven’t managed this either.
3 hours per article if tables are well formed and at the end of each reference in the reference list there is a full doi index or pubmed reference of cited article (In this case parser will include cited article`s data from reference). Open Typesettings Stack has own limits, but it can help to form JATS XML much faster, than it can be done manually.
Css can be uploaded through admin panel after html. But you need manually change mime type of uploaded css from “text” to “css” in database.
I really did not try to place css or js in the web access directory and point out path to them in the head of the html without iframe. You say it is not working? Hmm.
But even in this case I already tried to add javascript code and path to css through .tpl file in the lens plugin and it worked. This can be done and for hmtl galley plugin. @asmecher maybe you now the answer to this problem?
One posibillity of why external links are not working is because of iframe, as I wrote earlier. But that is if you adopted it from github before official release of new ojs version.
I uploaded those files to an HTML galley and opened it via the reader interface and voila – it works! I clicked a few links (e.g. internal links to anchors, and an external link) and they seemed to behave as I would expect. Can you clarify what kinds of links were giving you trouble?
Incidentally, this looks really good – excellent work! When do you plan to launch? This would be a good journal to feature e.g. via a PKP blog post.
Regards,
Alec Smecher
Public Knowledge Project Team
I have just checked, one of our articles was already published with external link to javascript in the <head>. The problems occurred only when we adopted iframe. When I clicked on the link in nav menu all frame went up, so the I frame menu had become inaccessible (beyond the page). Also external links to css (or js) were not working. CSS worked only when was uploaded through admin dashboard.
We are planning to launch in midwinter. There are some bureaucratic borders in our country for establishing scientific journal, especially electronic, but it seems we are successfully passing them. We are also planning to inject more functionality in our html version of galleys in the future (taking front-end development courses in free time right now) and there will be no problem to share some of codes with community.
You can simply create own folder in the root of web access folder and copy there all needed css and js files. Than just add links in the html head to it, for example: <link rel="stylesheet" type="text/css" href="/path/to/directory/mycss.css <script type="text/javascript" src="/path/to/directory/myjavascript.js"</script>
If it is javascript that requires to be loaded after html, than add “defer” attribute. Do not forget to set permissions accordingly.
wouldn’t it be possible and nicer not to use <iframe>s for HTML, but to inject OJS code into the HTML files? E.g. directly after <body> and into <head> before all manual <link> or <style> sections? This would allow much more flexibility and would avoid the <iframe>.