I know a lot of people use this module to replace the top menu items in a drop-down with images instead of text. It works pretty good for that, with just a little css needed.

Would it be possible to add the option for active and hover images?

CommentFileSizeAuthor
#40 menu_icons-hover_icons-1259302-40.patch10.78 KBbarraponto
#37 menu_icons-1259302.patch10.63 KBau_dave
#35 menu_icons-1259302.patch10.36 KBau_dave
#18 menu_icons-1259302-18.patch10.32 KBdrupallerina
#16 menu_icons-1259302-16.patch10.32 KBdrupallerina
#13 menu_icon_hover_image_1259302.patch9.2 KBtsi
#4 menu_icons_hover.patch7.18 KBAnonymous (not verified)

Comments

Screenack’s picture

Screenack commented

+1

acrollet’s picture

acrollet commented

I think this is a nice idea - I'm currently more focused on stamping out bugs and working towards a 3.0 release, but would welcome a patch.

acrollet’s picture

acrollet commented
Version: 7.x-3.0-alpha1 » 7.x-3.x-dev

Updating version.

Anonymous’s picture

Anonymous (not verified) commented
StatusFileSize
new menu_icons_hover.patch7.18 KB

How about this patch? To be applied on the dev version. I know it can be made more DRY, but it works on my side so far.

The extra template file menu_icons_css_item_hover.tpl.php has the following content:

<?php
// $Id: menu_icons_css_item.tpl.php,v 1.3 2010/02/15 15:35:48 skilip Exp $

/**
 * @file
 *
 * Template file for generating the CSS file used for the menu-items
 */

/**
 * Variables:
 * $mlid
 * $path
 *
 * @author dylan@opensourcery.com
 */
?>
a:hover.menu-<?php print $mlid ?>, ul.links li.menu-<?php print $mlid ?> a:hover {
  background-image: url(<?php print $path ?>);
}

-Thomas

Anonymous’s picture

Anonymous (not verified) commented

And before I forget, the extra template file that is needed. I also forgot to remove two dsm() 's. Been a bit too fast.

Anonymous’s picture

Anonymous (not verified) commented

Small addition to the extra template file, active menu items with active-trail

<?php
// $Id$

/**
 * @file
 *
 * Template file for generating the CSS file used for the menu-items
 */

/**
 * Variables:
 * $mlid
 * $path
 *
 * @author dylan@opensourcery.com
 */
?>
a:hover.menu-<?php print $mlid ?>, 
ul.links li.menu-<?php print $mlid ?> a:hover,
a.active.menu-<?php print $mlid ?>, 
ul.links li.active.menu-<?php print $mlid ?> a,
a.active-trail.menu-<?php print $mlid ?>, 
ul.links li.active-trail.menu-<?php print $mlid ?> a
{
  background-image: url(<?php print $path ?>);
}
acrollet’s picture

acrollet commented
Status: Active » Needs work

Thanks very much for the contribution - could you roll it all together as one patch, and follow the Drupal coding standards? (particularly as regards whitespace) This will make the patch easier to review and integrate.

Anonymous’s picture

Anonymous (not verified) commented

I'll see what I can do. I don't have much time left at the moment.

ace11’s picture

ace11 commented

Really waiting this extremly necessary feature.

Anonymous’s picture

Anonymous (not verified) commented

@acrollet: can you please point out where my patch does not meet the coding standards?

Thanks

acrollet’s picture

acrollet commented

@elfenixtorres: there are several lines with extraneous whitespace, and your editor appears to be set to use tabs instead of spaces - please see http://drupal.org/coding-standards#indenting. If you can get time to re-roll this as a complete patch against the latest git checkout, I'd love to get this in.

Anonymous’s picture

Anonymous (not verified) commented

@acrollet: thanks, that's strange, because both my editors are set to use 2 spaces, just lik in that guide. Perhaps it's an issue with the program that creates the patch. I'll see what I can do when I find some time.

tsi’s picture

tsi commented
Status: Needs work » Needs review
StatusFileSize
new menu_icon_hover_image_1259302.patch9.2 KB

Here is a re-roll of this feature with some small fixes, mostly it's the same as #4

tsi’s picture

tsi commented

