- Application Version - e.g., OJS 3.2.1.2
- I would like to get all the journal home pages banners as slider in main index page in my theme
- I have created a default child theme and tried.
This has been discussed in the forum on various different posts through the last few years. Please see some of the forum posts here, where creating slideshows/carousels are discussed:
Hi rcgillis,
I haven’t found anything related to my preference I would like to call all journal homepage images in main index.tpl file can you please tell me exact code to get all journal homepage images to index.tpl
Not sure what do you mean by journal home pages banners but there is an example of a slider with cover images of the latest issues, displayed on the home page.
Back-end part that retrieves the issues data and assigned to TemplateManager: oldGregg/OldGreggThemePlugin.inc.php at 98f53bfb20f85b9af35246ec02e9b7fa43eac5e7 · Vitaliy-1/oldGregg · GitHub
The front-end part: oldGregg/indexJournal.tpl at 98f53bfb20f85b9af35246ec02e9b7fa43eac5e7 · Vitaliy-1/oldGregg · GitHub
It’s based on the Bootstrap’s carousel component: Carousel · Bootstrap v4.6
I mean retrieve journal homepage image from backend to journals listing page, PFA.
It should be easier as the data regarding journals is already assigned to the homepage of multi-journal installations. Thus, no back-end code for data retrieval is needed.
You can override the indexSite.tpl from a child theme. I think you already noticed the iteration through journals that is happening there: ojs/indexSite.tpl at stable-3_3_0 · pkp/ojs · GitHub and how the path for images is constructed: ojs/indexSite.tpl at stable-3_3_0 · pkp/ojs · GitHub
Does this help?
Hello Vitaliy,
Thank you very much for your fast response I have tried like this, but after that iteration journals list is not loading.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{iterate from=journals item=banner}
{assign var="homepageImage" value=$banner->getLocalizedData('homepageImage')}
{if $homepageImage}
<div class="carousel-item active">
<img class="d-block w-100" src="{$journalFilesPath}{$banner->getId()}/{$homepageImage.uploadName|escape:"url"}"{if $homepageImage.altText} alt="{$homepageImage.altText|escape|default:''}"{/if}>
</div>
{/if}
{/iterate}
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Yes, it’s likely the case that this kind of objects can be iterated only once in 3.2.1 (it’s DAOResultFactory)
One of the options could be to retrieve the needed data during the first iteration without exposing it. E.g., initialize empty area: Variables | Smarty (see Defining Arrays), append needed data to it: {append} | Smarty and then iterate through it like an array: {foreach},{foreachelse} | Smarty
The other option could convert journals from DAOResultFactory to array with toArray() method, either on a back-end or inside the template. The latter will look something like: {assign var='journals' value=$journals->toArray()}. Then iterate like a usual array.
Hello Vitaliy,
I tried but still not working can you please send me sample code.