Describe the issue or problem
Hi everyone, so I was tasked to update a OJS3.3 deployment in my company and one of the modifications they want is to make the archive list into a grid, which isn’t really that difficult I think. If I’m not mistaken, it’s in the issueArchive.less (did I get that right?). But my current small problem (small problem because it’s not really part of the request, it’s just me wanting to be prepared for some future work or maybe I’ll add/use it myself to add some additional info on the page) is I don’t know where the code handling the displaying of that exact page is. I wanted to check what stuff can I display on that page if ever the requestor wanted to add some stuff later on. I haven’t used Vue before, but I got a bit of experience with Angular which is somewhat similar to it. But OJS’s codebase doesn’t look like the one’s on the documentation and searching for the terms like “issue_summary” doesn’t give me anything that leads to the actual code that I’m looking for. So I thought I’d just go start here to ask for some help.
What application are you using?
OJS 3.3.0.11
issueArchive.less is correct. You can use e.g. CSS flexbox to achieve a grid layout.
For extensions, you find the Smarty Template for the issue archive in {ojsroot}/templates/frontend/pages/issueArchive.tpl
Please note that changes in templates affect all journals in multi-journal installations.
If you have a multi-journal installation and individual themes for each journal, you can create also a templates directory in the respective theme plugin and create the same directory/template file structure as above. The templates in the theme plugin then override the global ones in {ojsroot}/templates.
Hi, thanks for the info. I already tested changing the UI directly on the browser (lol) just to test stuff out, and was able to create some decent layout and the requestors already approved of it. Now, it’s the first time I’ve “heard” of Smarty Template thingy. I did see it inside the lib folder, but that’s about it. Could you point me to some tutorials about that? How does those templates get called/used by php or js? Because I did find that those .tpl files seems to be the one “building” the layout, but can’t figure out how they get loaded. I’ll try to find some stuff about it, but my mileage may surely vary as I don’t really know what I’m looking for.
After checking out this tutorial, I think I already figured out how Smarty works. After reading the part that mentions .display(), everything fell into place, I didn’t even read the other stuff below. I searched for the codes that call .display() that also references issue_summary.tpl, and found it was in issueHandler.inc.php, which I was already suspecting was involved in handling the archives, but I’m just not exactly sure about it and I wanted to understand how everything exactly works.
The requestors didn’t mention that they want a multi-journal setup, so I guess they wouldn’t mind if I “break” issueArchive.tpl. But if ever they want to have a different layout for different journals, what is the best way to have multiple .tpl files for the same layout? There should be a way to get a reference to the selected journal and use that to switch the to be loaded .tpl. But is that the proper way of doing it? I could think of hacky ways of doing stuff, but if there’s a better way, then I’d rather do that
I think I have outlined the solution above. Make the template part of the theme plugin. For each journal, create an individual theme plugin.
Otherwise, you would have to create something like {if $journalTitle == ‘journalxyz’} branches in your central templates, provided that the variable $journalTitle has been passed by the calling template.
See https://docs.pkp.sfu.ca/pkp-theming-guide/en/html-smarty.html and https://docs.pkp.sfu.ca/pkp-theming-guide/en/template-variables .