How to insert hyperlinking anchors throughout an OJS 3.1.2 site (system links inclusive)?

Software Support
21

I didn’t mean globally changing. I meant just revealing in the backend the complete URLs of all the links (as already implemented in case of Navigation Menu’s Added Items), instead of just path slugs (as in case of Static Pages) or totally hidden links (as in case of Navigation Menu’s original OJS items). That should do it, without risking to mess up the code. But you are right of course: while this is a suggestion for a temporary solution, a global solution would be best, as it would take care of Archives as well.

22

Internally, OJS maps a controller function against a URI. This URI will be a native OJS URI (thus without a user-generated fragment or other modification). This URI is utilized in the native OJS navigation menu items. It is not as if the URI is hidden; it is just mapped directly against the OJS path.

You can Remote URL navigation menu items, so instead of thinking of it in terms of changing built-in URIs, perhaps the approach could be to hide the native NMI, and create a new Remote URL NMI with the full path to the internal URI you want, with the fragment.

23

Could you suggest a solution to hide the OJS NMI and create a replacement RMI? I’m assuming you meant JS, becasue this says it can’t be done with .htaccess since only browsers can make an operationfunction actionable, servers can’t.

24

This would be done manually, by editing the menus.

Settings → Website → Navigation Menus → Primary Navigation Menu → Edit
Then drag the default items to “Unassigned”, and add new RMIs.

25

That would take care of a few links, but what about those which are natively called as well, such as past volumes/archived papers? A navigation menu with 1000s of links doesn’t seem like a desirable solution to me. I was hoping that by “global solution” you meant some ready-made JS function of yours tailored for OJS.

26

I don’t have a ready-made javascript function for this, but a jQuery template might look like:

$(document).ready(
  function () {
    $('a[href*="www.mydomain.com"]').each(
      function () {
        $(this).attr('href', $(this).attr('href') + "#myAnchor");
      }
    );
  }
)

This is untested and would need refinement.

27

I tried it and also varied it a bit, especially the domain part, for various scenarios, but couldn’t get it to work via the Custom Header Plugin (tried both panels).

In addition to taking care of the archives, a working code must also handle the search results (return them always with the same anchor), and properly handle the post-login and post-registration scenarios as well by appending the anchor to them. Also taken care of should be subscriptions, as well as breadcrumbs’ links.

Which brings me to: (1) how do you edit the breadcrumbs links manually?, and (2) how do you invoke breadcrumbs (make them show) in Static Pages as well? Is there some magic HTML piece of code you can just paste in a static page’s Source code view and make the respective breadcrumb show up stating the current (Static Page’s location) correctly?

28

I found a client-side (javascript) solution for automatically scrolling to an anchor on page load, which works for OJS 3.1.2. I put this script at the top of the upper panel of Custom Headers Plugin:

<script type="text/javascript" language="javascript">
    function moveWindow (){window.location.hash="#your-tag";}
</script>

and this in our theme’s <body> tag (see this post about how to find a theme’s <body> tag):

<body onload="moveWindow()">

