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.
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:
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
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
.
Always happy to use this forum 
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!
Hi @David_Alarcon_davidy
Would you mind to share your journal url? I want to see the change by that codes
1 Like
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
@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
You need to add
<script src="/plugins/themes/default/owlcarousel/owl.carousel.min.js"></script>
at the bottom of the footer.tpl