Can I have a nav menu of text links AND images?

[seanie_morris]

Hi all,

This would be the intended sample menu structure that I want:

|  Home (text)  |  Menu 2 (text)  |  Menu 3 (text)  |  French (.jpg)  |  German (.jpg)  |

When I created the new page French, I used the Code creation method, and tried the following code so that I could add a little French flag image instead of using text for the link:

Code: [Select]

<a href="http://www.websitename.com/wb/pages/french.php"><img src="http://www.websitename.com/wb/templates/bs_naturak/img/flag-france-small.png" alt="French language" width="34" height="34" border="0"></a>
but all that will display is the word "French". It still works as a link, but how do I get the image to display instead of the text? I confirmed the correct link to the image in my own site.

I did a search and found multiple variations as well as similar requests to mine, but with no conclusions (and most of them going back to 2008 and 2009).

Thanks,

Seanie.

P.S. I am using the bs_naturak template.

[Ruud]

The simple answer is that if you do not see the flag but just the alt text, the url to the flag is wrong.
Without a link it is impossible to say more.

[seanie_morris]

The simple answer is that if you do not see the flag but just the alt text, the url to the flag is wrong.

That's what would be the first assumption, but copying the path link to the image directly into the browser picks up the image, so I know that is not the problem...

[Ruud]

Maybe some javascript...
Maybe an addblocker or browser plugin..
Maybe a faulty serverconfiguration ..
Maybe a wrong .htacces file..
Maybe something else..

Looking at errorlogs might help..
Looking with webdeveloper tools (F12 in most browsers) might show something..

Without a link it is impossible to say more.

[seanie_morris]

Without a link it is impossible to say more.

I usually don't like showing links when I'm in 'under construction' mode, but here it is:

http://www.annaharveyfarm.com/wb

The menu call function in this particular template from index.php is:

Code: [Select]

<?php 
 
if (!isset($page_id) OR $page_id==1 OR $page_id==1) {
include('snippets/responsiveslides.php');
include('snippets/nav.php');
include('snippets/site-headline.php');
include('snippets/grids3.php');
} else {
include('snippets/nav.php');
}

include('snippets/playground.php');
include('snippets/2col-content.php');

?>[code]

and the piece doing the calling for the menu in nav.php is:

