SOLVED Icons for Navigation Menu links?

[Kevinf63]

Question:

I'm attempting to make the switch from Bulky Joomla to GetSimple CMS, on first glance it seems to tick all the right boxes, but I have one small question before I jump on the boat.

Is it possible to assign individual image (img) elements to a list/menu item similarly to the way you would do it in Joomla's backend? ie. Adding a custom home icon to home link like shown in my attached photo.

Thanks in advance!

In case the attached file doesn't work:




Potential Solution:

Introduction:
Right so, I tried out what shawn_a suggested below which was using a plugin with custom_fields to assign an icon/image to specific pages and use PHP or some other code to shim them in. Problem is it doesn't allow you to return a field from a specific page, but rather only the page you are currently visiting. This means all the icons in the menu list will show the one icon related to the current page.

There is however a quick, yet dirty way of getting this work without any plugins. I say dirty because it's somewhat efficient in that you never use an external plugin or JavaScript but its far from perfectly customizable, and you are editing key system files related to GS CMS, therefore if something goes wrong make sure you have multiple backups of the CMS and files edited. I will update this again, if I put together a tasty (and preferably GUI) plugin solution to doing this, but the focus is primarily on my thesis this year!


Instructions:

• Firstly backup your entire site, in case of a catastrophe!
  
• Using persumably FTP, find your theme_functions.php in the /admin/inc directory.
  
• Back that up too, can't have that file getting corrupt or goodbye website!
  
• Open the file for editing and search for get_navigation, you should now be highlighting the function.
  
• Copy the code below and replace the function with this modified one.
  
• (Optional) Add more file types or extensions to suit your needs in the $imgExts array.
  
• Change the $icon variable to suit your directory needs, save the changes and close.
  
• Name your images after the slug (page url) name. Upload to specified directory.
  

Copy the following PHP code:

PHP Code:

function get_navigation($currentpage,$classPrefix = "") {

    $menu = '';

    global $pagesArray;
    
    // Kevin F - Just initializing array and img tag outside the loops
    $imgExts = array('.png','.jpg','.gif');
    $imgTag = '';
    
    $pagesSorted = subval_sort($pagesArray,'menuOrder');
    if (count($pagesSorted) != 0) { 
        foreach ($pagesSorted as $page) {
            $sel = ''; $classes = '';
            $url_nav = $page['url'];
            
            // Kevin F - Change the $icon variable to suit your directory needs            
            foreach($imgExts as $ext) {
                if(is_file(GSDATAUPLOADPATH . 'img/' . $page['url'] . $ext)){
                    $icon = '/data/uploads/img/' . $page['url'] . $ext;
                    $imgTag = '<img src="'. $icon .'" alt="'. $page['title'] .'">';
                    break; // File found! break out of loop...
                } else {
                    $imgTag = ''; // Add no img element as there is no image...
                }
            }
            
            if ($page['menuStatus'] == 'Y') { 
                $parentClass = !empty($page['parent']) ? $classPrefix.$page['parent'] . " " : "";
                $classes = trim( $parentClass.$classPrefix.$url_nav);
                if ("$currentpage" == "$url_nav") $classes .= " current active";
                if ($page['menu'] == '') { $page['menu'] = $page['title']; }
                if ($page['title'] == '') { $page['title'] = $page['menu']; }
                
                // Kevin F - The menu variable below has been modified to cater for icons and alt name
                $menu .= '<li class="'. $classes .'"><a href="'. find_url($page['url'],$page['parent']) . '" title="'. encode_quotes(cl($page['title'])) .'">'. $imgTag .'<span class="link-title">'.strip_decode($page['menu']).'</span></a></li>'."\n";
            }
        }
        
    }
    
    echo exec_filter('menuitems',$menu);
} 


Explanation:
Essentially what I have done is edited the get_navigation function within the theme_functions.php file (located at /admin/inc/) which normally returns an unordered list; that being the navigation bar or menu you have, by adding an extra img element into each li element.

• The source of the img tag is governed by the string variable $icon.
  
• The img element itself is defined with the variable $imgTag.
  

These can be seen below:

PHP Code:

// Kevin F - Change the $icon variable to suit your directory needs            
foreach($imgExts as $ext) {
    if(is_file(GSDATAUPLOADPATH . 'img/' . $page['url'] . $ext)){
        $icon = '/data/uploads/img/' . $page['url'] . $ext;
        $imgTag = '<img src="'. $icon .'" alt="'. $page['title'] .'">';
        break; // File found! break out of loop...
    } else {
        $imgTag = ''; // Add no img element as there is no image...
    }
} 


These consist of concatenated lines of text to make up the location and creation of the image element for that specific page. As you can see in the code above, I stored my icons in a folder called img in the uploads directory. The images must be named after the $page['url'] output (ie. the slug). All my icons will be PNG for alpha transparency sake, but with the help of shawn_a I managed to concoct a nice file type extension check for ease of use.

The $imgTag string above is referenced in the $menu string that basically forms the list element for each page and concatenates them under one string. This has been modified from the original to cater for the image icons, with the alt attribute being equal to the page title ($page['title']) and the link text is now inside a classed span for my theme's styling.

You can see the $menu string in the code below, which has been separated onto new lines for clarity sake:

PHP Code:

$menu .= 
'<li class="'. $classes .'">
<a href="'. find_url($page['url'],$page['parent']) . '" title="'. encode_quotes(cl($page['title'])) .'">
'. $imgTag .'<span class="link-title">'.strip_decode($page['menu']).'</span>
</a>
</li>'
."\n";