Example of new OJS3 Journal with custom template


#1

Greetings to all,

We are pleased to announce the official opening of our scientific electronic medical journal “Psychosomatic Medicine and General Practice”: https://e-medjournal.com/index.php/psp.
Thanks to PKP team and OJS platform this project came to life.
Much work is already done and much work is waiting to be done. We have adopted @NateWr advice about creating child theme, and created own bootstrap 3 design.
Our workflow is based on JATS XML - all our articles are first published in this format. Thanks to Open Typesetting Stack this work really takes not much time and thanks to Lens Viewer they have great look at front-end. Also with help of xslt we also create html and pdf variants of articles.
Design of HTML Galleys was my first project as front-end developer :slight_smile: They are created with use of bootstrap framework and jquery library.
For now we are finishing our work on pdf transformation and composing our 2nd issue :slight_smile: .


#2

Hi @Vitaliy,

Really excellent work! I’ve passed this around our group for a good look.

Regards,
Alec Smecher
Public Knowledge Project Team


#3

Nice Work @Vitaliy
A Very Clean Design


#4

Hi @Vitaliy

Happy new Year

How you created the HTML Galley??

Regards.


#5

Hi @Abd_El-Nasser_Gharee,

For html galleys I have worked with display.tpl file in the htmlArticleGalley plugin directory. There I have the code for displaying navigation menu and article title, authors, abstract. Other article information comes from html galley file. They are styled with use of bootstrap framework and functionality added with jquery javascript library (autocreating intraarticle navigation, citation pop-ups and mobile responsiveness).

You can see the code for css and javascript with chrome browser (inspect -> sources -> and browse psychosomatics.css and psychosomatics.js)


#6

How can i add download and abstract views in ojs 3?


#7

It is usage statistics plugin. Just activate it from dahboard.


#8

it activated only, i still cant see on my website/article page.


#9

Looks really great @Vitaliy! Congrats on the launch. It’s great to see all the new theming features for OJS 3 getting used to such great effect.


#11

@Vitaliy congratulation! Looks very good.

Can you give me some feedback on your workflow with Open Typesetting Stack? Do you use a special word template?

Tobias


#12

Greetings @twa,

I use own converter. Look at this topic: DOCX to JATS XML converter


#13

For HTML transformation from JATS we use our own custom XSLT stylesheet. We are not planning to make it public, but I am also working on php project (plugin for OJS3), that will render XML to HTML on server side and publish it on the article detail page. It will not be done in the near future. You can look at the progress here: https://github.com/Vitaliy-1/JATSParser

For PDF generation we use own JATS to LaTeX converter. It is mostly done, but for now it adhere Ukrainian standards Maybe, in the near future I will make the public release. It will produce ready for compiling LaTeX and Bibtex files.


#14

Greetings,

We have also edited the look of our main page. I have developed a Browse Latest Articles plugin. It adds carousel widget and all that can be seen on a main page.

Another thing that we recently adopted - is a separate URL for secondary locale. As can be seen, non-English locale now have subdomain. That was done for indexing secondary locale by Google.


#15

Hi @Vitaliy,
You have been contributing a lot for this OJS community, Thanks.

Can you guide me (or atleast direct me) on how you created submenu on the default “About”?

Regards,
@anupent


#16

Do you have bootstrap installed in you theme?

With bootstrap its easy: https://getbootstrap.com/docs/3.3/components/#btn-dropdowns


#17

After OJS 3.1 and Bootstrap 4 releases, we have completely changed front-end appearance of our journal. I must say that PKP team did a very great job - OJS has very clean and understandable code. It’s quite easy to modify its look and add some additional functionality: JATS Parser plugin for displaying article full-text under the abstract page and Browse plugin for displaying most recent articles on the main page.

So our new theme, although not fully complete, but already is quite good looking. It was inspired by eLife journal and PLoS ONE journal. All the front-end element (menus, navbars, article blocks, lists, alerts etc.) were created with bootstrap 4. Especialy I like the look of main, article detail and register pages.

Once again, thanks to the PKP team for this great publishing system!


#19

Hi @Vitaliy
Is there any specific setting to properly use your browse current articles plugin?
What is the article ID to input in the plugin setting?

Thanks


#20

However, I have now screwed up the overriding settings.Have a look: https://jmri.org.in/jmri/article/view/66
I am not able to find the error here. The affixed nav bar now clashes with the footer.


#21

In the current version, the plugin requires adding a specific method in the PublishedArticleDao class:

function getPublishedArticlesBySection($journalId = null, $rangeInfo = null, $reverse = false, $sections) {
        $params = $this->getFetchParameters();
        if ($journalId) $params[] = (int) $journalId;
        $result = $this->retrieveRange(
            'SELECT	ps.*,
				s.*,
				' . $this->getFetchColumns() . '
			FROM	published_submissions ps
				LEFT JOIN submissions s ON ps.submission_id = s.submission_id
				LEFT JOIN issues i ON ps.issue_id = i.issue_id
				' . $this->getFetchJoins() . '
			WHERE 	i.published = 1
				' . ($journalId?'AND s.context_id = ?':'') . '
				AND s.status <> ' . STATUS_DECLINED . '
				AND se.section_id IN ('. $sections . ')
			ORDER BY ps.date_published '. ($reverse?'DESC':'ASC'),
            $params,
            $rangeInfo
        );

        return new DAOResultFactory($result, $this, '_fromRow');
    }

This plugin is responsible for adding a slider and displaying all our latest articles. That version that is on Github should work with Bootstrap 4. To make it work one should do several tweaks:

If you want to use it, I suggest to perform a test OJS installation and make the necessary changes there first. I can help on any stage, but, apparently, this plugin is not an out-of-the-box solution.


#22

As I remember, table of content should stop after reaching reference (last) section title. That was coded in javascript: