Group archive issues by year

0lyans · September 21, 2023, 3:31am

Hello! I would like to display the archive by year with an opening list. Example: https://www.cambridge.org/core/journals/bulletin-of-symbolic-logic/all-issues
Or like this: https://ite.auezov.edu.kz/index.php/engineering/issue/archive

Can you tell me how I can change this in the existing IssueArchive code?

{**
 * templates/frontend/pages/issueArchive.tpl
 *
 * Copyright (c) 2014-2020 Simon Fraser University
 * Copyright (c) 2003-2020 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * @brief Display a list of recent issues.
 *
 * @uses $issues Array Collection of issues to display
 * @uses $prevPage int The previous page number
 * @uses $nextPage int The next page number
 * @uses $showingStart int The number of the first item on this page
 * @uses $showingEnd int The number of the last item on this page
 * @uses $total int Count of all published monographs
 *}

{capture assign="pageTitle"}
	{if $prevPage}
		{translate key="archive.archivesPageNumber" pageNumber=$prevPage+1}
	{else}
		{translate key="archive.archives"}
	{/if}
{/capture}
{include file="frontend/components/header.tpl" pageTitleTranslated=$pageTitle}

<main class="page page_issue_archive">
	<div class="container-fluid container-page">

		{include file="frontend/components/headings.tpl" currentTitle=$pageTitle}

		{* No issues have been published *}
		{if empty($issues)}
			<div class="no_issues">
				<p>{translate key="current.noCurrentIssueDesc"}</p>
			</div>

		{* List issues *}
		{else}
			<div class="flex_container issues_list">
				{foreach from=$issues item=issue}
					<div class="issue_item">
						{include file="frontend/objects/issue_summary.tpl"}
					</div>
				{/foreach}
			</div>

			{* Pagination *}
			{capture assign="prevUrl"}
				{if $prevPage > 1}
					{url router=$smarty.const.ROUTE_PAGE page="issue" op="archive" path=$prevPage}
				{elseif $prevPage === 1}
					{url router=$smarty.const.ROUTE_PAGE page="issue" op="archive"}
				{/if}
			{/capture}
			{capture assign="nextUrl"}
				{if $nextPage}
					{url router=$smarty.const.ROUTE_PAGE page="issue" op="archive" path=$nextPage}
				{/if}
			{/capture}
			{include
				file="frontend/components/pagination.tpl"
				prevUrl=$prevUrl|trim
				nextUrl=$nextUrl|trim
				showingStart=$showingStart
				showingEnd=$showingEnd
				total=$total
			}
		{/if}
	</div> <!-- end of a container -->
</main>


{include file="frontend/components/footer.tpl"}

rcgillis · September 21, 2023, 12:52pm

Hi @0lyans,

Can you please indicate which version/branch of the code you’re working from (e.g. 3.4.0-3)?

Thanks,

Roger
PKP Team

mpbraendle · September 21, 2023, 1:24pm

Or like this? https://www.chimia.ch/chimia/issue/archive

You need to modify two templates (I just include the changed code, you may figure out yourself where to insert)

templates/frontend/pages/issueArchive.tpl

                {* CHIMIA CHANGE CHIMIA-3 2021/03/08/mb pubyear navigation *}
                <div class="issues_archive_navigation">
                        {foreach from=$issues item="issue"}
                                {assign var=pubyear value=$issue->getYear()}
                                {if $pubyear != $lastYear}
                                        <a href="#{$pubyear}" class="pubyearnavig">{$pubyear}</a>
                                        {assign var=lastYear value=$issue->getYear()}
                                {/if}
                        {/foreach}
                </div>
                {* END CHIMIA CHANGE CHIMIA-3 *}

                <ul class="issues_archive">
                        {* CHIMIA CHANGE CHIMIA-3 2021/03/08/mb group by year *}
                        {assign var="issueCount" value=0}
                        {assign var="hideDescription" value=0}
                        {foreach from=$issues item="issue"}
                                {assign var=pubyear value=$issue->getYear()}
                                {if $pubyear != $lastYear}
                                        <li><h2 id="{$pubyear}" class="pubyear">{$pubyear|escape}</h2></li>
                                        {assign var=lastYear value=$issue->getYear()}
                                {/if}
                                {assign var="issueCount" value=$issueCount+1}
                                {if $issueCount > 10}
                                        {assign var="hideDescription" value=1}
                                {/if}
                                <li>
                                        {include file="frontend/objects/issue_summary.tpl"
                                         toggleButton=1
                                         hideDescription=$hideDescription
                                        }
                                </li>
                        {/foreach}
                        {* END CHIMIA CHANGE CHIMIA-3 *}
                </ul>

templates/frontend/objects/issue_summary.tpl

**
 * templates/frontend/objects/issue_summary.tpl
 *
 * Copyright (c) 2014-2021 Simon Fraser University
 * Copyright (c) 2003-2021 John Willinsky
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief View of an Issue which displays a summary for use in lists
 *
 * @uses $issue Issue The issue
 * CHIMIA CHANGE CHIMIA-3 2021/03/09/mb toggle button for issue image / description
 * @uses toggleButton  - enable / disable toggle button
 *       hideDescription hide description flag
 *}
{if $issue->getShowTitle()}
{assign var=issueTitle value=$issue->getLocalizedTitle()}
{/if}
{assign var=issueSeries value=$issue->getIssueSeries()}
{assign var=issueCover value=$issue->getLocalizedCoverImageUrl()}

