Showing posts with label bootstrap. Show all posts
Showing posts with label bootstrap. Show all posts

Wednesday, January 25, 2012

[ZF] Translating a page's title

So it's been a while, eh? Happy New Year (and Chinese New Year, while we're at it)!

For a project, we're finally in testing phase and all of a sudden, I point something out that looks wrong: the translator works perfectly... except for the page titles. By that, I mean the following tag:
<title>Title</title>
 
What gives? Well, my understanding is that the translator is not yet set in the Bootstrap when the
$this->view->headTitle($label);
is called.

The first thing I tried? Adding the translate() method to it:1
this->view->headTitle($this->view->translate($label));

... that didn't work at all. Simply no change. Great.

Then I put my thinking cap on (it's still early in the morning), and thougt this through. First of all, here is how the main parts of my Bootstrap file are laid out:
- Register plugins
- Register routes
- Prepare navigation (menus, prepare breadcrumbs, and set page title)
- Prepare translation
- Configure e-mail settings for sending stuff
- Prepare the view

Now this little brain of mine decided to kick in this morning, and made me realize: what if we prepared the translation before setting some text on the output page?

So there I am, moving the _initTranslate() method up a little, right over the _initNavigation(). Just leave the line of code that includes the translate() method ([1] above) when setting the page's title, and as long as $label is defined in your language file(s) and the translator is set correctly, shazam, it'll work like a beauty!

Final trick: you can prepend (or append, I guess) anything to your head title! In your _initView() method, be sure to do the following:
$view = new Zend_View();
$view->doctype('XHTML1_STRICT'); // Or whatever
$view->headTitle('Client - ');

// Add more settings here if needed

$view_renderer = Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer');
$view_renderer->setView($view);

return $view;
 
By doing this, all your pages' titles will look like "Client - Translated page title". Awesome, isn't it?

Monday, June 20, 2011

[ZF] Adding ("current/active/highlight" and/or other) class to menu item

So I had this menu that finally decided to generate correctly from an XML file, cool. Now I thought of the two following thigs:
  1. Show which tab is active depending on the page
  2. Add icons to the tabs
... and I wanted to implement this in the bootstrap file to make later changes easier.

1. Adding CSS class to current menu element
For the first item, nothing better than to head over to Stack Overflow, as usual. As you can see in there, all you need is:
$uri = $this->_request->getPathInfo();
$active_nav = $this->view->navigation()->findByUri($uri);
$
active_nav->active = true;
$
active_nav->setClass("active");

However, this won't work in the bootstrap because the request parameters aren't available yet. If you have a menu generating like this, it's very likely you already have a method for generating it in your bootstrap file (e.g.: _initNavigation()). To access the request parameters and find the path info, add this beforehand:
$this->bootstrap('frontController');
$front = $this->getResource('frontController');
$front->setRequest(new Zend_Controller_Request_Http());


Then, just arrange the previous code to find the correct data:
$uri = $front->getRequest()->getPathInfo();

And there we go, the "active" class will be added to whichever tab you are on.

But wait, what if I wanted to add custom icons for each tab?

2. Adding icons to menu tabs
So you've tried adding the image to the label, like so:
<label><img src="/image/nav-1.png" alt="nav-1" />User</label>
... but it doesn't work.

The trick is rather easy, just add some stuff in your CSS file as a class, and add the following node to your XML file (I guess you could easily adapt it if you're loading data from an array):
<class>nav-1</class>

Only there's a slight problem: if you are on the active tab, the bootstrap will override the class and set it to "active".

I've actually found the solution on the first try (nice guess, I admit). In the bootstrap (see code above), just get the tab's current class and add "active" to it:
$current_class = $active_nav->getClass() . ' ';
$active_nav->setClass($current_class . 'active');


That's all there is to it, you can now have a dynamic and beautiful menu!