Customizations for OJS website

cxl · February 15, 2018, 8:32am

How do i add a slideshow photos in my homepage? is there a plug-in for it? what are the best design plug-ins for an OJS website? Thank you.

vvucic · February 15, 2018, 10:01am

Please check posts in this forum related to that . There are solutions offered so you can check whether those solutions meet your needs.

cxl · February 21, 2018, 6:06am

Hi! Where’s the link of the forum? Thanks!

vvucic · February 21, 2018, 9:43am

Please check in this forum and in search type "slideshow " and you will get a list of posts related to that. However, check also Community Showcase in this forum.
I think that @Vitaliy was working on that successfully.

Vitaliy · February 21, 2018, 1:48pm

Slideshow of latest issues is implemented in this theme: GitHub - Vitaliy-1/oldGregg: Theme for OJS 3 with Bootstrap 4
Or you know PHP and Smarty and want a code sample?

cxl · February 23, 2018, 7:13am

is there a way where i will just add the slideshow and sidebars on top of the page instead of changing the whole theme?

cxl · February 23, 2018, 7:16am

also, where do i get the bootstrap 4 base theme? thanks

Vitaliy · February 23, 2018, 8:11am

You need to do custom modifications on front-end site. Smarty template that corresponds to journal index page is here:

github.com

Vitaliy-1/oldGregg/blob/main/templates/frontend/pages/indexJournal.tpl

{**
 * templates/frontend/pages/indexJournal.tpl
 *
 * Copyright (c) 2018-2019 Vitalii Bezsheiko
 * Distributed under the GNU GPL v3.
 *
 * @brief Journal landing page
 *
 *}

{extends "frontend/layouts/general.tpl"}

{* passing variable *}
{assign var="pageTitleTranslated" value=$currentJournal->getLocalizedName()}

{block name="pageContent"}
	{if !empty($latestIssues)}
		<section class="box_primary">
			<div class="container carousel-container">
				<div id="carouselIssues"

This file has been truncated. show original

You, maybe, would need also to assign needed variables to the Smarty templates.
About theme developing:
https://www.gitbook.com/book/pkp/pkp-theming-guide/details
And about bootstrap:

Vitaliy · February 23, 2018, 8:22am

Also, can you tell exactly what you want?
If I will have a free time, I can create, for example, a plugin that will add a slider with featured articles (if they have uploaded a cover image) on the journal index page.
But it will be without Bootstrap, because not all themes have it.
As an example:
https://www.w3schools.com/howto/howto_js_slideshow.asp

cxl · February 26, 2018, 1:50am

i want to design our index page similar to the old gregg theme with a slider of featured articles above. is that possible? i want to modify our index page only. thanks a lot for your help.

cxl · February 28, 2018, 6:44am

i just want to use the design of the old gregg theme in my homepage/index page. is that possible? thank you!

Vitaliy · February 28, 2018, 7:05am

That design was made with Smarty, CSS, Javascript, and PHP. If you familiar with these technologies - then it is possible.

cxl · March 1, 2018, 9:03am

do i just have to copy the index tpl of the theme and modify it to my preferences for our site’s index page?

Vitaliy · March 1, 2018, 9:54am

I recommend to create a child-theme and make any changes there. Take a look at a theming guide:
https://pkp.gitbooks.io/pkp-theming-guide/content/en/child-themes.html
When you get yourself familiar with it - let me now, I’ll guide you through the process.

cxl · March 2, 2018, 2:49am

we are already using a child theme in our site. how do i go from there?

Vitaliy · March 2, 2018, 11:12am