Here is another useful javascript for greatly speeding up the anchor-jumping on internal links such as Navigation Menu Added Items in OJS 3.1.2 (put this code in the upper panel of Custom Headers plugin also, but do not edit this code as it only needs the “#” character, not your entire anchor tag):

if (window.location.href.indexOf('#') == 0) {
    let hash = window.location.href.split('#')[1];
    let hashTop = document.querySelector(`#${hash}`).offsetTop;
    window.scrollTop = hashTop;
}

The above three pieces of code handle all of the main requirements of anchor-linking in OJS 3.1.2 (internal anchor-linking, auto-redirect to anchor after subscribing/logging in/registering/searching, as well as archives browsing, etc.). Of course, this is a temporary solution which works if java is enabled in a browser (most browser nowadays by default).

Other issues remain unsolved: breadcrumbs (a shortcut HTML for transplanting breadcrumbs into Static/Custom Pages would be great, something like in WordPress!), and backend styling (colors primarily).

29

Breadcrumbs are formulated within the system when browsing issues and articles. For the relevant templates, see:

These are called from the article.tpl:

Or the issue.tpl:

Other pages, for example editorialTeam.tpl, don’t have a similar assumption of a hierarchical structure, and so they don’t include breadcumbs:

Similar templating could be used for any arbitrary page, to (for example) created breadcrumbs out of the navigation menu structure (or similar).

30

But the editorialTeam.tpl which you pasted above does actually include a breadcrumb:

{include file="frontend/components/breadcrumbs.tpl" currentTitleKey="about.editorialTeam"}

and I can confirm that Editorial Team in our installation of OJS 3.1.2 indeed includes a breadcrumb!

I appreciate your developer’s two cents, but not a developer here. In short, I was hoping that you could (1) provide us with a breadcrumb code to paste into a static/custom page, and obviously (2) tell us first where static and custom pages are located so that we can insert that code, as well as (3) explain if you would please how to know which of those listed breadcrumbs is best suited for a static/custom page? By a custom page, I mean a page you can create under Add Item → Navigation Menu Type → Custom Page.

31

Indeed. It looks like even the non-hierarchical pages get breadcrumbs. Thanks for pointing that out.

To add breadcrumbs into the Custom Navigation Menu Items, you would modify or override this template (within lib/pkp):

Given that most other public facing pages have breadcrumbs, this might be a good thing to pull request back into the core code.

Similarly, the template for Static Pages is here (within plugins/generic/staticPages):

Almost certainly the generic breadcrumb template, which you identified earlier, would be the most appropriate for these, but you would use the currentTitle parameter, rather than currentTitleKey:

{include file="frontend/components/breadcrumbs.tpl" currentTitle="$title"}

Conveniently, the variable $title is used for the translated page title in each calling template.

1 Like
32

Thanks, that worked on static pages! We don’t have any Navigation Menu custom pages created so I didn’t test it on them but as you say it would probably work there also.

Another thing we forgot is announcements. However, inserting your above call into /lib/pkp/templates/frontend/pages/announcement.tpl displays the breadcrumb with Home / (the root) portion of the path only. It doesn’t recognize the localized title, and so doesn’t display the full path. I tried a few variants of $title but to no avail. Any hints on how to make every announcement’s respective breadcrumb display the full path, including the title of the current announcement?

Secondly, would it be possible to also insert breadcrumb into the search page as well as each search result page with the path correctly stating the respective search term as (the title of) the current location? Alternatively, just the “Home /” part would do on search results pages.

33

Per the header call:

the localized title will be $announcement->getLocalizedTitle().

The currentTitle (if translated) or currentTitleKey (if a locale key) passes the title from the calling template to the breadcrumbs template. The only reason $title worked in the previous instances was that each template used that variable as the title:

If you were dealing with a locale key rather than a translated locale string, you would pass this as an argument to currentTitleKey rather than currentTitle.

You can extend this same strategy to the search results.

1 Like
34

Thanks, but using this returns only the local page title, not the full path, so now the path looks like this:

Home / Name-of-the-Announcement

with the central (and clickable!) part Announcements / missing altogether?

Regarding extending the same strategy to the search results, where to find the search page and search results pages so we can insert your code?

35

I don’t think any of the existing breadcrumbs templates are suitable to add the “Announcements” component as a second level (https://github.com/pkp/ojs/blob/master/templates/frontend/components/breadcrumbs_catalog.tpl might come closest), but you can create a new template. A good location might be in “lib/pkp/templates/frontend/components”

The search page uses that same generic breadcrumbs template:

So, customization would require a new template here as well.

If you are familiar with Git, I would recommend creating an issue and pull request with this work for standardizing the breadcrumbs. I think it could be a valuable contribution back into the product.

1 Like
36

Thanks, but creating new templates and Git projects is beyond my abilities.

So why isn’t the search page showing the breadcrumb despite calling for it, like all other pages now do (both call and show)? Now Search remains as the only page that doesn’t display its breadcrumb. I tried many variations of the above, but the breadcrumb remains a no-show in search.

One more question please: how to edit just the header text of the EditorialTeam page into simply “Editors” but without changing any nomenclature in the OJS structure (the file name, variables, etc.)? Can you generally change/translate output string in OJS using a filtering function in config.inc.php, like it can be done in WordPress and other platforms?

37

What specific page are you looking at, and what theme are you using when you don’t see the breadcrumbs on the search page?

The search/ URI and the search/search/ URI both show the breadcrumbs for me in the Default theme.

The locale key “about.editorialTeam” is specific to this page and is used in the navigation menu and page title. If you are OK with this being changed to “Editors”, you can update the translation(s). If you only want to change the page title and to leave the menu entry as-is, you would need to edit the key and create a new Remote Menu Item with the old phrase, or edit the source files to use a new key.

38

Neither search nor search/search show the breadcrumb in Bootstrap 3 theme after its latest (May) update. To be honest, I’m not sure if it used to show it before the update.

How do we update translations?

By the way, whenever I create or update a Navigation Menu’s added item its title disappears in both backend and frontend. You then have to manually re-enter the title in the Title field of the added item’s form. Is there a quick fix for this bug?

Another bug: whenever accessing Settings->Website the sidebar blocks get shuffled so their order is changed. You then have to reorder them by dragging into desired positions. This is annoying. Is there a fix for that bug?

39

Let’s keep this topic related to the navigation menu anchors and breadcrumbs.

For the Navigation Menu title issue, see this thread:

For information on updating translations, see:
https://docs.pkp.sfu.ca/translating-guide/en/2-3-editing-existing#using-the-translation-plugin-tool

For the bug on sidebar blocks, can you open a new thread in the forum, describing exact steps to reproduce the issue?

1 Like
40

Duly noted, but you replied to all other issues from my last post except the one about breadcrumbs (on search pages).

The fix you provided for Navigation Menu’s added items/custom pages losing title upon creation or edit has worked. Thanks!

As for translation, your link is about installing a new plugin. But that seems too much of a burden on our OJS installation just for translating one term (two words). Can you please answer a previous question: is it generally possible to change/translate a single output string in OJS using a filtering function in config.inc.php, like it can be done in WordPress and other platforms?

There’s no steps to recreate, you simply access Settings->Website and the sidebar blocks are reordered.

1 Like