By beckyjohnson on

I want to add an icon bar to my site like this;http://foundation.zurb.com/docs/components/icon-bar.html

I would like to do it there way by having text wrapped in and then have an image field in the menu to upload my images to. I feel like I"ll have to just use CSS to do the image though....because the icon module doesn't accept sva files and I want to use those so that they scale well and I have found things like the below online.....but they don't work.....

function skeletontheme_menu_link__main_menu(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';
  $name = strtolower(strip_tags($element['#title']));
  // Clean up the name
  if (strpos($name, ':')) {
    $name = substr($name, 0, strpos($name, ':'));
  }
  $pattern = '/[^a-z]+/';
  $name = preg_replace($pattern, '', $name);
  // Add our classes
  $element['#attributes']['class'][] = 'menu-' . $element['#original_link']['mlid'] . ' ' . $name;
  // Ensure that our tag WON'T be filtered 
  $element['#localized_options']['html'] = TRUE; 
  // And build our link, where image is located at yourtheme/images/menu/name.png 
  $output = l('<img src="' . base_path() . drupal_get_path('theme', 'yourtheme') . '/images/menu/' . $name . '.png" alt="' . $element['#title'] . '" />', $element['#href'], $element['#localized_options']); return '<li>' . $output . "</li>\n";

Does anyone have any ideas on how to conquer this?
Rebecca

Comments

Jeff Burnz’s picture

Jeff Burnz commented

That code is pretty bad, for one if the site owner changes a menu title it will break and that could happen inadvertently without them even realising it, i.e. why use the $name for the image name, why not use the mlid, its right there as a class as well and it never changes.

I would just use CSS to be frank, I see no value in using img elements, e.g. with CSS you can use a sprite. The only plausible reason I would give to not use CSS background images is to use an svg sprite and <use> element, because you can get pretty good control over the svg image with CSS alone with this method, however that is a pretty darn advanced method and not that great backwards compatibility.

tl:dr use CSS background images.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
beckyjohnson’s picture

beckyjohnson commented

Thanks for replying. I finally figured out what was going on with that code and tried to implement it....And I noticed all the problems you mentioned. So I am not going to use it. the thing is, I would really love to use the zurb icon bar formula, because it scales down so well, but I am going to take your advice and use a CSS sprite because that is what I know how to do right now.

Rebecca

Jeff Burnz’s picture

Jeff Burnz commented

Yeah, but, using image elements have nothing to do with scaling, background images or font-icons can scale also, you can use svg as background images, or icon fonts set with :after or :before etc.

To be fair that code will work fine, but needs a cleanup to be safer for the site owner, I just wouldn't do it, I don't see much reasons for such complexity in todays websites and its ideal to reduce http requests which only background images with sprite, svg sprite and <use> element method, or webfont icons can provide.

Good luck!

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.