OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



Using image buttons instead of the links in the menu

General inquiries about the PKP.

Moderators: jmacgreg, btbell, michael, bdgregg, vgabler, barbarah, John

Forum rules
Feel free to post general inquiries about the PKP Here. We'll also post notes of interest from time to time. You may also want to check out the PKP blog.

Using image buttons instead of the links in the menu

Postby Astro » Tue Nov 26, 2013 12:59 am

Dear forum members, this may be a very basic question, so feel free to just direct me to other sources that may have already answered this (I searched, by did not find exactly).

What I was wondering is if it is possible to use images to work as buttons in the main template menu, instead of the usual links. For instance, using an image for the "Home" link, another image for the "Current" link, another for the "About", etc.

How would be the best to way to implement this?

Thanks in advance.
Astro
 
Posts: 12
Joined: Mon Nov 25, 2013 8:57 pm

Re: Using image buttons instead of the links in the menu

Postby asmecher » Tue Nov 26, 2013 8:32 am

Hi Astro,

This would require a template modification. The template in question is templates/common/navbar.tpl.

Regards,
Alec Smecher
Public Knowledge Project Team
asmecher
 
Posts: 8905
Joined: Wed Aug 10, 2005 12:56 pm

Re: Using image buttons instead of the links in the menu

Postby Astro » Tue Nov 26, 2013 11:36 am

Hi Alec, thanks for the information, this is a good start.

Although I am used to managing websites (specially in PHP,) I am quite a newbi to the OJS system. So let's make things a bit challenging, shall we?

So, for instance, let's take the link "About" that appears in the navbar.
It is called in navbar.tpl with the line:

Code: Select all
<li id="about"><a href="{url page="about"}">{translate key="navigation.about"}</a></li>


I get that the simple substituting of the link for an image would be:

Code: Select all
<li id="about"><a href="{url page="about"}"><img src="myimage.gif"></a></li>


Even if that is right, it creates a problem for multi-language journals, as by doing so any chosen language would display the same buttons. Is there a way to code it in order to display a different image for the "About" button depending on each of the 3 languages my journal allows for readers?

Many thanks for your time.
Astro
 
Posts: 12
Joined: Mon Nov 25, 2013 8:57 pm

Re: Using image buttons instead of the links in the menu

Postby asmecher » Tue Nov 26, 2013 11:38 am

Hi Astro,

You can use the $currentLocale smarty variable, e.g.:
Code: Select all
<li id="about"><a href="{url page="about"}"><img src="myimage-{$currentLocale|escape}.gif"></a></li>
This will request a file named e.g. "myimage-en_US.gif" for English.

Regards,
Alec Smecher
Public Knowledge Project Team
asmecher
 
Posts: 8905
Joined: Wed Aug 10, 2005 12:56 pm

Re: Using image buttons instead of the links in the menu

Postby Astro » Tue Nov 26, 2013 2:47 pm

Ah, now it sounds a really neat solution. I will implement it in the next hours to test, before giving feedback on this one. Thanks a lot for the code lines!
Astro
 
Posts: 12
Joined: Mon Nov 25, 2013 8:57 pm


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 2 guests