Slideshow in homepage OJS 3.0.2.0

Software Support
1

I am trying to put slideshow in homepage in order to make site more appealing. But, I do not get js code active.
I reference it but it doe snot get active. is there anything OJS which prevents js to be activated?

Thanks

2

Hi @vvucic,

Where are you putting the code? Have you inspected the source of the resulting page to see whether the code you’ve entered is being properly presented?

Regards,
Alec Smecher
Public Knowledge Project Team

3

I have put code in TinyMce editor (in source). I also tried to reference it so I put it in /plugins/themes/default/js/my.js
In either case it did not work since it displayed only images with captions below each other. Obviously it did not take js code which should make images slide after each other.
Please advise.

Thanks

4

The tinymce input is definitely sanitized so adding javascript that way is to my knowledge not possible.

In my opinion the best way to do this is the create a theme plugin and load the javascript from there. You could create a child theme based on the theme you use and build the slideshow functionality there. Other option is to create a slideshow plugin that you could use with any theme. Alec will probably have other suggestions as well.

5

Greetings,

I was thinking about bootstrap carousel implementation: http://getbootstrap.com/javascript/#carousel
It may be coded in the child theme and needs some coding in the smarty back-end to make it comfortable to work with.
But it is really a lot of affords for supporting.

1 Like
6

Please check this
link

with possible sample of code.
Do we have to submit css part in site, html part in editor and/or javascriupt ans separate file and reference it in html?

Maybe solution is on that path?

Thanks

7

Sliders can be simply coded if front-end (html, css, client-side javascript). But in this case placing new slides for editors will be a headache.
Ideally you need to create a plugin, that would help to handle this task from admin panel. I can see it through creating an array in php, that will include a link to image and a link to text. But I am working in Java for now, so don’t know much about php.

8

@vvucic - for me i simply create new slider in child theme and using new slideshow.tpl or tpl file and include it in frontend/pages/indexJournal.tpl. i added some php code for me to show it only in selected journal.

see here: http://bisuonlinejournals.com/index.php/agdabicon

hoping someone can make a plugin for it.

9

can you share the code for it?

thanks

10

i will update first the code, , by the way i don’t use child theme for it. It was in the bootstrap theme 3.

11

Even better if it is in Bootstrap theme. I use Bootstrap theme.

Thanks

12

Hello i deleted the sample code, cause im am working how to implement it in OJS 3, my journal is upgraded from ojs 2.4.x to ojs 3.x i found the difference of table, in ojs 2.4.x i use table “roles” but here in ojs 3.x no table “roles”. sorry for inconvenience.

13

@lewfolui please is it possible to share your code for the slideshow? I’ll be grateful.

Thanks
Suadik Abu

14

I have not made slideshow. I will try to make it new version of OJS and I will let you know as soon as I will make it.

Thanks

15

This is my sample code see in my github
GITHUB stylesheet and basic slideshow

One of my example is here, currently i am using it offline.

I am trying to create a plugin for slider but i don’t know how to start so i make simple php in my childtheme plugin. it is static slider. if you have more than one journal just copy/edit the code journal1.tpl and you must know the ID of the journal.

16

Hi @lewfolui
Thanks for your share, just to clarify how to use it
Do you add the codes stylesheet-and-image-slider-ojs3.1-using-bootstrap-3/slider.tpl at master · coloftech/stylesheet-and-image-slider-ojs3.1-using-bootstrap-3 · GitHub in your indexJournal.tpl?

17

@kawahyu yes i include it in indexJournal.tpl

i suggest to check how i used it in my coloftechThemePlugin. or if you dont used any themeplugin, create an slider.tpl and include int in indexJournal above the if homepageImage

{include file="frontend/pages/slider.tpl"}


{if $homepageImage}
	<div class="homepage_image">
		<img src="{$publicFilesDir}/{$homepageImage.uploadName|escape:"url"}" alt="{$homepageImageAltText|escape}">
	</div>
{/if}

i am currently working on how i will automatically create a slideshow in every journal.

Temporary try this
coloftechThemePlugin
A. How to use it?

clone/download and extract the zip file.
copy the whole folder of coloftech to plugins/theme
open your journal website and change to coloftech (child theme)
B. How to edit the image slider?

inside coloftech folder go to /templates/frontend/pages
Find the journal1.tpl and edit the information
Open slider.tpl and change the id # to you journal id number
C. How to check what the journal id number of your active journal?

add this code {$journalId } inside the journal1.tpl or between this line
Journal Editors {$journalId }
D. What if you have more than one journal?

Just create new tpl file and name it in your desired name or like this journal2.tpl then follow step C.

if you have your own theme plugin

just copy this code inside yor plugin

function getActivejournal(){

	$journalId = 0;

	$journalInfo =& Request::getJournal();
	if($journalInfo != NULL){			
	$journalId = (int)$journalInfo->getId();
	}

	$this->assign('journalId',$journalId);
}

and this to indexJournal.tpl or just create another tpl file like me (slider.tpl and journal1.tpl)\

slider.tpl

/* This line is remove in my updated coloftechthemePlugin*/
{php}
coloftechThemePlugin::getActivejournal();
{/php}
/* end of this line is remove in updated coloftechthemePlugin*/

{if $journalId eq 1} {get the ID of active journal}

{include file="frontend/pages/journal1.tpl"}

{/if} {end of get the ID of active journal}

journal1.tpl
the bootstrap3 carousel code

hope this help everyone.

18

Hi @kawahyu
Just added a slider to the Old Gregg theme with latest issues (on the journal main page). Also in the theme appearance menu have added the possibility to change the number of latest issues to display. You can check the commit:
https://github.com/Vitaliy-1/oldGregg/commit/e8662e2489e0b81541a8f13a7af48237359e2a82

2 Likes
19

Hello guys just added automatic editorial team slider in indexJournal.tpl

demo: https://www.coloftech.com/ojs3/index.php/demo/index