Example of OJS3 htmlGalley with Bootstrap

Greetings everyone,

Almost 3 month ago I had started to learn html css and javascript. As my first project I have styled HTML Galley for our OJS3 journal. I think maybe some code snippets may be interesting for the community. Mostly newest bootstrap was used. For automatization additionally newest jQuery was used (auto-creating menus, cloning tables etc.) It has different look for mobiles and desktop. The work can be seen here: The psychological distress and psychic phenomena in cancer patients during palliative care | Psychosomatic Medicine and General Practice.
The link can be broken if I will be make additional changes.
Most of the coding can viewed through modern browser but I must ask not to copy it all entirely. It can be used as example for creating own unique design.

2 Likes

Greetings,

Some code snippets for making own unique navigational menu in html galley:

  1. First of all there is a need to use html galley plugin from ojs3.0 version. It is clean and not contains iframe. All manipulations require modification of the display.tpl file. There can be seen only this code:

     {foreach from=$styleUrls item=styleUrl}
      	<link href="{$styleUrl|escape}" media="all" type="text/css" rel="stylesheet"/>
      {/foreach}
      {$htmlGalleyContents}
    
  2. All of the custom code can be inserted before or after this lines. It means that it will be included before or after loading of html galley. I prefer to put it after because it provides the opportunity to insert manual meta-tags in the head of the original html galley file without additional manipulations.

  3. Working with .tpl file is as simply as with html. For creating simple main menu in html galley can be used as example this code:

<a href="{url router=$smarty.const.ROUTE_PAGE page="issue" op="current"}">
	{translate key="navigation.current"}
</a>
<a href="{url router=$smarty.const.ROUTE_PAGE page="issue" op="archive"}">
	{translate key="navigation.archives"}
</a>

This will create links to the current issue and archive with strings according to current locale. If there is the need to show language toggle menu in html galley, creating links to the current locale is fairly simple:

<li class="locale_en_US"><a href="/index.php/psp/user/setLocale/en_US?source=%2Findex.php%2Fpsp">English</a></li>

For me smarty route didn`t work. Do not know exactly why.
Additionally in html galley can be inserted article abstract and meta. It is as simple as above, as example:

{if $article->getLocalizedAbstract()}
  <div class="article-abstract-text">
    {$article->getLocalizedAbstract()|strip_unsafe_html|nl2br}
  </div>
  <h2 id="abstract-title" class="title">
     {translate key="article.abstract"}
  </h2>
{/if}
  1. The final step is to attach created links in the html galley. It can be done with javascript. I prefer to use jquery library. For example:

$('div.article-abstract-text').prependTo('div.panel-body:first');

will put div with class “article-abstract-text” in the first div with class “panel-body” in the html document. All javascript code I put in the head of the html galley file. As example:

<head>
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/psychosomatics.js" defer></script>
</head>

It means that html galley file will look for the external javascript in folder js in the root of the web-access folder. My custom javascript will be loaded after the loading of html structure (look at the defer attribute).

Keep in mind that menu can be created much simpler and without the javascript simply by creating heading for hmtl galley directly in the display.tpl file. For styling I recommend to use bootstrap: http://getbootstrap.com/components/#navbar

on the article- view it seems to me, that the right column (with the important info to issuing date and other formats) disappears completeley when you shrink the browser to mobile size. Am I missing something?

Yep. That was done deliberately. XML rendered by Lens Viewer and PDF aren’t very mobile friendly. Number of Issue and Volume can be viewed in how to site block. And this article look isn’t finale :slight_smile:

ah okay, and how do you get to the heart of the article on a mobile device then? I am asking since I otherwise like your design and would want to base my child theme upon it.

Don’t understand the question…
Our articles are fully displayed on article detail page in HTML format. Galleys are served only as addition if someone wants to download article as PDF or read article in Lens Viewer.
For mobiles I have used bootstrap accordion: http://getbootstrap.com/javascript/#collapse
To view section user needs to press corresponding section header.

okay, maybe it is due to me not unterstanding russian that I did not notice it. Allow for one question: moving sections like the one mentioned around or even not displaying it is easy to do within bootstrap? did you do this within a php template? I am a designer and I am new to bootstrap.

Not very hard. Adaptation for small screens was done on javascript level. It is a matter of determine screen width and add boostrap accordion attributes to needed HTML element when screen is small (simple DOM manipulation). Other work is done by bootstrap javascript. I even didn’t change bootstrap default css.

I’m planning to add some features, in particular the look of the article landing page, into Old Gregg theme: GitHub - Vitaliy-1/oldGregg: Theme for OJS 3 with Bootstrap 4
(it will look something like that: The psychological distress and psychic phenomena in cancer patients during palliative care | Psychosomatic Medicine and General Practice)
Although, I must warn that it will not be soon as almost my entire free time now is devoted to DOCX to JATS XML converter plugin for OJS.

1 Like

This is great news. Look forward to using the plugin