Using Hyperlinked Imgs As A Navbar?

Hi folks,

This is I think my second post on the Yii forums. I have a pretty good background in PHP/web technologies. I am in the process of building a couple new websites (having only done a couple before) and I decided I would try to learn an MVC framework to expand out my skills. Well, to tell the truth, I kinda had to learn one as I needed to grasp RAD and e-commerce site best practices as one of the sites will be fairly large I think (selling various products).

Anyway, I started to learn ZEND. And I continued to learn it. Then I finally gave up as learning it was just too damn difficult. The issue was not my capacity to learn the technical side of it - the issue was that ZEND (what from point of view as an MVC newbie) is massively complex, completely unintuitive and very badly supported. I have tried and failed to get questions answered. Not difficult questions. Again, the problem seems to be that the support is just not out there. Anyway, after a hissy fit, I decided I would learn a different framework as ZEND just seemed a massive headache (and I had read posts from ZEND hardliners/contributors that they too were giving up on it and that ZF2 was even more trouble than ZF1). I had a look around on Google and kept seeing Yii as one of the highest regarded frameworks, so I thought I would give it a go.

Right from the start, I was amazed at the difference in ease of use and support there is compared to ZEND. I could spend a day studying and end the day feeling I had gotten a proper understanding of something, rather than just sitting there frustrated and confused.

Anyway, thanks to everyone that contributes to Yii and those who support the community. Even though I am still in relatively early stages with it, it seems a joy to use.

OK, why did I type that all out? Well, I would imagine I am going to have a fair few questions come up as I am just starting to develop my first real-world application in Yii. And, along with that, I will no doubt have a load of questions while I learn to master the Yii framework. What I am trying to say is that I am not coming here asking people to show me how to do everything. I have read the definite guide (twice, about to start it a third time) and the cookbook. But often I still want to fire questions to experts (or, at least, those more experienced than I!) so I can make sure I understand best practices.


So, first question…

Class ‘zii>widgets>CMenu’ is the default for creating navs.

The issue I have right now is that the top nav of the website I have already designed and am in the process of moving over to Yii uses a series of inline pngs files layed out as…

<div>

<a><img/></a>

<a><img/></a>

<a><img/></a>

<a><img/></a>

<a><img/></a>

</div>

These are icons that I designed myself and are very much a part of the style of the page. In short, they are here to stay. The img tags have a next PHP script in them to add an ‘active’ class to them if the anchor URL is that as the same name basename of the current script. The ‘active’ class simply changes the background of the img to show it is the active page.

So, the (rather long-winded) question is…

How is this best incorporated into Yii? Should it just stay as it is and are there there any implications if it does?

Hi, welcome aboard.

I see two different solutions:

1/ pure css trick (the more affordable in my opinion).

For each item that is in the menu definition array, add a ‘linkOptions’=>array(‘class’=>‘img1’) property.

in the css file add a.img1{background-image:url(path/to/img1.png)}

2/ create your own class that extend CMenu. Modify renderMenuItem so that it can add an img tag. the image reference should be declared for each item in the items array.

3/ maybe itemTemplate could do the trick too, but maybe not, I don’t know.

It should be something like that:




                'items'=>array(

                        array('label'=>'Home', 'url'=>array('/site/index'), 'itemTemplate'=>'<img src="...">{menu}'),

                        array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about'), 'itemTemplate'=>'<img src="...">{menu}'),

                        array('label'=>'Contact', 'url'=>array('/site/contact'), 'itemTemplate'=>'<img src="...">{menu}'),

                ),



^^^ Now THAT is the sort of feedback I was looking for. I will do a thorough investigation of those options tomorrow when my brain is refreshed (been studying Yii all day). Thank you very much :D

Did you get it to work the way you want ?

Hi mate,

Not had a chance yet. I have been re-reading the definitive guide and the cookbook today so I have got the whole framework worked out in my head before I really make a go at finishing off the website. I will keep you updated!

Thanks again.

Hi mate,

I ended up using the following, then just adding a background-image for :hover/.active. Thanks for your help.




<div id="mainmenu"><!-- START mainmenu -->

	<?php

	$this->widget('zii.widgets.CMenu',array(

		'items'=>array(

		

			array('label'=>'<img src="'.Yii::app()->request->baseUrl.'/images/mainmenu/home_icon.png" />', 'linkOptions'=>array(), 'url'=>array('/site/index')),

			

			array('label'=>'<img src="'.Yii::app()->request->baseUrl.'/images/mainmenu/about_icon.png" />', 'linkOptions'=>array(), 'url'=>array('/site/about')),

			

			array('label'=>'<img src="'.Yii::app()->request->baseUrl.'/images/mainmenu/gallery_icon.png" />', 'linkOptions'=>array(), 'url'=>array('/site/gallery')),

			

			array('label'=>'<img src="'.Yii::app()->request->baseUrl.'/images/mainmenu/contact_icon.png" />', 'linkOptions'=>array(), 'url'=>array('/site/contact')),

			

			array('label'=>'<img src="'.Yii::app()->request->baseUrl.'/images/mainmenu/facebook_icon.png" />', 'linkOptions'=>array(), 'url'=>array('/site/facebook')),

			

		),

		'encodeLabel'=>false,

	)); ?>

</div><!-- END mainmenu -->



I’ve learned something: you can use an imabe as label in the menu array !

Even more simplier. Well done.

Thanks :)

I appears to validate too (although the actual img tag itself doesn’t right now as I am missing ‘alt’ on it (it’s XHTML strict)) but the structure itself does.