Adding current issues to the home page - strange error

Software Support
1

Hello,

I am currently implementing a responsive jquery carousel (owl) in OJS 3 that displays the 3-5 (depending on the width of the browser) most recent issues on the home page (indexJournal).

In order to do just that I had to include same list of issues on the home page that is also included on the archives page (issueArchive).

I managed to do that by modifying the indexJournal.tpl and the indexHandler.inc. In the case of the indexJournal.tpl I added:

	<div class="owl-carousel">
		{iterate from=issues item=issue}
				{include file="frontend/objects/issue_carousel.tpl"}
		{/iterate}
	</div>

I added to indexHandler.inc:

$issueDao = DAORegistry::getDAO('IssueDAO');
$publishedIssuesIterator = $issueDao->getPublishedIssues($journal->getId(), $rangeInfo);
$templateMgr->assign('issues', $publishedIssuesIterator);

The carousel works as it should but
 the Current Issue that is also included on the home page (indexJournal) started to act up.
It displays Series (volume, issue number, year) and Title of the Current Issue but it mixes this with the Issue cover, description and publication date of the last Issue in the list of issues: a strange combination of the newest and the oldest issue.
Clearly I have made some error in the PHP, but which? Some suggestions how to improve this would be welcome.

2

Where did you add the new code into indexJournal.tpl? If it is before the stock line 61, you’ve introduced a new variable named $issue (by the Smarty statement item=issue) which will trigger the if statement there:

3

hi Clinton, you’re right. If the <div class="current_issue"> proceeds the <div class="owl-carousel"> everything behaves as it should. However, I would like to include the list of issues (= carousel) at the top of the page and not at the bottom. How do I do that? regards, Frank

4

You’ll probably want to use a different name for the iterator, such as item=myissue, and then modify your code in “issue_carousel.tpl” to use a variable of $myissue instead of $issue.

5

Always happy to use this forum :relaxed:

6

Hi! @Franklinx!..

I applied what you indicated and everything was perfect 
 but I would like to know what code was applied in issue_carousel.tpl to make the call to the covers.

Is it possible to know the code I use in issue_carousel.tpl?

From already thank you very much!

7

Hi @David_Alarcon_davidy
Would you mind to share your journal url? I want to see the change by that codes

1 Like
8

Okay, there is some work to do to get the carousel going.
First, you need to get the Owl carousel:
https://owlcarousel2.github.io/OwlCarousel2/

I have added a folder ‘owlcarousel’ in themes > default >
Here I have put the files:
owl.theme.default.css
owl.carousel.min.js
owl.carousel.css

The issue_carousel.tpl resides in template > frontend > objects

Here is the content:

{**
 * templates/frontend/objects/issue_carousel.tpl
 *
 * Copyright (c) 2014-2017 Simon Fraser University
 * Copyright (c) 2003-2017 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * @brief displays a carousel
 *
 * @uses $issue Issue The issue
 *}
{assign var=issueTitle value=$carouselissue->getLocalizedTitle()}
{assign var=issueSeries value=$carouselissue->getIssueSeries()}
{assign var=issueCover value=$carouselissue->getLocalizedCoverImageUrl()}

<div class="obj_carousel_summary">
	<div class="issue-metadata">
		<div class="issue_cover">

	{if $issueCover}
		<a class="cover" href="{url op="view" page="issue" path=$carouselissue->getBestIssueId()}">
			<img class="owl-lazy" data-src="{$issueCover|escape}"{if $carouselissue->getLocalizedCoverImageAltText() != ''} alt="{$carouselissue->getLocalizedCoverImageAltText()|escape}"{/if}>
		</a>
	{/if}

		<a class="title" href="{url op="view" page="issue" path=$carouselissue->getBestIssueId()}">
				{if $issueTitle}
		<div class="series">
			{$issueSeries|escape}
		</div>{/if}
	{if $issueTitle}
			{$issueTitle|escape}
		{else}
			{$issueSeries|escape}
		{/if}
			</a>
	</div>
	
	{* Published date *}
		{if $carouselissue->getDatePublished()}
			<div class="published">
					<span class="label"><i class="fa fa-calendar fa"></i></span>
				</span>
				<span class="value">
					{$carouselissue->getDatePublished()|date_format:$dateFormatShort}
				</span>
			</div>
		{/if}

</div></div>
2 Likes
9

@Franklinx

Thanks for the code !! it’s a great help!!
I have not been able to implement the carousel but I have followed all the steps 


I’m making a mistake but I do not know where the problem is.

I’ve added the issue_carousel.tpl page in template> frontend> objects

I’ve added the code to indexHandler.inc but I’m not sure what line to put it on (for now I’ve placed it just below line 64).

"$ IssueDao = DAORegistry :: getDAO (‘IssueDAO’);
$ PublishedIssuesIterator = $ issueDao-> getPublishedIssues ($ journal-> getId (), $ rangeInfo);
$ TemplateMgr-> assign (‘issues’, $ publishedIssuesIterator); "

I have copied the code to indexJournal.tpl page
"


{Iterate from = issues item = issue}
{Include file = “frontend / objects / issue_carousel.tpl”}
{/ Iterate}
"

I have checked all files in:

Owl.theme.default.css
Owl.carousel.min.js
Owl.carousel.css

But it does not seem to work 


Could you help me 
 What am I doing wrong?

Summary

This text will be hidden

10

You need to add
<script src="/plugins/themes/default/owlcarousel/owl.carousel.min.js"></script>
at the bottom of the footer.tpl