QUESTION I18N navigation with images or background image and text

[GuyB]

Hello,

I'm using I18N menus and would like to be able to use unique images rather than text for my menus or a default background image and the I18N menu text in front.

Can someone help me with this please?

As an enhancement it would be great to be able to either select and menu image and/or menu text for each page??
Many thanks
Guy

[mvlcek]

I'm using I18N menus and would like to be able to use unique images rather than text for my menus or a default background image and the I18N menu text in front.

You can use the I18N Custom Fields plugin, define an image field for the menu image and then use custom rendering.

[GuyB]

Hello Mvlcek,
Thanks for your prompt reply, I'll try it out.

Regards
Guy

[GuyB]

Hello Mvlcek,
Thanks for your prompt reply, I'll try it out.

Regards
Guy

Hello Mvlcek,
I've tried this and am struggling! this is what I have done..

I've created a custom field called MenuImage and set up a default image.
I've created a component called navimage with this in it:
<li class="<?php echo $item->classes; ?>">
<a href="<?php echo htmlspecialchars($item->link); ?>">
<?php echo htmlspecialchars($item->text); ?>
</a>
<?php if ($item->isOpen) { ?>
<ul><?php $item->menuimage(); ?></ul>
<?php } ?>
</li>

I've altered my template.php to this:

<ul><?php get_i18n_navigation(return_page_slug(),0,100,navimage); ?></ul>

And I keep getting error:
Notice: Use of undefined constant navimage - assumed 'navimage' in C:\vhosts

It looks I've either got the syntax wrong or the custom field isn't working correctly - any advice would be very helpful

Thanks
Guy

[Timbow]

Hi Guy this isn't what you asked exactly I know but I'll mention it anyway. I had to do something like that here:
http://www.janetphillips-weaving.co.uk/
where each menu item has a different image of fabric. It isn't done with I18N although the site does have two levels of navigation. The selection of background images in the menu items is just done with css using the page slug as a selector.

I put the theme I made for that purpose in extend in two versions with the same code, just different fonts and images as 'green clock' and 'catwalk'. Feel free to unpick it and reuse if it's any help to you. If it isn't clear how it works then ask and I will see if I can remember.[/align]

[GuyB]

Hi Guy this isn't what you asked exactly I know but I'll mention it anyway. I had to do something like that here:
http://www.janetphillips-weaving.co.uk/
where each menu item has a different image of fabric. It isn't done with I18N although the site does have two levels of navigation. The selection of background images in the menu items is just done with css using the page slug as a selector.

I put the theme I made for that purpose in extend in two versions with the same code, just different fonts and images as 'green clock' and 'catwalk'. Feel free to unpick it and reuse if it's any help to you. If it isn't clear how it works then ask and I will see if I can remember.[/align]

Hello Timbow,

Yes that would do the trick for me, how did you do that?
Thanks
Guy

[mvlcek]

I've tried this and am struggling! this is what I have done..

I've created a custom field called MenuImage and set up a default image.
I've created a component called navimage with this in it:
<li class="<?php echo $item->classes; ?>">
<a href="<?php echo htmlspecialchars($item->link); ?>">
<?php echo htmlspecialchars($item->text); ?>
</a>
<?php if ($item->isOpen) { ?>
<ul><?php $item->menuimage(); ?></ul>
<?php } ?>
</li>

I've altered my template.php to this:

<ul><?php get_i18n_navigation(return_page_slug(),0,100,navimage); ?></ul>

hanks
Guy

Remove the parentheses:

Code:

<?php $item->menuimage; ?>

(and you need to add the image tag <img ...>, as above code only returns the link, if it's an image field)

Add quotes:

Code:

<?php get_i18n_navigation(return_page_slug(),0,100,'navimage'); ?>

[Timbow]

For simple menu items with different background images. This line of css will give a default background image to menu items:

Code:

nav a {background-image:url(images/menuimg01.png);}

then for specific images for specific pages:

Code:

nav a[href*="about"] {background-image:url(images/menuimg02.png);}

Which says (in english)

for anchor elements which are children of nav, if the href contains the text "about" then the background image is menuimg02.png

[GuyB]

I've tried this and am struggling! this is what I have done..

I've created a custom field called MenuImage and set up a default image.
I've created a component called navimage with this in it:
<li class="<?php echo $item->classes; ?>">
<a href="<?php echo htmlspecialchars($item->link); ?>">
<?php echo htmlspecialchars($item->text); ?>
</a>
<?php if ($item->isOpen) { ?>
<ul><?php $item->menuimage(); ?></ul>
<?php } ?>
</li>

I've altered my template.php to this:

<ul><?php get_i18n_navigation(return_page_slug(),0,100,navimage); ?></ul>

hanks
Guy

Remove the parentheses:

Code:

<?php $item->menuimage; ?>

(and you need to add the image tag <img ...>, as above code only returns the link, if it's an image field)

Add quotes:

Code:

<?php get_i18n_navigation(return_page_slug(),0,100,'navimage'); ?>

Hello Mwlcek,
Can you explain that please about the image tag?
Thanks
Guy

---

For simple menu items with different background images. This line of css will give a default background image to menu items:

Code:

nav a {background-image:url(images/menuimg01.png);}

then for specific images for specific pages:

Code:

nav a[href*="about"] {background-image:url(images/menuimg02.png);}

Which says (in english)

for anchor elements which are children of nav, if the href contains the text "about" then the background image is menuimg02.png

Thanks very much Timbow,
That seems understandable.
Regards
Guy

[GuyB]

I've tried this and am struggling! this is what I have done..

I've created a custom field called MenuImage and set up a default image.
I've created a component called navimage with this in it:
<li class="<?php echo $item->classes; ?>">
<a href="<?php echo htmlspecialchars($item->link); ?>">
<?php echo htmlspecialchars($item->text); ?>
</a>
<?php if ($item->isOpen) { ?>
<ul><?php $item->menuimage(); ?></ul>
<?php } ?>
</li>

I've altered my template.php to this:

<ul><?php get_i18n_navigation(return_page_slug(),0,100,navimage); ?></ul>

hanks
Guy

Remove the parentheses:

Code:

<?php $item->menuimage; ?>

(and you need to add the image tag <img ...>, as above code only returns the link, if it's an image field)

Add quotes:

Code:

<?php get_i18n_navigation(return_page_slug(),0,100,'navimage'); ?>

Hello Mwlcek,
Can you explain that please about the image tag?
Thanks
Guy

---

For simple menu items with different background images. This line of css will give a default background image to menu items:

Code:

nav a {background-image:url(images/menuimg01.png);}

then for specific images for specific pages:

Code:

nav a[href*="about"] {background-image:url(images/menuimg02.png);}

Which says (in english)

for anchor elements which are children of nav, if the href contains the text "about" then the background image is menuimg02.png

Thanks very much Timbow,
That seems understandable.
Regards
Guy

Hello Mwlcek,

Can you explain about the image tag please?
Thanks
Guy

[mvlcek]

Can you explain about the image tag please?

Code:

<img src="<?php echo htmlspecialchars($item->menuimage); ?>"/>

[Inugami]

And... what if I want to put a glyphicon instead of a image???? Diferent Glyphicons for every menu item...