WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Roych on July 16, 2016, 03:16:32 PM

Title: menu with images?
Post by: Roych on July 16, 2016, 03:16:32 PM

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]


<?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

Title: Re: menu with images?
Post by: marmot on July 16, 2016, 06:52:32 PM

Hi,

Quote from: Roych on July 16, 2016, 03:16:32 PM

... 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 (https://css-tricks.com/snippets/jquery/better-broken-image-handling/) if query is active on your page you can use

Code: [Select]

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

Title: Re: menu with images?
Post by: Gast on July 17, 2016, 02:24:43 AM

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]

<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

Quote

$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
                

Title: Re: menu with images?
Post by: Roych on July 17, 2016, 04:10:13 PM

Quote from: jacobi22 on July 17, 2016, 02:24:43 AM

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]

<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

Quote

$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/ (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 ...  ;D

Title: Re: menu with images?
Post by: Gast on July 18, 2016, 01:29:29 PM

Quote

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

Title: Re: menu with images?
Post by: crnogorac081 on July 21, 2016, 02:13:41 AM

Here is my suggestion

Code: [Select]

// 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