Add section id to TOC

Software Support
1

Hi there,

I would like to add a specific id to each section in an issue’s toc (issue_toc.tpl). Our first goal is to style each section in a different way, our second goal is to include anchor links. But clearly the id is not part of the information which is passed to the template:

 {foreach name=sections from=$publishedArticles item=section}
         <div class="section">
                {if $section.articles}
                        {if $section.title}
                                <h2>
                                        {$section.title|escape}
                                </h2>
                        {/if}
                        <ul class="articles">
                                {foreach from=$section.articles item=article}
                                        <li>
                                                {include file="frontend/objects/article_summary.tpl"}
                                        </li>
                                {/foreach}
                        </ul>
                {/if}
                </div>
        {/foreach}

I can’t add something like {$section.id}, because it won’t be recognized. So I guess I have to change something in the PHP-Files
I’m working with a child theme, I could add some lines to the PHP-File there. Could you give me some directions?

Kind regards
Daniela

2

Hi, @UBWolf.

Please be sure to be explicit about what versions and files you’re working with. This helps both those of us offering answers and helps other users to understand the context when reading the forum later.

I think you’re looking at OJS 3.x, specifically the issue_toc template (e.g. from master):

The $publishedArticles variable is populated here:

This points us to:

The index for the returned $publishedArticles variable is $currSectionId. If this is not directly accessible in Smarty, it could be added here for later use.

I strongly support this as an upstream contribution.

3

Der @ctgraham,

you are so right, of course :blush: I am working on 3.1.0.0 and I am using a duplicate of the issue_toc.tpl, which is included in my child theme, which is based on the default theme.

With your help I finally found a solution and I happily share it with you :slight_smile:

<div class="sections">
        {foreach name=sections key=currSectionId from=$publishedArticles item=section}
                <div class="section" id="sectionId_{$currSectionId}">
                {if $section.articles}
                        {if $section.title}
                                <h2>
                                        {$section.title|escape}
                                </h2>
                        {/if}
                        <ul class="articles">
                                {foreach from=$section.articles item=article}
                                        <li>
                                                {include file="frontend/objects/article_summary.tpl"}
                                        </li>
                                {/foreach}
                        </ul>
                {/if}
                </div>
        {/foreach}
        </div>

I added key=currSectionId to the foreach-line and id=“sectionId_{$currentSectionId}”.

Thank you again and kind regards
Daniela

4

If you don’t mind, please open an issue and pull request on Github for this. I think we should be adding ids and classes to everything we can in the core product.

5

I tried to do it, but I guess I did it wrong. Sorry! If you or someone else could explain to me how to do this, I will glady correct my mistake.

6

I don’t see the actual commit in the pull request. Let’s say you are currently looking at branch ‘ojs-stable-3_0_1’ and it is the HEAD commit of “abc1234”. Let’s also assume you have remotes of origin and upstream, representing your repo and the pkp repos, respectively. You could:

git fetch upstream
git checkout -b add-section-id-for-css upstream/master
git cherry-pick abc1234
git push origin add-section-id-for-css

Then open the pull request from your “add-section-id-for-css” branch in GitHub into pkp/ojs’s “master” branch.

Alternately, from scratch:

git clone ssh://git@github.com/myuser/ojs
cd ojs
git remote add upstream https://github.com/pkp/ojs
git fetch upstream
git checkout -b add-section-id-for-css upstream/master
vim templates/frontend/objects/issue_toc.tpl
git add templates/frontend/objects/issue_toc.tpl
git commit -m 'Add id attribute to TOC sections for styling'
git push origin add-section-id-for-css
1 Like
7

Hi @ctgraham,

thank you for your explanation. So far I don’t really work with GitHub and I have only some basic knowledge how this works (I am actually a librarian, not a developer :wink:). My colleagues from our IT department helped me to create the pull request: pkp/pkp-lib#3181 Add id attribute to TOC sections for styling by dastewo · Pull Request #1758 · pkp/ojs · GitHub

I hope, everything is alright now.

Kind regards
Daniela

1 Like