If you want to use Bootstrap, just like in Old Gregg Theme, you need to download it from their site: Download · Bootstrap
Point the location of Bootstrap’s CSS and Javascript in your theme’s class (PHP file). As an example: https://github.com/Vitaliy-1/oldGregg/blob/master/OldGreggThemePlugin.inc.php#L60-L72
Assign issues (PHP objects) into Smarty template. Take a look at this method: https://github.com/Vitaliy-1/oldGregg/blob/master/OldGreggThemePlugin.inc.php#L291 Basically, you need to do the same. Although, you may want to drop these lines: https://github.com/Vitaliy-1/oldGregg/blob/master/OldGreggThemePlugin.inc.php#L265-L272 and point the exact number of latest issues to display like, say: $latestIssuesInput = 3 → you will have 3 latest issues downloaded from the database.
In case of Old Gregg theme, I’m assigning a default cover image, if the issue doesn’t have one: https://github.com/Vitaliy-1/oldGregg/blob/master/OldGreggThemePlugin.inc.php#L287 but you can skip this.
The next step is to add this method to the predefined hook: https://github.com/Vitaliy-1/oldGregg/blob/master/OldGreggThemePlugin.inc.php#L110 You can drop the constant HOOK_SEQUENCE_NORMAL without any consequences.
Th last part is to work with front-end. It is done here: https://github.com/Vitaliy-1/oldGregg/blob/master/templates/frontend/pages/indexJournal.tpl#L68 and here: https://github.com/Vitaliy-1/oldGregg/blob/master/templates/frontend/objects/issue_slider.tpl You can see there our 2 assigned variables: $latestIssues and $defaultCoverImageUrl

cxl · March 7, 2018, 3:03am

how do i install bootstrap 4? is it the same with bootstrap 3 where you extract it to the /plugins/themes folder? thank you.

Vitaliy · March 7, 2018, 5:57am

You should extract it somewhere in your theme folder and point in the main theme’s PHP file the path to Bootstrap CCS and JS relative to your theme path.

cxl · March 7, 2018, 8:03am

i already extracted the downloaded bootstrap 4 file in the themes folder. i also extracted the Old Gregg Theme in the themes folder. am i doing this right? i am very sorry for having a hard time.

Vitaliy · March 7, 2018, 9:43am

You should extract in the folder of your theme. You don’t need to install Old Gregg theme if you don’t want to use it. The example:
Bootstrap folder (the first one in the folders structure)

CSS integration

github.com

Vitaliy-1/oldGregg/blob/main/OldGreggThemePlugin.inc.php#L60


			'default' => false
		));

		// Number of Categories to display on the front page
		$this->addOption("numCategoriesHomepage", "text", array(
			'label' => 'plugins.gregg.journal.categories.label',
			'description' => 'plugins.gregg.journal.categories.description',
			'default' => 4
		));


		$this->addStyle('bootstrap', 'resources/bootstrap/css/bootstrap.min.css');
		$this->addStyle('less', 'resources/less/import.less');

		$this->addScript('jquery', 'resources/jquery/jquery.min.js');
		$this->addScript('popper', 'resources/bootstrap/js/popper.min.js');
		$this->addScript('bootstrap', 'resources/bootstrap/js/bootstrap.min.js');
		$this->addScript('fontawesome', 'resources/js/fontawesome-all.min.js');
		$this->addScript('main', 'resources/js/main.js');

		$this->addStyle(

Javascript integration:

github.com

Vitaliy-1/oldGregg/blob/main/OldGreggThemePlugin.inc.php#L70



		$this->addStyle('bootstrap', 'resources/bootstrap/css/bootstrap.min.css');
		$this->addStyle('less', 'resources/less/import.less');

		$this->addScript('jquery', 'resources/jquery/jquery.min.js');
		$this->addScript('popper', 'resources/bootstrap/js/popper.min.js');
		$this->addScript('bootstrap', 'resources/bootstrap/js/bootstrap.min.js');
		$this->addScript('fontawesome', 'resources/js/fontawesome-all.min.js');
		$this->addScript('main', 'resources/js/main.js');

		$this->addStyle(
			'my-custom-font1',
			'//fonts.googleapis.com/css?family=Lora',
			array('baseUrl' => 'https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i&display=swap&subset=cyrillic,vietnamese" rel="stylesheet'));

		$this->addStyle(
			'my-custom-font2',
			'//fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i&display=swap&subset=cyrillic',
			array('baseUrl' => ''));

		$this->addStyle(