By d.deman on

I have been trying to figuere out how to get a different icon image for every link in my secondary menu. That way every link has it's own personal icon.

Now I could change the image name to a number and then just print $variable.".jpg"; in a loop.
But.....the problem is that I would like to be able to assign an icon to a link in the admin area. That way you can easily change or add a link withour having to change the icon name or anything like that.

Maybe there is a plugin to do this....I looked but couldn't find anything.

Thanx for your help.

⋅ Categories: Drupal 4.7.x

Comments

nedjo’s picture

nedjo
he/him/his
Primary language English
commented

see http://www.nicklewis.org/node/843

d.deman’s picture

d.deman commented

Thanx Nedjo that is what I wanted, except that I have to change the css when I want to add or remove a link.
Is there any way I could have this integrated into the admin area so that people other than me can add and remove links.

Thanx

d.deman’s picture

d.deman commented

Well I found a better way(for me) to change the icon images without users touching the css.
I wanted the icon images to appear for the secondary links. So I coded the folowing into page.tpl.php

<div class="submenu">

<?php foreach ($secondary_links as $link): ?>
<?php if(ereg ("<a ([^>]+)>(.*)<\/a>", $link, $linkarray)) : ?>

<a <?php print $linkarray[1] ?> style="background-image:url('files/<?php print $linkarray[2]; ?>.jpg'); background-repeat:no-repeat; background-position: 10px 50%;">
<?php print $linkarray[2] ?>
</a>

<?php endif; ?>
<?php endforeach; ?>

</div>

With this code I break the $link variable(which contains the secondary link) up into an array named $linkarray. This array contains three things;
$linkarray[0] = the whole link
$linkarray[1] = the link properties
$linkarray[2] = the link title

Now that I have broken up the link I can add whatever code I want to.
Instead of having to change the css, which you don't want other users besides yourself to do, you can add the style in the link. This way the icon will appear exactely once 10 pixels from the left in the middle of the link. Because the icon is the background of the link you can still have hover effects or other background color effects without the icon disappearing.

To make this work you also have to change the style for every secondary link in the css. I didn't hard code this into page.tpl.php because it is the same for every secondary link and then you can still have hover effects and otherwise the link will be huge. You don't want to change the class of the link....because this way you can have different css effects for the active link. Just add this to your style.css

DIV.submenu A				{width:180px; color:#336699; text-decoration:none; display:block; padding-top:35px;  padding-bottom:35px; padding-left:90px;}
DIV.submenu A:hover			{background-color:#F9FAFA;}
DIV.submenu A.active			{width:180px; color:white; background-color:#CFD8D6;}
DIV.submenu A.active:hover		{color:#336699; background-color:#F9FAFA;}

All you would have to do when you add another secondary link is put an image in the files folder(make a files folder in your root first) and name it the same as your link title. Make sure it's a .jpg extension. If all your icons have a .gif extension then just change

background-image:url('files/<?php print $linkarray[2]; ?>.jpg');

to

background-image:url('files/<?php print $linkarray[2]; ?>.gif');

in your page.tpl.php

hekat’s picture

hekat commented

Hi,

here is a short summary of my solution: (example on http://www.parentis.net )

template.php:

function parentis2_menu_links($links) {
  if (!count($links)) {
    return '';
  }
  $output = "<ul class=\"imgmenu\">\n";
	$l2i['pattern'] = '/<a ([^>]+)>(.*)<\/a>/';
  foreach ($links as $index => $link) {
    $output .= '<li';
    if (stristr($index, 'active')) {
      $output .= ' class="active"';
			$index = preg_replace('/-active/', '', $index);
    } 
		$output .= '>';
		$l2i['replacement'] = '<a \1><img src="/themes/parentis2/img/'.$index.'.jpg" alt="'.$index.'" /><span>\2</span></a>';
		
		$output .= preg_replace($l2i['pattern'],$l2i['replacement'],$link);
		$output .= '</li>';
  }
	unset($l2i);
  $output .= '</ul>';

  return $output;
}

page.tpl.php:

<div id="leftside">
		  <?php if (isset($primary_links)) { ?>
				<h2 class="hide"><?php print t("Primary Links:")?></h2>
				<?php print theme('menu_links', $primary_links) ?>
			<?php } ?>
</div>

style.css:

/***** Main menu *****/
ul.imgmenu {
	width:135px;
	margin:0 0 18px;
	padding:0;
	list-style:none;
}

ul.imgmenu li {
	width:135px;
	height:60px;
	vertical-align: middle;
	padding:0;
	display:block;
	/*border: 1px solid #000;*/
}
ul.imgmenu li a {
	width:135px;
	height:50px;
	color:#505050;
	font-weight:bold;
	margin-bottom:10px;
	/*padding:15px 1px 15px 2x;*/
	display: block;
	/*border: 1px solid #0F0;*/
}


ul.imgmenu li a img {
	float:left;
}

ul.imgmenu li a span {
	float: left;
	margin-top:15px; 
	margin-right: 5px
}

ul.imgmenu li a.active {
	color: #b1b1b1;
}

ul.imgmenu li a:hover,ul.imgmenu li a.current {
	color:#808080;
	
}

TIA for comments and improvements. Heiko

Dubber Dan’s picture

Dubber Dan commented

Resurrecting an old thread as it looks like what I want to do, ut I have a question.

Where do you call in the different images for each link in that code? Is it a separate image for each link item, or is it one image that contains them all that is then offset depending upon the link item?