Custom image for JToolbarHelper::title

For Joomla! 1.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Locked
Parvus
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 126
Joined: Fri Jul 11, 2008 9:08 pm

Custom image for JToolbarHelper::title

Post by Parvus » Fri Jul 11, 2008 9:13 pm

I try to use JToolbarHelper::title to display a title and a custom png image file.
The title works - duhuh - but the image file does not show up.

Where do those images need to reside? Can I configure this? Do I need to include something or register something somewhere beforehand? Are there size constraints?

Are these questions already answered somewhere? I could not find them.

User avatar
jwwicks
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 102
Joined: Fri Jul 04, 2008 4:49 am
Location: Sacramento, Ca

Re: Custom image for JToolbarHelper::title

Post by jwwicks » Sat Jul 12, 2008 2:12 am

Hello Parvus,
Parvus wrote:I try to use JToolbarHelper::title to display a title and a custom png image file.
The title works - duhuh - but the image file does not show up.

Where do those images need to reside? Can I configure this? Do I need to include something or register something somewhere beforehand? Are there size constraints?

Are these questions already answered somewhere? I could not find them.
A call such and

Code: Select all

JToolbarHelper::title(JText::_('Some Title'), 'generic.png');
looks for the generic.png file in the administrator/images directory. If you want yours to be displayed then you'll probably want to create a images directory for your component/module etc... and then change the call to

Code: Select all

JToolbarHelper::title(JText::_('Some Title'), JPATH_COMPONENT.DS.'com_mycomponent'.DS.'images'.DS.'mytoolbar_title.png');
Might be a shorter path statement available but couldn't find anything under JApplicationHelper::getPath. Although assuming that you have this call in a file called admin.mycomponent.html.php,

Code: Select all

class TOOLBAR_foo 
{
      function _DEFAULT(){
        JToolBarHelper::title(JText::_("My Component"), dirname(__FILE__).DS.'images'.DS.'mytoolbar_title.png');
      }
}
Should work out as well, assuming of course a com_mycomponent/images directory and a mytoolbar_title.png file in that directory...

JW

PS. I stand corrected. The code strips everthing from the icon parameter and as mentioned below you need to add a line to the icons.css file of your template such as...

Code: Select all

.icon-48-mytoobar_title         { background-image: url(../images/header/icon-48-mytoolbar_title.png); }
And your admin.mycomponent.html.php call should be..

Code: Select all

class TOOLBAR_foo 
{
      function _DEFAULT(){
        JToolBarHelper::title(JText::_("My Component"), 'mytoolbar_title');
      }
}
Thanks sectuer
Last edited by jwwicks on Sat Jul 12, 2008 5:52 am, edited 4 times in total.
Computers are useless, they can only give you answers. - Pablo Picasso

secteur
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 146
Joined: Tue Nov 08, 2005 9:32 am
Location: Malaysia

Re: Custom image for JToolbarHelper::title

Post by secteur » Sat Jul 12, 2008 3:05 am

Hi,
JToolbarHelper::title(JText::_('Some Title'), JPATH_COMPONENT.DS.'com_mycomponent'.DS.'images'.DS.'mytoolbar_title.png');
will not work because the 'generic.png' is actually not handled as an image but as a class instead. It is actually striped of the .png by the title function and used as "generic" only (see below) (my guess is that the default 'generic.png' just is the remain of some older version)

In any case, what happens is that the string you pass in the JToolbarHelper::title function is appended to 'icon-48-' to create the name of a class. So, let's say you want a special icon there, this is your code:

Code: Select all

JToolbarHelper::title(JText::_('Some Title'), 'anythingyouwant' );
Then in your template css file you add a class: .icon-48-anythingyouwant and that's where you give the path to your image.
If you're using Khepri, the file where you find these classes is /templates/khepri/css/icons.css

Hope this helps

Parvus
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 126
Joined: Fri Jul 11, 2008 9:08 pm

Re: Custom image for JToolbarHelper::title

Post by Parvus » Sat Jul 12, 2008 8:00 am

Thanks a lot!

I created a separate css file, which I added in admin.mycomponent.php with

Code: Select all

$document = &JFactory::getDocument();
$css = $mainframe->getSiteURL().'administrator'.DS.'components'.DS.'com_mycomponent'.DS.'mycomponent.css';
$document->addStyleSheet( $css, 'text/css', null, array() );
Using the css code listed above, I got it working: I just needed to give the path relative to the com_mycomponent directory.
The way the png files are handled is pretty obscure, don't you think? I'm glad it works now! Tx!

secteur
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 146
Joined: Tue Nov 08, 2005 9:32 am
Location: Malaysia

Re: Custom image for JToolbarHelper::title

Post by secteur » Sat Jul 12, 2008 9:21 am

Hi Parvus,

glad it worked out :) I have to agree with you that the default of the method stated as 'generic.png' is a bit disturbing.
Actually handling this as a class is very good because you can do so much more if you wish to (adding border, margins, and more!). It's just that default value that is misleading.
I'm quite convinced that it's only something that is left from the way the title image used to be handled. But the core developers are already doing SO much that I think we can't blame them for small small mistakes. This should probably be posted on one of the development forums as a requested correction to... what do you think ... the documentation?

Just a detail on your code:
I believe you should not use the DS constant when calling the path to a style sheet. I'm assuming you are running a Linux server if your code worked, whereby DS will be a "/" . CSS sheet are handled by HTML and therefore it's only "/", no matter what server you are on, no DS.
Also

Code: Select all

JURI::base()
can replace

Code: Select all

$mainframe->getSiteURL().'administrator'
although I'm not sure which one is considered more correct.

Again, glad things worked out.

Mat

Parvus
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 126
Joined: Fri Jul 11, 2008 9:08 pm

