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"; 


[Timbow]

I don't know anything about joomla. I guess if you are clever you can customise the GS menu function, but if you are simple minded like me you can just do it with css, making the li s of the menu block elements and assigning background images to them by slug or by nth child.

I made two themes with menu images by slug/name if you want to copy the css: 'green clock' or 'catwalk'.

[Kevinf63]

I guess if you are clever you can customise the GS menu function, but if you are simple minded like me you can just do it with css, making the li s of the menu block elements and assigning background images to them by slug or by nth child.

I kind of understand what you mean in regards to background images, as I actually had done just that at one stage for handling CSS3 hover transitions but I switched it back to conform with Joomla better. For simplicity sake in the long run; the website is being made for a client with no web design skills, so CSS is kind of out of the question unfortunately.

Maybe a plugin exists under a name I can't find on the extend page?
Edit: Thanks again by the way!

[Timbow]

I don't think there is any existing back-end method for that.

[shawn_a]

Would need a plugin, you could use custom fields ( i think it supports image fields ), and make your template do this with some php calls and classes.

or assign the image dynamically, as all menu items have classes with the slug.
or you can use i18n custom components

but the images will have to be manually uploaded

personally , i would not use background images, i would throw a font icon set in there like fontawesome

[Kevinf63]

Would need a plugin, you could use custom fields ( i think it supports image fields ), and make your template do this with some php calls and classes.

or assign the image dynamically, as all menu items have classes with the slug.
or you can use i18n custom components

but the images will have to be manually uploaded

personally , i would not use background images, i would throw a font icon set in there like fontawesome

I think you are onto something there Shawn with the custom fields, presumably if there is a global setting for every page (apart from admin backend). I'll have to give that a bash when I have the time. If I get it working well, I'll edit the OP with some instructions.

Cheers!