Contributors: zviryatko
Tags: menu, image, field, hover, wpml
Donate link: http://makeyoulivebetter.org.ua/buy-beer
Requires at least: 4.4.0
Tested up to: 4.7
Stable tag: 2.8.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Adds a field to load the image in a menu item and displays the image inside the link in the menu before the text. Now WPML compliant.
Adds a field to load the image in a menu item and displays the image inside the link in the menu before the text. Now you can upload the second image and set to the mouse over/out effect. And also change position of title or hide title if need. And... load images via media uploader! Now WPML compliant!
- Upload
menu-image
to the/wp-content/plugins/
directory - Activate the plugin through the 'Plugins' menu in WordPress
- Go to
/wp-admin/nav-menus.php
- Edit exist menu item or add new menu item and just upload image than click
Save Menu
- See your menu on site
- (WMPL users only) Goto WPML > WP Menus Sync and click to
Sync
Use core nav_menu_link_attributes
and nav_menu_item_title
filters.
Menu link text is already wrapped in span.menu-image-title
.
To add a new size (or remove an old one) add a function to the menu_image_default_sizes
filter. For example
<?php
add_filter( 'menu_image_default_sizes', function($sizes) {
// remove the default 36x36 size
unset($sizes['menu-36x36']);
// add a new size
$sizes['menu-50x50'] = array(50,50);
// return $sizes (required)
return $sizes;
});
?>
Add this link to style.css
.menu-item.current-menu-item > a.menu-image-hovered img.hovered-image {
opacity: 1;
}
= If you have problem with srcset image problem on Wordpress version >= 4.4 and Azure hosting =
If you srcset property look like this:
<img width="36" height="36" src="http://static.mywebsite.com/website/myaction_express_menu_icon-36x36.png" class="attachment-menu-36x36 size-menu-36x36" alt="myaction_express_menu_icon" srcset="http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-50x50.png 50w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-75x75.png 75w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-24x24.png 24w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-36x36.png 36w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-48x48.png 48w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon.png 80w" sizes="(max-width: 36px) 100vw, 36px">
Then you can disable srcset (add it to your function.php):
/**
* Fix for broken images on azure & wordpress 4.4
* @see https://wordpress.org/support/topic/wordpress-adding-absolute-paths
*/
add_filter( 'wp_calculate_image_srcset', '__return_false' );
- Use core
nav_menu_link_attributes
,nav_menu_item_title
filters to add image and class instead ofwalker_nav_menu_start_el
filter. - Drop support of core version < 4.4.0.
- Remove notification plugin. It was not a good idea btw.
- Revert back php <=5.2 support, https://wordpress.org/support/topic/upgrade-to-wp-453-and-268-and-got-this-error. Reported by @itmnetcom and @cjg79
- Fix
wp_nav_menu_item_custom_fields
filter usage https://wordpress.org/support/topic/blocked-on-36x36-image. Reported by @vladimir-slonska - Fix php warning in notifier component https://wordpress.org/support/topic/invalid-argument-supplied-for-foreach-in-4. Reported by @susanmarshallva
- Add
menu_image_link_attributes
filter, fix bug with menu dropdown in Flatsome theme https://wordpress.org/support/topic/bug-image-menu-dropdown. Reported by @apardo
- Fix various php errors.
- Add notification plugin.
- Fixing a clearing bug for WordPress 4.5+. Thanx @kau-boy
- Fix php warning 'Invalid Argument foreach()' https://wordpress.org/support/topic/invalid-argument-foreach-in-menu-imagephp-line-126. Thanx @majancart
- Update FAQ to dial with srcset and Azure hosting https://wordpress.org/support/topic/wordpress-adding-absolute-paths. Thanx @GeertvanHorrik
- Fix bug on attachment page.
- Add french translation. Thanx @CreativeJuiz
- Add above and below title. Thanx @alhoseany
- Add original image size. Thanx @alhoseany
- Fix the loss of choices on size and title when updating image by ajax. Thanx @alhoseany
- Fix hidden title on responsive select menu.
- Fix compatibility with some modules and themes to according to this topic
- Fix Jetpack Phonon frontend bug
- WPML menus sync support. Thanx @pabois for feature request
- Added grunt-wp-readme-to-markdown npm package for converting readme to markdown for github users.
- Fix set-image-button-not-working
- Fix vertical-align-when-using-mouseover-image
- Added support of media uploader.
- Fixed php strict warnings.
- Added .ico image support, thanks to ivol84
- Added ability to set title position, an example: before, after image or hide
- Fix styles for hovered image
- Added style file with vertical align of menu image item by default
- Added ability to upload image that which will be replaced on hover
- Added default image sizes for menu items: 24x24, 36x36 and 48x48
Now you can set link title below and above image, thanx @alhoseany.
If your are using Jetpack Phonon module now menu icons will be look good.
If your are using WPML plugin, now when you sync menus, images will synced too.
WARNING! You need to re-select the images! Now, with media uploader support, it's easy peasy. Media uploader support. Upload once, use many times!
Now you can change title text position
Now you can upload image that replaced default on mouse hover