Visualização combinada Visão plana Exibição em árvore
Tópicos [ Anterior | Próximo ]
toggle
pawan chauhan
Images/Icons in Navigation Bar
15 de Novembro de 2012 00:47
Resposta

pawan chauhan

Ranking: Junior Member

Mensagens: 75

Data de entrada: 8 de Outubro de 2012

Mensagens recentes

Hi All,
I am using liferay 6.1.
I am trying to put images in place of text in the navigation bar for the pages that i have added.
Can anyone please guide me how to do this.

Regards,
Pawan chauhan.
Oliver Bayer
RE: Images/Icons in Navigation Bar
15 de Novembro de 2012 00:53
Resposta

Oliver Bayer

Ranking: Liferay Master

Mensagens: 883

Data de entrada: 18 de Fevereiro de 2009

Mensagens recentes

Hi Pawan,

if you want to customize the menu create a custom theme and apply your changes into menu.vm. Otherwise if you've meant the breadcrumb create a hook and put your modifications there.

HTH Oli
pawan chauhan
RE: Images/Icons in Navigation Bar
15 de Novembro de 2012 02:27
Resposta

pawan chauhan

Ranking: Junior Member

Mensagens: 75

Data de entrada: 8 de Outubro de 2012

Mensagens recentes

Hi Oliver,
Thanks for the quick reply.
Yes i have created a customized theme according to the requirement.
Now when i add a new page, a text appears on the navigation bar(for example "welcome"), clicking which i move to that page.
I want to replace that text with an image.
Kindly help.

Regards,
Pawan Chauhan.
Oliver Bayer
RE: Images/Icons in Navigation Bar
15 de Novembro de 2012 08:38
Resposta

Oliver Bayer

Ranking: Liferay Master

Mensagens: 883

Data de entrada: 18 de Fevereiro de 2009

Mensagens recentes

Hi Pawan,

no problem emoticon.

Ok, creating a new theme is the right way to do it. Now you have to copy the original "navigation.vm" (in my first post I've written menu.vm which is wrong, sorry for the mislead) to your "theme-folder \ _diffs \ templates" folder. There you will find the following at line 23:
1<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>

Replace it with sth like that:
1<a href="$nav_child.getURL()" $nav_child.getTarget()><img src="/path-to-your-image/image.jpg" /></a>

Greets Oli
pawan chauhan
RE: Images/Icons in Navigation Bar
15 de Novembro de 2012 21:43
Resposta

pawan chauhan

Ranking: Junior Member

Mensagens: 75

Data de entrada: 8 de Outubro de 2012

Mensagens recentes

Hi Oliver,

Thanks again for the reply.
But i am afraid that what i want to do is a little more complex, I dont want all the links in navigation bar as images. some of them will be text (like "welcome" or "wiki") and few will be images.
Is that possible, Please Advise.

Regards,
Pawan Chauhan
Oliver Bayer
RE: Images/Icons in Navigation Bar
16 de Novembro de 2012 01:07
Resposta

Oliver Bayer

Ranking: Liferay Master

Mensagens: 883

Data de entrada: 18 de Fevereiro de 2009

Mensagens recentes

Hi Pawan,

for this requirement I would use custom attributes. Define a custom attribute for the type "page" e.g. as text field. Into this text field you can save the image-url for each page individually. Now you have to modifiy the navigation.vm to check if a custom attribute/ image path has been set for the page and use the url as img src value. Otherwise print the page title.

HTH Oli
pawan chauhan
RE: Images/Icons in Navigation Bar
16 de Novembro de 2012 06:02
Resposta

pawan chauhan

Ranking: Junior Member

Mensagens: 75

Data de entrada: 8 de Outubro de 2012

Mensagens recentes

Hi oliver,
Thanks again for the reply.
But i can't actually follow that post. I am a little new to Liferay, can you please be a little more explicit with the reply.
where do i define the custom attribute and how do i put that condition in navigation.vm.
Please explain in detail.
Thanks in advance.

Regards,
Pawan Chauhan.
Oliver Bayer
RE: Images/Icons in Navigation Bar
16 de Novembro de 2012 12:48
Resposta

Oliver Bayer

Ranking: Liferay Master

Mensagens: 883

Data de entrada: 18 de Fevereiro de 2009

Mensagens recentes

Hi,

ok, let me give it a try but I'm not at work atm so there can be errors in the syntax of the following code nippets emoticon. But at least you should get a good starting point where and how to implement your requirements.

1. Define the custom attribute:
  • Login, then navigate to the control panel, select "custom attributes" from the left side menu under the portal section (if I remember right).
  • Create a new custom attribute for the type "page" as text field (secret/ non indexed) named e.g. "layoutImagePath"

2. Use the custom attribute:
Go to the page management and add an image path for "page A" and leave it blank for "page B"

3. Apply the logic into the navigation.vm:
 1change
 2<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
 3
 4to sth like that:
 5<a href="$nav_child.getURL()" $nav_child.getTarget()>
 6   #set ($imagePath = $nav_child.getExpandoBridge().getAttribute("layoutImagePath"))
 7   #if ($!imagePath)
 8      <img src="$imagePath" />
 9   #else
10      $nav_child.getName()
11   #end
12</a>

If $nav_child is the current page (in database it's named layout_) then this code should work. Otherwise happy debugging emoticon.

Oli
Desmond Li
RE: Images/Icons in Navigation Bar
18 de Novembro de 2012 00:09
Resposta

Desmond Li

Ranking: New Member

Mensagens: 2

Data de entrada: 22 de Setembro de 2012

Mensagens recentes

Oliver Bayer:
Hi,

ok, let me give it a try but I'm not at work atm so there can be errors in the syntax of the following code nippets emoticon. But at least you should get a good starting point where and how to implement your requirements.

1. Define the custom attribute:
  • Login, then navigate to the control panel, select "custom attributes" from the left side menu under the portal section (if I remember right).
  • Create a new custom attribute for the type "page" as text field (secret/ non indexed) named e.g. "layoutImagePath"

2. Use the custom attribute:
Go to the page management and add an image path for "page A" and leave it blank for "page B"

3. Apply the logic into the navigation.vm:
 1change
 2<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
 3
 4to sth like that:
 5<a href="$nav_child.getURL()" $nav_child.getTarget()>
 6   #set ($imagePath = $nav_child.getExpandoBridge().getAttribute("layoutImagePath"))
 7   #if ($!imagePath)
 8      <img src="$imagePath" />
 9   #else
10      $nav_child.getName()
11   #end
12</a>

If $nav_child is the current page (in database it's named layout_) then this code should work. Otherwise happy debugging emoticon.

Oli



Where can I find the definition of "$nav_child" ?
Oliver Bayer
RE: Images/Icons in Navigation Bar
19 de Novembro de 2012 01:38
Resposta

Oliver Bayer

Ranking: Liferay Master

Mensagens: 883

Data de entrada: 18 de Fevereiro de 2009

Mensagens recentes

You can find it in the init.vm of the unstyled theme. There you'll see that the main object is $navItems which is a list of NavItem objects (portal-service: com.liferay.portal.theme.NavItem).

I think you should slightly modify my code snippet:
1#set ($imagePath = $nav_child.[b]getLayout()[/b].getExpandoBridge().getAttribute("layoutImagePath"))

So give it a try and let me know if it works.

Oli