Re: Custom image for JToolbarHelper::title

Post by Parvus » Sat Jul 12, 2008 8:18 pm

Thank you for your details, they are greatly appreciated.

User avatar
juanparati
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 123
Joined: Thu Nov 08, 2007 6:00 pm
Location: Aarhus (Denmark)

Re: Custom image for JToolbarHelper::title

Post by juanparati » Thu Jul 17, 2008 4:42 pm

Don't try change the icon path because jwwicks is right, you must change the CSS.

I have inspect administrator/includes/toolbar.php and . . .

Code: Select all

     /**
	* Title cell
	* For the title and toolbar to be rendered correctly,
	* this title fucntion must be called before the starttable function and the toolbars icons
	* this is due to the nature of how the css has been used to postion the title in respect to the toolbar
	* @param string The title
	* @param string The name of the image
	* @since 1.5
	*/
	function title($title, $icon = 'generic.png')
	{
		global $mainframe;

		//strip the extension
		$icon	= preg_replace('#\.[^.]*$#', '', $icon);

		$html  = "<div class=\"header icon-48-$icon\">\n";
		$html .= "$title\n";
		$html .= "</div>\n";

		$mainframe->set('JComponentTitle', $html);
	}
From the code to the reality!

User avatar
juanparati
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 123
Joined: Thu Nov 08, 2007 6:00 pm
Location: Aarhus (Denmark)

Re: Custom image for JToolbarHelper::title

Post by juanparati » Thu Jul 17, 2008 7:23 pm

From the code to the reality!

User avatar
jwwicks
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 102
Joined: Fri Jul 04, 2008 4:49 am
Location: Sacramento, Ca

Re: Custom image for JToolbarHelper::title

Post by jwwicks » Wed Jul 30, 2008 10:07 am

Hello Mat,
secteur wrote:Hi Parvus,

glad it worked out :) I have to agree with you that the default of the method stated as 'generic.png' is a bit disturbing.
Also

Code: Select all

JURI::base()
can replace

Code: Select all

$mainframe->getSiteURL().'administrator'
although I'm not sure which one is considered more correct.

Mat
I've been trying to get the code to work as well. I've added the line in the admin.mycomponent.php

Code: Select all

$document =& JFactory::getDocument();
$cssFile = JURI::base(true).'/components/com_wrmswebawards/css/wrmswebawards.css';
$document->addStyleSheet($cssFile, 'text/css', null, array());
The line in the css file is..

Code: Select all

.icon-48-wrms_toolbar_title { background-image: url(../images/wrms_toolbar_title.png) no-repeat left; }
The HTML produced is..

Code: Select all

<link rel="stylesheet" href="/administrator/components/com_wrmswebawards/css/wrmswebawards.css" type="text/css" />
and

Code: Select all

<div class="header icon-48-wrms_toolbar_title">
WRMS Web Awards
</div>
The toolbar.wrmswebawards.html.php looks like..

Code: Select all

    function _DEFAULT(){
        JToolBarHelper::title(JText::_("WRMS Web Awards"), 'wrms_toolbar_title');
        JToolBarHelper::publishList();
        JToolBarHelper::unpublishList();
        JToolBarHelper::editList();
        JToolBarHelper::deleteList();
        JToolBarHelper::addNew();
    }
Verified the files are in place but no icon. Am I missing something...

Figured it out. Seems the CSS file can't have anything after the url, when I deleted the no-repeat left from the background-image: directive, all is well.

Thanks,
JW
Computers are useless, they can only give you answers. - Pablo Picasso

User avatar
mika
Joomla! Intern
Joomla! Intern
Posts: 75
Joined: Tue Aug 23, 2005 9:04 pm
Location: Kiel - Germany
Contact:

Re: Custom image for JToolbarHelper::title

Post by mika » Sat Jan 17, 2009 10:09 pm

Hello,
i will use a image with other dimension (48x112px). When i test it, the title text is written above the image. :(
It is not possible to use other dimensions as 48x48?
Has anybody a suggestion for me?

User avatar
juanparati
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 123
Joined: Thu Nov 08, 2007 6:00 pm
Location: Aarhus (Denmark)

Re: Custom image for JToolbarHelper::title

Post by juanparati » Sun Jan 18, 2009 11:57 am

Yes, you can, but must change the CSS definition of icon class.
From the code to the reality!

User avatar
nag_sunny
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 157
Joined: Sat Mar 28, 2009 6:29 am
Contact:

Re: Custom image for JToolbarHelper::title

Post by nag_sunny » Sat Jun 13, 2009 2:43 pm

Hello mika,

Just add few spaces as needed before the title as shown below:
JToolBarHelper::title("&nbsp;&nbsp;&nbsp;&nbsp;" . JText::_('your title')

Thanks,
Maverick
http://www.corejoomla.com
CjForum, CjFit, Community Surveys, Community Quiz, Community Answers, Community Polls, GPS Tools, Community Quotes, Crosswords, CjBlog

User avatar
tusker
Joomla! Ace
Joomla! Ace
Posts: 1075
Joined: Tue Dec 25, 2007 2:15 pm
Location: Baroda - India
Contact:

Re: Custom image for JToolbarHelper::title

Post by tusker » Sat Jun 13, 2009 2:54 pm

mika wrote:Hello,
i will use a image with other dimension (48x112px). When i test it, the title text is written above the image. :(
It is not possible to use other dimensions as 48x48?
Has anybody a suggestion for me?
yes, i think it can be changed.
ONE WORLD OPEN WORLD - WAR TODAY GIVE PEACE A CHANCE
http://indiavoice.info - India News & Information Portal
http://indiadaily.indiavoice.info - India Daily Infotainment

(Powered by Joomla!)


Locked

Return to “Joomla! 1.5 Coding”