Imagemenu for Drupal 7 (patch attached for those that need it)

My suggestion would be that the module (in D7 at least) adds options to the existing menu system rather than offering a new type of menu as is the case now. It would create a more 'integrated' experience.

Menu settings could allow administrators to configure which menus are image-enabled and which imagecache setting should be used for each image-enabled menu. Menu-items in image-enabled menus would offer the option to add an image and a mouse-over image in addition to the text or replacing the text altogether (immediately addressing http://drupal.org/node/786204). Drupal7 is pretty savvy with images now that imagecache has been built in!

Database-wise... maybe add three extra columns to the drupal_menu_links table, two pointing to the relevant imachecache entry/id (called 'imagepath' and 'mouseover' now) and one to save whether text should be shown or not? Also add two columns to drupal_menu_custom, one to hold data whether a menu is image-enabled and one to hold data about the imagecache preset to use for a particular menu.
When uninstalling it would not be that hard to simply delete the columns from the table leaving the 'standard' menu structure in place?

Other things which may be useful are fields for custom css classes, an option for inline or list layout, etc. However, I would focus on getting the basics up and running first. :)

Wow, never really looked at menu editor... looks great!

However, it looks like menu editor only changes how existing options are presented and doesn't really add additional features to the menu system? This means that making imagemenu a plugin for menu editor would create a dependency that doesn't really reduce the effort which needs to put into this module anyway. That said, I do see how imagemenu + menu editor provides a much better user experience.

I wouldn't create a dependency unless menu editor already offers some building blocks and reduces the effort needed to develop imagemenu for D7. I would make menu editor highly recommended though!

+1

Even if it works exactly as before just having it work is all I ask for - i just need image based menus (on pretty much every site i build at least one of the menus are designed that way) and think it's absurd that it still isn't here in 7.

My other sites are all still on 5, so my one suggestion may have already been fixed since i last used imagemenu, but what I would like to see is for the mouseover image to be the one used for the active page. In the version i used with 5 this was not the case which means you can't tell what page you're currently on.

Cant we just do a rough dev port to 7 with the same features? Sure its great to have things we like to add but at the moment something is better than nothing.

subscribe

+1

+1

+1

+1

subscribe

subscribe

subscribe

Subscribing

Subscribing

need this !!!

@nothinghere

I also thought that I needed this, as I wanted to upgrade a site using it from D6 to D7. However, I could manage even better using 'menu_attributes' and some sprite css : http://12bar.kg

subscribing

This would be great to have in D7, and I like the ideas in #1 .
I'm gonna start with some research on this.

Might take me while, but I think I'll give it a go.

Since I need this module for 2 projects I made something similar for D7.
I'm not quite good at drupal's bureaucracy so I'll attach it here.
Still are lot of things which can be done, but it's good enouch for me. There is admin page to chose which menu, to use or not mouse over, preload images, replace menu title, default images. Images are added on menu item edit form, are stored in file_managet table and are tied to menu links by records in file_usage tables. hook_preprocess_menu_link is used to replace menu links with images, so this module will not work with menus displayed with theme_links

@dscutaru

Thanks for getting this started.

Every thing seems to be working the way that I need it to, except that I can't get the images to change on hover. When I go to edit the menu link, I upload the two images and then click on save. But then if I go back in only the first image is still listed, and it doesn't look as though I've uploaded the second image (for the mouseover) at all.

Looking into my database, I can see the mouseover images in the file_managed table, but they are not listed in the file_usage table.

@Fanaile
Thanks for getting this started.

Every thing seems to be working the way that I need it to, except that I can't get the images to change on hover. When I go to edit the menu link, I upload the two images and then click on save. But then if I go back in only the first image is still listed, and it doesn't look as though I've uploaded the second image (for the mouseover) at all.

Looking into my database, I can see the mouseover images in the file_managed table, but they are not listed in the file_usage table.

Change in imagemenu.module on line 84 from