[code]<div class="menu">
<?php echo $topnav; ?>
</div>
I tried the show_menu2() variations and no joy (I didn't expect it to work anyway, as this template is doing a different calling).

[seanie_morris]

Without a link it is impossible to say more.

I usually don't like showing links when I'm in 'under construction' mode, but here it is:

http://www.annaharveyfarm.com/wb

The menu call function in this particular template from index.php is:

Code: [Select]

<?php 
 
if (!isset($page_id) OR $page_id==1 OR $page_id==1) {
include('snippets/responsiveslides.php');
include('snippets/nav.php');
include('snippets/site-headline.php');
include('snippets/grids3.php');
} else {
include('snippets/nav.php');
}

include('snippets/playground.php');
include('snippets/2col-content.php');

?>
and the piece doing the calling for the menu in nav.php is:

Code: [Select]

<div class="menu">
<?php echo $topnav; ?>
</div>
(Sorry for those of you doing a search in the future for a similar problem but not using a similar template, the subsequent solutions MIGHT not work for you!)

I tried the show_menu2() variations and no joy (I didn't expect it to work anyway, as this template is doing a different calling).

[Ruud]

I assume the flags you are talking about are the ones in the footer of the website.
They are looking fine to me.. Tested in FF, Chrome, IE, Edge

There are some strange things however..

1. All country landing pages (like: /wb/pages/fre.php ) are giving a status 500 (Server error), but the pages are served fine.
This points to some server or .htaccess fault.

2. There are some "lost </div>'s" in the output.
Use Firefox, do Ctrl-U (source view) and look for red </div> lines.

3. A script is loaded that generates a 404 error (not found).
/wb/templates/bs_naturak/js/responsive-slider.js does not exist.

(edit: you can always remove the url in your previous posts if you do not want it shown anymore)

[seanie_morris]

Wow, none of those errors show up for me, and the pages do load fine (using FF too). Plus, the icons in the footer are the larger versions.

Remember, when i created the top menu items for the pages FRE, GER, ITA, NED and SWE, I created the page as 'Code', then added the section WYSIWYG for the content. The Code section has the:

Code: [Select]

<a href="http://www.websitename.com/wb/pages/french.php"><img src="http://www.websitename.com/wb/templates/bs_naturak/img/flag-france-small.png" alt="French language" width="34" height="34" border="0"></a>relevant for each language button I want displayed, but it's not showing the image icon.


All links and pages check out fine in Chrome just now, with no cache on the website in question - I never got any 404 errors! 

All country landing pages (like: /wb/pages/fre.php ) are giving a status 500 (Server error), but the pages are served fine.
This points to some server or .htaccess fault.

No errors showing up for me, are we looking at the same website?

There are some "lost </div>'s" in the output.
Use Firefox, do Ctrl-U (source view) and look for red </div> lines.

Saw those, was just too lazy to comb for them - now fixed.

A script is loaded that generates a 404 error (not found).
/wb/templates/bs_naturak/js/responsive-slider.js does not exist.

That 404 error you speak of should relate to the file ../js/responsive-slider.js which I have corrected (a fault in the template's downloaded files, not my own code).

Thanks for the input Ruud, second pairs of eyes are always handy.

[seanie_morris]

(edit: you can always remove the url in your previous posts if you do not want it shown anymore)

I can't, the 'Modify' option expires after only a matter of minutes after a post is submitted!

[Ruud]

About the errors:

Use the F12 tools to see the networking errors.
This screen-shot is taken with Windows10 Edge..

It seems to be working fine, but I can imagine the search-engine spiders will think it is not good.

[Ruud]

...relevant for each language button I want displayed, but it's not showing the image icon.

Currently it has no images in the top menu.
Can you "reset" the menu to the point it should show the image?

[crnogorac081]

You can use if in show_menu2 code:

Code: [Select]

In show_menu2 find line for
$aItemFormat    = '
[if(page_id==X1){[a]<img src=" .WB_URL ."/media/flags/[menu_title].gif />[/a] }]
[if(page_id==X2){[a]<img src=" .WB_URL ."/media/flags/[menu_title].gif />[/a] }]
[if(page_id==X3){[a]<img src=" .WB_URL ."/media/flags/[menu_title].gif />[/a] }]
',
Under /media folder , create folder flags, and inside put images fre.gif, ger.gif ...etcc

Find page_id in Pages for page fre.php and replace X1 with its number.
Do the same for other pages for which you have images name.gif under /flags,  and dont forget to put as menu lines as you need in  $aItemFormat  (code above)...

I hope it helps.. If you dont know how to do it contact me via pm, ill help you  out and we will post the correct code on forum..

cheers

[DarkViper]

another solution:

Code: [Select]

<?php
    show_menu2(
        $aMenu,
        $aStart,
        $aMaxLevel,
        $aOptions,
        '[li][a][if(target==_self){<img src="'.WB_URL.'/templates/'.TEMPLATE.
        '/flags/[menu_title].gif" alt="[menu_title]">}else{[memu_title]}]</a>',
        '[/li]',
        '[ul]',
        '[/ul]',
        false,
        false
    );

This solution needs no modification in the PHP-code if something (more/less
pages and so on) becomes changed.
To toogle a menu item from text to icon in first step simply place the icon
in the (new) subfolder templates/#my_template#/flags/ with the same filename
as the [menu_title] and extension i.e. '.gif'
As second step switch the target of the page from 'top frame'(default) to 'self frame'

that's all.... have fun.

Manuela

[crnogorac081]

Not sure why Manuela, but the code is not producing images.. *(there was a typo in else{[meNu_title]} but still it was not working )

I was playing with a code and here is a solution:

open nav.php (from bs_naturak/snippet) and replace $open with

Code: [Select]

$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]" class="pid[page_id]">[menu_title]</a>}]';


Notice I added class="pid[page_id]"  with which we will match menu items to replace with images.

Now locate line

Code: [Select]

$topnav = ob_get_contents();

and add line below it:

$topnav = preg_replace('/<a (.*?) class="pid(5|6)">(.*?)<\/a>/', '<a $1><img src="'.TEMPLATE_DIR.'/flags/'.strtolower("$3").'.png" /></a>', $topnav);


Notice pid(5|6) ! 5 and 6 are page_id-s for which we need images. so you can add more and separate with pipe |   for example  5|6|10|25|100

in bs_naturak create folder /flags and put images there. Image names must be same as menu name but lowercase eg: if menu name is Ger image is   ger.png   

cheers,
I.

[seanie_morris]

 

open nav.php (from bs_naturak/snippet) and replace $open with

Code: [Select]

$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]" class="pid[page_id]">[menu_title]</a>}]';


Notice I added class="pid[page_id]"  with which we will match menu items to replace with images.

Now locate line

Code: [Select]

$topnav = ob_get_contents();

and add line below it:

$topnav = preg_replace('/<a (.*?) class="pid(5|6)">(.*?)<\/a>/', '<a $1><img src="'.TEMPLATE_DIR.'/flags/'.strtolower("$3").'.png" /></a>', $topnav);


Notice pid(5|6) ! 5 and 6 are page_id-s for which we need images. so you can add more and separate with pipe |   for example  5|6|10|25|100

in bs_naturak create folder /flags and put images there. Image names must be same as menu name but lowercase eg: if menu name is Ger image is   ger.png

This is the solution that worked, thanks crnogorac081! Though, I did have to put the full website path in instead of '.TEMPLATE_DIR.'/flags to get it to work, but it works!

I can also remove the Code section of the pages in question and have just the WYSIWYG section as where relevant, the snippet for nav.php does the trick.

Thanks also Ruud and DarkViper for the input!

Is it worth putting up a sticky to highlight this little hack? It seems to have worked without errors for me, and I know from past history looking back on a search on these forums that it popped up a lot in the past with most threads still 'open' with no solution.

Seanie.

P.S. If a Mod can add [SOLVED] in the thread/topic title, that would be great!

[crnogorac081]

I would suggest you to use css to push images little up.

[seanie_morris]

I would suggest you to use css to push images little up.

Yep, working on the padding etc., it's under construction, so I am tinkering with it all day. The template has so many 'navbar-xxx' properties and css files for it to use, it's a great template, but is heavy on coding and styling.

[crnogorac081]

here it is:

Code: [Select]

.nav > li > a > img { max-width: none; margin-top: -10px; }


[seanie_morris]

here it is:

Code: [Select]

.nav > li > a > img { max-width: none; margin-top: -10px; }


Got it! Thanks for the help guys, it seems to be all good from here.