Hi,

I would like to display an icon together with a link in a custom menu I've created. I don't know how to realize this. Can someone help me out please?

This is what I've done so far:

  • created a new menu (URL path: menu-blog-categorieen)
  • created a flat taxonomy list
  • added an extra field in order to upload the icon (manage fields tab)
  • added links to the menu + uploaded an icon for each link
  • created a new block that displays the new menu

Now I was hoping to see the icon together with the normal textual link. Unfortunately that was not the case. Only the textual links where displaying. So I'm wondering what to do now. I've experimented to use a custom template in a theme, but I was not able to form the correct file name (block--menu--blog-categorieen.tpl.php is what Ihave so far). Searching on the Internet and this forum I got confused. I don't know what to edit. Do I need to create a custom template at all or do I have to change a theme somewhere? So many options and so many settings possible. I was hoping if someone can help me out pointing me out to the right solution.

I'f more context is needed, please let me know.

Comments

Anonymous’s picture

Hello,

What about displaying the icon as a background image through CSS?
You should have some distinct classes in each link to pull that off.

Although if it is a menu with many links - or if they'll be updated very often -, this will probably be a bad idea.

Good luck.

lextof’s picture

Hi, thanks for the reply. Unfortunately I would like to let the system be flexible. I'm not the one that will do content management, so it must be flexible. This means adding a taxonomy item later on will force css styling afterwards in your solution. Hope someone else has also an idea?

Gr. Alex

grient’s picture

I'm not sure if I understand your approach, but there are basically three ways that I could think of that let you customise urls.

1) As already mentioned, add a CSS background to each url. You probably going to need http://drupal.org/project/menu_attributes

2) Add a new content type. Add a link field and a image upload field. Query your links with Views. However, this approach might be resource intensive; I'm not sure. You'll probably need http://drupal.org/project/link.

3) (This might be similar to your approach) Add an upload field to a new vocabulary. Don't forget to enable the image under the manage display tab.

Hope this helps!

Christopher James Francis Rodgers’s picture

Sample targeting of *.pdf files, and links-site-wide.

a[href$=".pdf"]{
	padding-right: 50px;
	background: url(../_images/pdf_icon.gif) no-repeat right center;
}
a[href^="http://"] {
	padding-right: 20px;
	background: url(../_images/external_link.gif) no-repeat right center;
}

===

PDF image: http://great-grandma.com/temp/pdf_icon.gif

External Link image: http://great-grandma.com/temp/external_link.gif

To download the image files above:

RIGHT-mouse-click the link, and in the drop-down menu that appears:

  • If you use FireFox select "Save Link As...".
  • If you use Internet Explorer select "Save Target As...".


All the best; intended.
-Chris (great-grandpa.com)
___
"The number one stated objective for Drupal is improving usability." ~Dries Buytaert *