if (variable_get('imagemenu_use_hover', FALSE)) {

to

if (variable_get('imagemenu_use_hover', TRUE)) {

and thanks for the code dscutaru :)

@Kurt A

Thanks, that's perfect! Works like a charm :)

Here is the code by dscutaru (#21) with the modification by Kurt Adamson (#24)

The Image menu is interfering with the Admin menu by suppressing it.

Propably cause:

This Code in the imagemenu.module.php (230-234):

  // load js code which will preload images for mouse over
  static $js_loaded = FALSE;
  if (!$js_loaded && $settings['preload_hover']) {
    drupal_add_js(drupal_get_path('module', 'imagemenu') . '/imagemenu.js');
    $js_loaded = TRUE;

clashes with this code in the admin menu module, admin_menu.module (192-200):

function admin_menu_suppress($set = TRUE) {
  static $suppress = FALSE;
  // drupal_add_js() must only be invoked once.
  if (!empty($set) && $suppress === FALSE) {
    $suppress = TRUE;
    drupal_add_js(array('admin_menu' => array('suppress' => 1)), 'setting');
  }
  return $suppress;
}

Has anybody any idea in how to tackle this interesting but annoying clash?

Grtz

Thank you for this module in D7

@franksweb

+1

Did you find a soluce for this problem?

Thanks a lot for the contrib...

I would comment if it works OK...

There is also a problem with Field Slideshow.
Slideshow is ok with IE9, Opera, Google Chrome, but the view is always paused with Firefox
Has anyone the same problem? and a solution?

My provisional solution is to disable the "Preload images used on mouse over" fonction in settings, (or comment lines 227-231 in imagemenu.module to prevent the preload fonction's use).

And all is right, waiting a modified version to stop the problem.

Indeed,

menu_attributes is the perfect solution if you control the site.
If you want a site admin to be able to add menu items, then you need something like imagemenu.

So I guess it depends on what you want.

Great module exactly what I needed.
The only thing I like to have also is a image for the selected page/menu item.

If someone has made that and like to share? Otherwise got to figure out how to make those changes.

Hello,
I must say that if (variable_get('imagemenu_use_hover', TRUE)) {... is always TRUE. So I get those notices when updating a menu item :

Notice: Undefined index: image-hover in imagemenu_menu_edit_item_submit() (line 85 of .../sites/all/modules/imagemenu/imagemenu.module).
    Notice: Undefined index: image-hover in imagemenu_menu_edit_item_submit() (line 86 of .../sites/all/modules/imagemenu/imagemenu.module).

I notice that imagemenu creates this array of variables : imagemenu_settings. And that variable imagemenu_use_hover doesn't exist in bdd.
So to avoid thoses notices I've change the code like this:

$imgmenuvars = variable_get('imagemenu_settings');
  // mouse over images
  if ($imgmenuvars['use_hover']) {
    $images['hover'] = $form['imagemenu']['image-hover']['#file'];
    $prev_images['hover'] = $form['imagemenu']['image-hover']['#default_value'];
  }

maybe i'm wrong... but notices went away

you are 100% correct, missed that line on 2nd rewrite
attached fixed version

Thanks. Better with the imagemenu_settings() function !! ;-)

Had to comment out this part since it gives an error.
Image var is emtpy. think the preg match is wrong somehow..

        if (image[1]) {
          images[images.length] = image[1];
        }

Follow up on #35 and #31

It seems that you cannot get the attr from the mouseover event. That is why you cannot discover the images from the img tag. My knowledge on Jquery is limited so have no idea why this is not working.

For displaying the hover image when the link is active I found a solution. First wanted to get the image via the mouseover attr but as said above the string is always empty. So made a little change in the module.
on line 199 it reads now (added the mytag line)

      $hover = array(
        'onmouseover' => 'this.src=\'' . image_style_url($settings['image_style'], $hover_image->uri) . '\';',
        'onmouseout' => 'this.src=\'' . image_style_url($settings['image_style'], $image->uri) . '\';',
	'mytag' => image_style_url($settings['image_style'], $hover_image->uri),
      );

Then in the js file I added

	$('#block-menu-menu-tem-trailer-menu li.active-trail img').each(function () {
		var image = $(this).attr('mytag');
		$(this).attr('src', image);
		$(this).removeAttr('onmouseout');
	});

This way the src of the image is changed to the hover image if the menu link has the active-trail class. I also remove the onmouseout event (this works) to avoid when hovering over the image it is reverting back to the standard image.

Might be there are better ways to do this but this solves a problem I have and is reasonable simple to implement.

If someone has any idea why you cannot get the value from the onmouseout in jquery I would be gratefull.

subscribe

I can confirm that #33 with the patch at #36 works for me (under Drupal 7.17)

(you ONLY need #36 if you want the active menu item to display with the same image as a mouseover)

THANKS @dscutaru and @erald for saving my butt!

two important things to know, re: #36

1) "block-menu-menu-tem-trailer-menu" should be replaced with the id of your menu block. i'm sure there's a way to do this in jquery that doesn't require the block name to be hard-coded but i haven't got the time to figure it out at this point.

2) it doesn't say WHERE in imagemenu.js to insert this code! but i can tell you, it should be within the "attach: function (context, settings) {" so the end of your .js should look something like this:

// preload images for mouse over
$(images).each(function() {
$('')[0].src = this;
});

$('#block-system-main-menu li.active-trail img').each(function () {
var image = $(this).attr('mytag');
$(this).attr('src', image);
$(this).removeAttr('onmouseout');
});

}
};
})(jQuery);

cheers,
Peter "Fish" Fisera
Earth Angel Consulting

by the way, something up in the code (in #33), the class names generated for the li tags are ridiculously long and contain much repetition, eg:

id-img-class-imagemenu-image-imagemenu-125-onmouseover-this-src-039-http-dev-bradmcg-com-sites-default-files-styles-large-public-imagemenu-band_o-gif-039-onmouseout-this-src-039-http-dev-bradmcg-com-sites-default-files-styles-large-public-imagemenu-band-gif-039-mytag-http-dev-bradmcg-com-sites-default-files-styles-large-public-imagemenu-band_o-gif-src-http-dev-bradmcg-com-sites-default-files-styles-large-public-imagemenu-band-gif-alt-band-title-band-

i'm sure these could be shortened somehow ;-)

Thanks everyone for working on this. I've missed since this Drupal 6. Would you guys recommend the current module in this thread, or the sandbox module here: https://drupal.org/sandbox/s_gupta/1530790?

Here is a patch that combines the changes from #33 and #36 based on the current 6.x-1.x-dev. Please review.

You've closed the "duplicate" the wrong way round, this one has less relevance ... Please read this (and what someone else has written above https://www.drupal.org/project/imagemenu/issues/1003072#comment-8528709); https://www.drupal.org/project/imagemenu/issues/1551664#comment-6067420

This module solved a need some 10 years-plus ago for Drupal 4.5.x (.2 maybe?!) The approach is simply stupid now, and there are already far better alternatives out there which are based on more current thinking.

Either way, at least a patch was created for those that need it.

...Let it die!!!