menu with images?

[crnogorac081]

Here is my suggestion

Code Select Expand


// Generate bootstrap menu, instead show_menu2
function bootstrap_menu($array, $current_id = '', $parent_id = 0,$parents = array()){
if($parent_id==0) {
foreach ($array as $element) {
if (($element['parent_id'] != 0) && !in_array($element['parent_id'],$parents)) {
$parents[] = $element['parent_id'];
}
}
}
$menu_html = '';
foreach($array as $element) {
if($element['parent_id']==$parent_id) {
if(in_array($element['id'],$parents)) {
$menu_html .= "\t\t\t\t".'<li class="dropdown'.($current_id == $element['id'] ? ' active': '').'">'."\n";
$menu_html .= "\t\t\t\t\t".'<a'.($element['url'] != '' ? ' href="'.$element['url'].'"' : '').' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">';
if(file_exists(WB_PATH .'/templates/risk/menu_images/bg-'.$element['id'].'.png')) {
$menu_html .= '<img src="'.WB_URL.'/templates/risk/menu_images/bg-'.$element['id'].'.png" class="zastavice2"/>';
} else {
$menu_html .= '<img src="'.WB_URL.'/templates/risk/menu_images/no_image.png" class="zastavice2"/>';
}
$menu_html .= $element['title'].' <span class="caret"></span></a>'."\t\n";
} else {
$menu_html .= "\t\t\t\t".'<li'.($current_id == $element['id'] ? ' class="active"' : '').'>';
$menu_html .= '<a'.($element['url'] != '' ? ' href="'.$element['url'].'"' : '').'>';
if(file_exists(WB_PATH .'/templates/risk/menu_images/bg-'.$element['id'].'.png')) {
$menu_html .= '<img src="'.WB_URL.'/templates/risk/menu_images/bg-'.$element['id'].'.png" class="zastavice2"/>';
} else {
$menu_html .= '<img src="'.WB_URL.'/templates/risk/menu_images/no_image.png" class="zastavice2"/>';
}
$menu_html .= $element['title'] . '</a>';
}
if(in_array($element['id'],$parents)) {
$menu_html .= "\t\t\t\t\t".'<ul class="dropdown-menu" role="menu">'."\n";
$menu_html .= bootstrap_menu($array, $current_id, $element['id'], $parents);
$menu_html .= "\t\t\t\t\t".'</ul>';
}
$menu_html .= '</li>'."\n";
}
}
return $menu_html;
}

// Fetch menu items from base, note that all pages are public available.
$menu_items = array();
$qm = $database->query("SELECT * FROM `".TABLE_PREFIX."pages` ORDER BY position ASC");
if ($qm->numRows() > 0) {
while ($l = $qm->fetchRow()) {
if ($l['link'] != '') { $link = WB_URL.$l['link']; } else { $link = '';}
$menu_items[] = array("id" => $l['id'], "parent_id" => $l['parent'], "title" => $l['title'], "url" => $link );
}
}

$menu = bootstrap_menu($menu_items, PAGE_ID);
echo '
<ul class="sf-menu">
'.menu.'
</ul>';


Images should be under ROOT/templates/risk/menu_images/bg-XXX.png where XXX is PAGE_ID number

[Gast]

Great one, works great, is there any way to get rid of this error maybe? It's not really a problem but, it's an error ...

the answer is very easy: dont produce an error
from my point its not possible to set a "standard picture" (without an error) inside of the show_menu2 without a lot of changes in the include.php and in the core

[Roych]

stackoverflow is your friend...

somewhere in the template-index.php a javascript-function like

define here your no-image-file (maybe a transparent gif with the same width&height?)

Code Select Expand

<script type="text/javascript">
function imgError(image) {
    image.onerror = '';
    image.src = TEMPLATE_DIR+'/menu_images/no_image.png';
    return true;
}
</script>

in the img-tag from $aItemOpen set a onerror like

$aItemOpen      = '<li class="[class] [if(class==menu-current){active}] [if(class==menu-expand){dropdown}]">[a]<div class="zastavice"><img src="http://riskchange.eu/site/templates/risk/menu_images/[menu_title].png" onerror="imgError(this);" class="zastavice2"/><>[menu_title]</a>',

it works fine, but in produce a network-error, because the show_menu2 calls also a missing image like a icon for page xyz, if there is no icon in the folder
               

Great one, works great, is there any way to get rid of this error maybe? It's not really a problem but, it's an error ... 

[Gast]

stackoverflow is your friend...

somewhere in the template-index.php a javascript-function like

define here your no-image-file (maybe a transparent gif with the same width&height?)

Code Select Expand

<script type="text/javascript">
function imgError(image) {
    image.onerror = '';
    image.src = TEMPLATE_DIR+'/menu_images/no_image.png';
    return true;
}
</script>

in the img-tag from $aItemOpen set a onerror like

$aItemOpen      = '<li class="[class] [if(class==menu-current){active}] [if(class==menu-expand){dropdown}]">[a]<div class="zastavice"><img src="http://riskchange.eu/site/templates/risk/menu_images/[menu_title].png" onerror="imgError(this);" class="zastavice2"/><>[menu_title]</a>',

it works fine, but in produce a network-error, because the show_menu2 calls also a missing image like a icon for page xyz, if there is no icon in the folder
                

[marmot]

Hi,

... if there is no image in folder it shows me a litle no-image placeholder is it possible to get rid of this so that if there is no image it shows normal?

I'm afraid showmenu can't do that. I guess the most easy thing would be to add blank images named by the menu title if there is no menu image available.

You can also patch showmenu2 to be more clever at this problem.
Or you can do some general replacement for all broken image links on a page by javascript, droplet or output filter.
For example if query is active on your page you can use

Code Select Expand

$("img").error(function(){
        $(this).hide();
});

regards

[Roych]

Hello,
I'm trying to get images to my menu (flags) and I did so with a simple code, but the problem is that if there is no image in folder it shows me a litle no-image placeholder is it possible to get rid of this so that if there is no image it shows normal?


My code now is:

Code Select Expand



<?php
show_menu2(
        $aMenu          = 0,
        $aStart         = SM2_ROOT+1,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY,
        $aItemOpen      = '<li class="[class] [if(class==menu-current){active}] [if(class==menu-expand){dropdown}]">[a]<div class="zastavice"><img src="http://riskchange.eu/site/templates/risk/menu_images/[menu_title].png" class="zastavice2"/><>[menu_title]</a>',
        $aItemClose     = '</li>',
        $aMenuOpen      = '<ul>',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
        $aTopMenuOpen   = '<ul class="sf-menu">'
    ); ?>



Or is there any better way to do this?


Thank you very much
R