<div class="obj_issue_summary">
        {assign var=issueId value=$issue->getBestIssueId()}

        {if $issueCover}
                <a id="c{$issueId}" class="cover" href="{url op="view" path=$issue->getBestIssueId()}">
                        <img src="{$issueCover|escape}" alt="{$issue->getLocalizedCoverImageAltText()|escape|default:''}">
                </a>
        {/if}

        <h2>
                {* CHIMIA CHANGE CHIMIA-3 2021/03/09/mb toggle button *}
                <div>
                        <a class="title" href="{url op="view" path=$issue->getBestIssueId()}">
                                {if $issueTitle}
                                        {$issueTitle|escape}
                                {else}
                                        {$issueSeries|escape}
                                {/if}
                        </a>

                        {if $toggleButton == 1}
                                {if $hideDescription == 1}
                                        <button id="b{$issueId}" class="toggleDescription">+</button>
                                {else}
                                        <button id="b{$issueId}" class="toggleDescription">-</button>
                                {/if}
                        {/if}
                </div>
                {* END CHIMIA CHANGE CHIMIA-3 *}

                {if $issueTitle && $issueSeries}
                        <div class="series">
                                {$issueSeries|escape}
                        </div>
                {/if}
        </h2>

        <div id="d{$issueId}" class="description">
                {$issue->getLocalizedDescription()|strip_unsafe_html}
        </div>

        {* CHIMIA CHANGE CHIMIA-3 2021/03/09/mb hide image / description *}
        {if $hideDescription == 1}
                <script>
                        $("#c{$issueId}").hide(0);
                        $("#d{$issueId}").hide(0);
                </script>
        {/if}

        {if $toggleButton == 1}
                <script>
                        $(document).ready(function() {
                                $("#b{$issueId}").click(function() {
                                        $("#c{$issueId}").toggle();
                                        $("#d{$issueId}").toggle();
                                        $("#b{$issueId}").text(function(i,v){
                                                return v === '+' ? '-' : '+';
                                        });
                                });
                        });
                </script>
        {/if}
        {* END CHIMIA CHANGE CHIMIA-3 *}

</div><!-- .obj_issue_summary -->

0lyans · September 21, 2023, 1:26pm

Sorry for not writing the version in advance. OJS 3.3.0-15

mpbraendle · September 21, 2023, 1:28pm

Just to explain my code:

it adds navigation and grouping by year
the last 10 issues are shown with image and description
for every issue, image and description can be opened or closed via a toggle

0lyans · September 22, 2023, 2:42am

Thank you very much for your help! You helped me a lot

fgnievinski · September 23, 2023, 1:41am

related feature request:

Nuran_Akimbek · September 13, 2024, 10:33am

Hi, @mpbraendle . I also used your code for displaying the archive by year. Everything is great, but the only issue is that the toggle button doesn’t work. What do you think could be the problem?

https://journal.orleu-edu.kz/index.php/vesti-no/issue/archive

mpbraendle · September 13, 2024, 1:45pm

Hi Nuran,

I see that you are using a different theme.

In the JavaScript console log, you see an error that “$ is not defined”. This is a short name for JQuery.

If you compare the page source code of your archive page and the archive page given in the URL above, you’ll see that a few scripts (especially the JQuery library) are missing.

Your page has at the end:

<script src="https://journal.orleu-edu.kz/plugins/themes/healthSciences/libs/app.min.js?v=3.4.0.5" type="text/javascript"></script>

My page includes:

    <!-- pkp_structure_page -->

    <script src="https://www.chimia.ch/lib/pkp/lib/vendor/components/jquery/jquery.min.js?v=3.4.0.6" type="text/javascript"></script>
    <script src="https://www.chimia.ch/lib/pkp/lib/vendor/components/jqueryui/jquery-ui.min.js?v=3.4.0.6" type="text/javascript"></script>
    <script src="https://www.chimia.ch/plugins/themes/chimia/js/lib/popper/popper.js?v=3.4.0.6" type="text/javascript"></script>
    <script src="https://www.chimia.ch/plugins/themes/chimia/js/lib/bootstrap/util.js?v=3.4.0.6" type="text/javascript"></script>
    <script src="https://www.chimia.ch/plugins/themes/chimia/js/lib/bootstrap/dropdown.js?v=3.4.0.6" type="text/javascript"></script>
    <script src="https://www.chimia.ch/plugins/themes/chimia/js/main.js?v=3.4.0.6" type="text/javascript"></script>

So, the Health Sciences theme plugin (or the Smarty template for the archive page) must be modified to include the calls to those libraries (which are part of the Default theme or modifications of it). As far as I see from GitHub - pkp/healthSciences: An official theme for OJS 3.1.1+ designed for health science journals or any journal that wants a clean, modern appearance., it doesn’t include these libraries in the js subdirectory and in the plugin itself.

See ojs/plugins/themes/default/js at main · pkp/ojs · GitHub

Nuran_Akimbek · September 27, 2024, 12:43pm

@mpbraendle Hi, thank you for your reply. I’ve discovered another problem. In the ‘Back Issues’ section, I have many journal issues up until 2013, but no more than 25 items are displayed on the archive page. I can’t figure out what this is related to. Can you help me? https://journal.orleu-edu.kz/index.php/vesti-no/issue/archive

kerimsarigul · September 27, 2024, 8:44pm

Have you checked this settings?

mpbraendle · September 27, 2024, 8:48pm

You can change:

the items_per_page setting in your config.inc.php (also increases the number of submissions displayed in the Archive tab in the backend, may slow down the backend considerably)
change the number of items per page in Website Settings > Tab Setup > Lists (has the same effect as 1, on a per journal basis)
or modify the $count variable in function archive in pages/issue/IssueHandler.php . This only affects the archive page in the frontend

I did 3) and set $count to 500