• Cat-like Typing

Joomla! Dev – Admin Component Menu Image

When we build something, we like to make it look good. In some circles, this extra effort to make something better or go above and beyond the expected minimum is called “polish.” Products which function well and show great attention to detail are described as “polished.”

Now let’s say you and I are building a Joomla! component. We want the people using it to regard it as polished. We want the component to look as good as it works. We already know it will work amazingly well because we’re the ones building it (and we’re awesome) so let’s focus on making it look at little better. An easy way to make a component look a little more stylish is by adding a custom menu image. For example, let’s have a look at this screenshot:

We can easily notice that DOCman has its own custom menu image while the rest have the generic Joomla! component image. It looks pretty good and really stands out compared to the rest. Of course, if we make our own component, we end up with it looking like this:

Well, we have a component but the image is the Joomla! generic one. We need to figure out how to change it to a custom image which might be tough but we already have a great example in DOCman so we’ll analyze where the image comes from and how DOCman got its image there to do it ourselves.

We need to know where the image is coming from and the answer lays within the jos_components table. Among all the various columns in the table, we find the column called “admin_menu_img” and that’s exactly what we’re looking for. All the generic ones have “js/ThemeOffice/component.png” while DOCman has “http://blahblahblah/administrator/components/com_docman/images/dm_documents_16.png” in its field.

Now that we know where the image is coming from, the rest is pretty easy from here (because we’re awesome). We need two things: a query to put our image in that field and a way to call that query during installation. To understand how to do the first part properly, we must understand the second.

Joomla! has a section in its installer.xml marked with “” which represents files that will be called during installation. These allow you to do fun and interesting things like what we’re doing. First let’s make a file and put it in there.

In the install.xml:

<installfile>install.com_catliketyping.php</installfile>

Next we create our file in the admin folder and our image in the images folder. The folder structure should look about like this:

com_catliketyping > admin > install.com_catliketyping.php
com_catliketyping > admin > images > softwyre_16.png

Now let’s fill in our php install file:

<?php
defined('_VALID_MOS') or die('Restricted access');
define( '_CLT_INSTALLER_ICONPATH', JURI::root().
  'administrator/components/com_catliketyping/images/');
 
function com_install() 
{	
	global $database;
 
	$database->setQuery("
		UPDATE #__components 
		SET admin_menu_img = '
			"._CLT_INSTALLER_ICONPATH.
			"softwyre_16.png' 
		WHERE name='Cat-Like Typing'");
	$database->query();
 
	return true;
}
?>

Let’s stop for a moment and look at what just happened here:

Line 1: Start PHP.
Line 2: Die if someone is maliciously accessing this script
Line 3-4: Let’s get the path to our images folder (post-installation)
Line 6: We define the function called during installation – com_install
Line 8: We get our global database variable
Line 10-15: This is the query that will set our component’s image to the chosen one
Line 16: We query the database
Line 18: We return true because all went well (no error testing for now)

And that’s it. If we reinstall our component, we see our menu now looks like this:

Other things to note are that the image is 16×16 (pixels) and that it should probably be on a matching grey background or possibly transparent.

Enjoy your custom menu images!