mmm... the new tpl (see #4) didn't got in the patch. will have to add it manually.

acrollet’s picture

acrollet commented
Status: Needs review » Needs work

Unfortunately this patch does not apply, there have been some changes to the codebase since it was uploaded. I'll be happy to review if it's re-rolled.

drupallerina’s picture

drupallerina
she/her
Primary language German
Location Vienna
commented
StatusFileSize
new menu_icons-1259302-16.patch10.32 KB

I rerolled the patch!
Not tested yet, though.

drupallerina’s picture

drupallerina
she/her
Primary language German
Location Vienna
commented
Status: Needs work » Needs review

changing issue status

drupallerina’s picture

drupallerina
she/her
Primary language German
Location Vienna
commented
StatusFileSize
new menu_icons-1259302-18.patch10.32 KB

this patch includes the template, ignore previous one

deanflory’s picture

deanflory commented

So, does this patch use one menu icon for each state or just one for all states?

Thanks for any clarification as it either makes my life easier or it makes it more difficult (if patched and it takes over all states with only one icon).

drupallerina’s picture

drupallerina
she/her
Primary language German
Location Vienna
commented

As far as I can tell, this adds the option to add a second image for the hover state. It also uses the hover image for active menu trails.

drupallerina’s picture

drupallerina
she/her
Primary language German
Location Vienna
commented

I just tested and noticed that the new hover image file upload field doesn't show up on nodeforms. (only in /structure/menu/item/217/edit)

deanflory’s picture

deanflory commented

I've only noticed menu_icons settings on menu item edit pages, where they should be, and never on node edit pages. Pardon me if "nodeforms" are something I'm not aware of that are different from node edit forms.

ktrev’s picture

ktrev commented

I have applied this patch..But still the image is not showing on mouse hover.I am using 7.x-3.0-beta4 version

drupallerina’s picture

drupallerina
she/her
Primary language German
Location Vienna
commented

@deanflory: i was referring to the menu settings you get on each node admin form. where the publishing options are, in the vertical fieldset.
@revathykt the patch is against the dev version, try that and clear your caches

pixeldroid’s picture

pixeldroid commented

@drupallerina - missing hover icon field removes the hover icon on node save. Would you be able to adjust the patch to include it?

deanflory’s picture

deanflory commented

What is the best way to preload these hover images in CSS, or Javascript, or other?

  • I found ways to do it with images in CSS, but I'm not knowledgeable enough to code every image displayed on the site dynamically from the db with enough intelligence to do the same automatically for all new images added to the site in the node field display, views, panels custom content, etc..
  • Not really interested in using CSS Sprites unless there is a module or script that automates that process for all CSS background images across the site.

Is an active state going to be added? The hover works fine except for the non-preloading flicker.

pixeldroid’s picture

pixeldroid commented

@deanflory Active state is working fine.

deanflory’s picture

deanflory commented

I'll try downloading the latest dev, applying the #18 patch and see if it shows up this time. I've only seen the normal and hover state options.

Yeah, the flicker is why I was asking about preloading.

pixeldroid’s picture

pixeldroid commented

The only glitch i have seen is that the hover image upload field is missing from the node edit form. It is on the menu edit form. If you upload the hover state icon on menu edit and then re-save the node - it removes hover state icon.

I had no time to duplicate hover icon handling on the node edit forms, so I went into the patched module file and disabled the sections that place menu icon upload fields into node edit forms.

deanflory’s picture

deanflory commented

I just use the menu item forms to set-up menu icons.

Before I go back and redownload, repatch, reupload, run update.php and see if a 3rd image (active) is possible on a menu item, here are the only options I have now in a menu item edit form:

Path to the icon (normal icon, loaded and displayed upon page load)
Path to the hover icon (rollover/over/hover icon shown when the cursor moves over the menu item)

I'm not seeing a 3rd set of options (image style, path, upload) for active (mousedown/click/right-click hold) but will try this all again, just not going to uninstall this module and redo all that work on hundreds of menu items.

Looking at the code of the #18 patch I don't see much mention of "active" anywhere except related to active-trail which is not the same.

Here are the 4 link states just to clarify:

  • a:link is the selector for normal links
  • a:visited is the selector for visited links
  • a:hover is the selector for hover state
  • a:active is the selector for active links

Can anyone else confirm the #18 patch adds two link states to menu icons (hover & active)?

pixeldroid’s picture

pixeldroid commented
Issue summary: View changes

@deanflory, it does add them. But you will have to do what I did in #29 in order to keep it working. The patch is unfinished. I will try to create a new patch that will work correctly.

deanflory’s picture

deanflory commented

I have normal and hover icons working. My question was whether the active state can be added as I don't think it is, novice-ly skimming through the code. Active and hover are two different states. See #30 for more info.

pixeldroid’s picture

pixeldroid commented

Do you mean you want an additional, different from hover state, active state for the link? Currently, active state = hover state for the icon. No quick way to add a separate active state to it without tweaking the module.

deanflory’s picture

deanflory commented

Yes, so there would be a normal, hover (over) and active (click-down/hit, right-click-down). Three different images if needed. Just to clarfiy, active state is different from active menu trail as it deals with hierarchy and the link's active state is only for that one link, though I'm not sure if active trail in superfish triggers an active state on all in the hierarchy.

I imagine most people wouldn't take the time to have 3 different images on one menu icon, nor would want the additional download size, but it can be useful and with the speed of most computers/devices and connection speeds increasing over time it will likely become more used as time goes on.

au_dave’s picture

au_dave commented
StatusFileSize
new menu_icons-1259302.patch10.36 KB

I found that this patch didn't work when serving files from a cdn or S3 bucket as it put in the host name as the path to the hover image.

I have made a very small fix to the patch in 18 to generate the path to the hover image in the same was as the initial menu icon.

deanflory’s picture

deanflory commented

Patch in #35 has a bad WSOD error, couldn't even get through the update.php process:

Fatal error: Call to a member function getDirectoryPath() on a non-object in /.../sites/all/modules/menu_icons/menu_icons.module on line 668

These are the two patches I'm currently using that work for me, but I'm not using a CDN:

  • menu_icons-1259302-18.patch.txt
  • menu_icons-icons_disappear_after_edit-1437184-redo.patch.txt

These two together created the error, likely the new second one that produced the error:

  • menu_icons-icons_disappear_after_edit-1437184-redo.patch.txt
  • menu_icons-1259302.patch
au_dave’s picture

au_dave commented
StatusFileSize
new menu_icons-1259302.patch10.63 KB

Spotted my error, 2nd attempt

deanflory’s picture

deanflory commented

After applying patch "menu_icons-icons_disappear_after_edit-1437184-redo.patch" first:

patching file menu_icons.module
Hunk #8 succeeded at 483 (offset 3 lines).
Hunk #9 succeeded at 494 (offset 3 lines).
Hunk #10 succeeded at 567 (offset 3 lines).
patch: **** malformed patch at line 208: + // Support private filesystem

So there's an error in there.

deanflory’s picture

deanflory commented

After applying patch "menu_icons-icons_disappear_after_edit-1437184-redo.patch" first:

patching file menu_icons.module
Hunk #8 succeeded at 483 (offset 3 lines).
Hunk #9 succeeded at 494 (offset 3 lines).
Hunk #10 succeeded at 567 (offset 3 lines).
patch: **** malformed patch at line 208: + // Support private filesystem

So there's an error in there.

barraponto’s picture

barraponto
he / him
commented
StatusFileSize
new menu_icons-hover_icons-1259302-40.patch10.78 KB

I found the same issues as @deanflory. Here is a rewrite of the patch.

maxplus’s picture

maxplus commented

Hi,

tranks to barraponto, #40 works great for me

deanflory’s picture

deanflory commented

FYI, I somehow re-uploaded menu_icons with the #40 patch and hover images stopped working and were throwing tons of these errors:

Notice: Undefined variable: image_url_hover in menu_icons_css_generate() (line 677 of /.../sites/all/modules/menu_icons/menu_icons.module).

I did not uninstall and reinstall the patched module.

Reverting back to the #18 patch has the hover state image working again.

When I had the #40 patch applied and updated in the site and the hover images completely stopped working, even when I edited an item and reapplied the image paths to a menu item, and flushed all caches, they still didn't work, so I'm not sure if #40 actually works, but it clearly doesn't after having applied #18 and just updating.