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:
<?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
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
$("img").error(function(){
$(this).hide();
});regards
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?)
<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
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?)
<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
QuoteGreat 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
Here is my suggestion
// 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