Add menu image plugin

wp-content/plugins/menu-image/.gitignore

+node_modules/

wp-content/plugins/menu-image/Gruntfile.js

+'use strict';
+module.exports = function(grunt){
+
+  grunt.initConfig({
+    wp_readme_to_markdown: {
+      your_target: {
+          files: {
+            'README.md': 'readme.txt'
+          },
+      },
+    },
+  });
+
+  grunt.loadNpmTasks('grunt-wp-readme-to-markdown');
+
+  grunt.registerTask('default', ['wp_readme_to_markdown']);
+
+}

wp-content/plugins/menu-image/README.md

+# Menu Image #
+**Contributors:** zviryatko  
+**Tags:** menu, image, field, hover, wpml  
+**Donate link:** http://makeyoulivebetter.org.ua/buy-beer  
+**Requires at least:** 3.5.1  
+**Tested up to:** 4.2  
+**Stable tag:** 2.6  
+**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.
+
+## Description ##
+
+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!
+
+## Installation ##
+
+1. Upload `menu-image` to the `/wp-content/plugins/` directory
+2. Activate the plugin through the 'Plugins' menu in WordPress
+3. Go to `/wp-admin/nav-menus.php`
+4. Edit exist menu item or add new menu item and just upload image than click `Save Menu`
+5. See your menu on site
+6. (WMPL users only) Goto WPML > WP Menus Sync and click to `Sync`
+
+## Frequently Asked Questions ##
+
+### How to wrap menu link text in `span` html element ###
+
+Menu link text is already wrapped in `span.menu-image-title`.
+
+### How to add another size for the image? ###
+
+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;
+	
+	});
+	?>
+
+
+### How to make hovered image visible on current page of menu item? ###
+
+Add this link to style.css
+
+	.menu-item.current-menu-item > a.menu-image-hovered img.hovered-image {
+	**  opacity:** 1;  
+	}
+
+
+## Screenshots ##
+
+### 1. Admin screen ###
+![Admin screen](https://ps.w.org/menu-image/assets/screenshot-1.png)
+
+### 2. Menu preview in standard twenty-thirteen theme ###
+![Menu preview in standard twenty-thirteen theme](https://ps.w.org/menu-image/assets/screenshot-2.png)
+
+
+## Changelog ##
+
+### 2.6 ###
+* Fix bug on attachment page.
+* Add french translation. Thanx @CreativeJuiz
+
+### 2.5 ###
+* 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.
+
+### 2.4 ###
+* Fix compatibility with some modules and themes to according to [this topic](http://shazdeh.me/2014/06/25/custom-fields-nav-menu-items/)
+* Fix Jetpack Phonon frontend bug
+
+### 2.3 ###
+* WPML menus sync support. Thanx @pabois for [feature request](http://wordpress.org/support/topic/very-good-wpml-compliant)
+
+### 2.2 ###
+* Added grunt-wp-readme-to-markdown npm package for converting readme to markdown for github users.
+
+### 2.1 ###
+* Fix [set-image-button-not-working](http://wordpress.org/support/topic/set-image-button-not-working)
+* Fix [vertical-align-when-using-mouseover-image](ttp://wordpress.org/support/topic/vertical-align-when-using-mouseover-image)
+
+### 2.0 ###
+* Added support of media uploader.
+* Fixed php strict warnings.
+* Added .ico image support, thanks to [ivol84](https://github.com/ivol84)
+
+### 1.3 ###
+* Added ability to set title position, an example: before, after image or hide
+
+### 1.2 ###
+* Fix styles for hovered image
+
+### 1.1 ###
+* 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
+
+## Upgrade Notice ##
+
+### 2.5 ###
+Now you can set link title below and above image, thanx @alhoseany.
+
+### 2.4 ###
+If your are using Jetpack Phonon module now menu icons will be look good.
+
+### 2.3 ###
+If your are using WPML plugin, now when you sync menus, images will synced too.
+
+### 2.0 ###
+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!
+
+### 1.2 ###
+Now you can change title text position
+
+### 1.1 ###
+Now you can upload image that replaced default on mouse hover

wp-content/plugins/menu-image/languages/menu-image-fr_FR.po

+msgid ""
+msgstr ""
+"Project-Id-Version: Menu Image\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2014-05-17 16:56+0300\n"
+"PO-Revision-Date: 2015-06-23 19:51+0100\n"
+"Last-Translator: Alex Davyskiba <sanya.davyskiba@gmail.com>\n"
+"Language-Team: MakeYouLiveBetter <team@makeyoulivebetter.org.ua>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-KeywordsList: __;_e;esc_attr__;esc_html__\n"
+"X-Poedit-Basepath: .\n"
+"X-Generator: Poedit 1.7.3\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+"Language: fr_FR\n"
+"X-Poedit-SearchPath-0: ..\n"
+
+#: ../menu-image.php:83
+msgid "Image"
+msgstr "Image"
+
+#: ../menu-image.php:211
+msgid "Chose menu image"
+msgstr "Choisir une image de menu"
+
+#: ../menu-image.php:252
+msgid "Menu image"
+msgstr "Image de menu"
+
+#: ../menu-image.php:253
+msgid "Change menu item image"
+msgstr "Changer l'image"
+
+#: ../menu-image.php:253
+msgid "Set menu item image"
+msgstr "Choisir une image"
+
+#: ../menu-image.php:256
+msgid "Set image"
+msgstr "Choisir une image"
+
+#: ../menu-image.php:257 ../menu-image.php:267 ../menu-image.php:541
+msgid "Remove"
+msgstr "Retirer"
+
+#: ../menu-image.php:262
+msgid "Image on hover"
+msgstr "Image au survol"
+
+#: ../menu-image.php:263
+msgid "Change menu item image on hover"
+msgstr "Changer l'image au survol"
+
+#: ../menu-image.php:263
+msgid "Set menu item image on hover"
+msgstr "Choisir l'image au survol"
+
+#: ../menu-image.php:266
+msgid "Set image on hover"
+msgstr "Choisir l'image au survol"
+
+#: ../menu-image.php:279
+msgid "Image size"
+msgstr "Taille de l'image"
+
+#: ../menu-image.php:294
+msgid "Title position"
+msgstr "Position du titre"
+
+#: ../menu-image.php:297
+msgid "Before"
+msgstr "Avant"
+
+#: ../menu-image.php:298
+msgid "Hide"
+msgstr "Cacher"
+
+#: ../menu-image.php:299
+msgid "After"
+msgstr "Après"

wp-content/plugins/menu-image/languages/menu-image-ru_RU.po

+msgid ""
+msgstr ""
+"Project-Id-Version: Menu Image\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2014-05-17 16:51+0300\n"
+"PO-Revision-Date: 2014-05-17 16:59+0300\n"
+"Last-Translator: Alex Davyskiba <sanya.davyskiba@gmail.com>\n"
+"Language-Team: MakeYouLiveBetter <team@makeyoulivebetter.org.ua>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-KeywordsList: __;_e;esc_attr__;esc_html__\n"
+"X-Poedit-Basepath: .\n"
+"X-Poedit-Language: English\n"
+"X-Poedit-SearchPath-0: ..\n"
+
+#: ../menu-image.php:83
+msgid "Image"
+msgstr "Картинка"
+
+#: ../menu-image.php:211
+msgid "Chose menu image"
+msgstr "Выберите изображение"
+
+#: ../menu-image.php:252
+msgid "Menu image"
+msgstr "Картинками меню"
+
+#: ../menu-image.php:253
+msgid "Change menu item image"
+msgstr "Изменить картинку для пункта меню"
+
+#: ../menu-image.php:253
+msgid "Set menu item image"
+msgstr "Выбрать картинку для пункта меню"
+
+#: ../menu-image.php:256
+msgid "Set image"
+msgstr "Выбрать картинку"
+
+#: ../menu-image.php:257
+#: ../menu-image.php:267
+#: ../menu-image.php:541
+msgid "Remove"
+msgstr "Удалить"
+
+#: ../menu-image.php:262
+msgid "Image on hover"
+msgstr "Картинка при наведении"
+
+#: ../menu-image.php:263
+msgid "Change menu item image on hover"
+msgstr "Изменить картинку при наведении для пункта меню"
+
+#: ../menu-image.php:263
+msgid "Set menu item image on hover"
+msgstr "Выбрать картинку при наведении для пункта меню"
+
+#: ../menu-image.php:266
+msgid "Set image on hover"
+msgstr "Выбрать картинку"
+
+#: ../menu-image.php:279
+msgid "Image size"
+msgstr "Размер"
+
+#: ../menu-image.php:294
+msgid "Title position"
+msgstr "Положение заголовка"
+
+#: ../menu-image.php:297
+msgid "Before"
+msgstr "До"
+
+#: ../menu-image.php:298
+msgid "Hide"
+msgstr "Нет"
+
+#: ../menu-image.php:299
+msgid "After"
+msgstr "После"
+

wp-content/plugins/menu-image/languages/menu-image-ua_UA.po

+msgid ""
+msgstr ""
+"Project-Id-Version: Menu Image\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2014-05-17 16:51+0300\n"
+"PO-Revision-Date: 2014-05-17 17:05+0300\n"
+"Last-Translator: Alex Davyskiba <sanya.davyskiba@gmail.com>\n"
+"Language-Team: MakeYouLiveBetter <team@makeyoulivebetter.org.ua>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-KeywordsList: __;_e;esc_attr__;esc_html__\n"
+"X-Poedit-Basepath: .\n"
+"X-Poedit-Language: English\n"
+"X-Poedit-SearchPath-0: ..\n"
+
+#: ../menu-image.php:83
+msgid "Image"
+msgstr "Зображення"
+
+#: ../menu-image.php:211
+msgid "Chose menu image"
+msgstr "Виберіть зображення"
+
+#: ../menu-image.php:252
+msgid "Menu image"
+msgstr "Зображення меню"
+
+#: ../menu-image.php:253
+msgid "Change menu item image"
+msgstr "Змінити картинку для пункту меню"
+
+#: ../menu-image.php:253
+msgid "Set menu item image"
+msgstr "Виберіть зображення для пункту меню"
+
+#: ../menu-image.php:256
+msgid "Set image"
+msgstr "Виберіть зображення"
+
+#: ../menu-image.php:257
+#: ../menu-image.php:267
+#: ../menu-image.php:541
+msgid "Remove"
+msgstr "Видалити"
+
+#: ../menu-image.php:262
+msgid "Image on hover"
+msgstr "Зображення при наведенні"
+
+#: ../menu-image.php:263
+msgid "Change menu item image on hover"
+msgstr "Змінити картинку при наведенні для пункту меню"
+
+#: ../menu-image.php:263
+msgid "Set menu item image on hover"
+msgstr "Вибрати картинку при наведенні для пункту меню"
+
+#: ../menu-image.php:266
+msgid "Set image on hover"
+msgstr "Виберіть зображення"
+
+#: ../menu-image.php:279
+msgid "Image size"
+msgstr "Розмір"
+
+#: ../menu-image.php:294
+msgid "Title position"
+msgstr "Розташування заголовка"
+
+#: ../menu-image.php:297
+msgid "Before"
+msgstr "До"
+
+#: ../menu-image.php:298
+msgid "Hide"
+msgstr "Нема"
+
+#: ../menu-image.php:299
+msgid "After"
+msgstr "Після"
+

wp-content/plugins/menu-image/languages/menu-image.pot

+msgid ""
+msgstr ""
+"Project-Id-Version: Menu Image\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2014-05-17 16:56+0300\n"
+"PO-Revision-Date: 2014-05-17 16:56+0300\n"
+"Last-Translator: Alex Davyskiba <sanya.davyskiba@gmail.com>\n"
+"Language-Team: MakeYouLiveBetter <team@makeyoulivebetter.org.ua>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-KeywordsList: __;_e;esc_attr__;esc_html__\n"
+"X-Poedit-Basepath: .\n"
+"X-Poedit-Language: English\n"
+"X-Poedit-SearchPath-0: ..\n"
+
+#: ../menu-image.php:83
+msgid "Image"
+msgstr ""
+
+#: ../menu-image.php:211
+msgid "Chose menu image"
+msgstr ""
+
+#: ../menu-image.php:252
+msgid "Menu image"
+msgstr ""
+
+#: ../menu-image.php:253
+msgid "Change menu item image"
+msgstr ""
+
+#: ../menu-image.php:253
+msgid "Set menu item image"
+msgstr ""
+
+#: ../menu-image.php:256
+msgid "Set image"
+msgstr ""
+
+#: ../menu-image.php:257
+#: ../menu-image.php:267
+#: ../menu-image.php:541
+msgid "Remove"
+msgstr ""
+
+#: ../menu-image.php:262
+msgid "Image on hover"
+msgstr ""
+
+#: ../menu-image.php:263
+msgid "Change menu item image on hover"
+msgstr ""
+
+#: ../menu-image.php:263
+msgid "Set menu item image on hover"
+msgstr ""
+
+#: ../menu-image.php:266
+msgid "Set image on hover"
+msgstr ""
+
+#: ../menu-image.php:279
+msgid "Image size"
+msgstr ""
+
+#: ../menu-image.php:294
+msgid "Title position"
+msgstr ""
+
+#: ../menu-image.php:297
+msgid "Before"
+msgstr ""
+
+#: ../menu-image.php:298
+msgid "Hide"
+msgstr ""
+
+#: ../menu-image.php:299
+msgid "After"
+msgstr ""
\ No newline at end of file

wp-content/plugins/menu-image/menu-image-admin.js

+(function ($) {
+	$(document).ready(function () {
+		var menuImageUpdate = function( item_id, thumb_id, is_hover ) {
+			wp.media.post( 'set-menu-item-thumbnail', {
+				json:         true,
+				post_id:      item_id,
+				thumbnail_id: thumb_id,
+				is_hover:			is_hover ? 1 : 0,
+				_wpnonce:     menuImage.settings.nonce
+			}).done( function( html ) {
+				$('.menu-item-images', '#menu-item-' + item_id).html( html );
+			});
+		};
+
+		$('#menu-to-edit')
+			.on('click', '.menu-item .set-post-thumbnail', function (e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				var item_id = $(this).parents('.field-image').siblings('input.menu-item-data-db-id').val(),
+					is_hover = $(this).hasClass('hover-image'),
+					uploader = wp.media({
+						title: menuImage.l10n.uploaderTitle, // todo: translate
+						button: { text: menuImage.l10n.uploaderButtonText },
+						multiple: false
+					}).on('select', function () {
+						var attachment = uploader.state().get('selection').first().toJSON();
+						menuImageUpdate( item_id, attachment.id, is_hover );
+					}).open();
+			})
+			.on('click', '.menu-item .remove-post-thumbnail', function (e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				var item_id = $(this).parents('.field-image').siblings('input.menu-item-data-db-id').val();
+				menuImageUpdate( item_id, -1, $(this).hasClass('hover-image') );
+			});
+	});
+})(jQuery);

wp-content/plugins/menu-image/menu-image.css

+.menu-item a img {
+    border: none;
+    box-shadow: none;
+    vertical-align: middle;
+    width: auto;
+    display: inline;
+}
+.menu-item a.menu-image-hovered img.hovered-image,
+.menu-item a.menu-image-hovered:hover img.menu-image {
+    opacity: 0;
+    transition: opacity 0.25s ease-in-out 0s;
+}
+.menu-item a.menu-image-hovered:hover img.hovered-image {
+    opacity: 1;
+}
+.menu-item a.menu-image-title-after.menu-image-not-hovered img,
+.menu-item a.menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper {
+    padding-right: 10px;
+}
+.menu-item a.menu-image-title-before.menu-image-not-hovered img,
+.menu-item a.menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper {
+    padding-left: 10px;
+}
+.menu-item a.menu-image-title-above,
+.menu-item a.menu-image-title-below {
+    text-align: center;
+}
+.menu-item a.menu-image-title-above.menu-image-not-hovered img,
+.menu-item a.menu-image-hovered.menu-image-title-above .menu-image-hover-wrapper {
+    display: block;
+    padding-top: 10px;
+    margin: 0 auto;
+}
+.menu-item a.menu-image-title-below.menu-image-not-hovered img,
+.menu-item a.menu-image-hovered.menu-image-title-below .menu-image-hover-wrapper {
+    display: block;
+    padding-bottom: 10px;
+    margin: 0 auto;
+}
+.menu-item a.menu-image-title-hide .menu-image-title {
+	display: none;
+}
\ No newline at end of file

wp-content/plugins/menu-image/package.json

+{
+  "name": "menu-image",
+  "version": "2.2.0",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-wp-readme-to-markdown": "^0.8.0"
+  }
+}

wp-content/plugins/menu-image/readme.txt

+=== Menu Image ===
+Contributors: zviryatko
+Tags: menu, image, field, hover, wpml
+Donate link: http://makeyoulivebetter.org.ua/buy-beer
+Requires at least: 3.5.1
+Tested up to: 4.2
+Stable tag: 2.6
+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.
+
+== Description ==
+
+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!
+
+== Installation ==
+
+1. Upload `menu-image` to the `/wp-content/plugins/` directory
+2. Activate the plugin through the 'Plugins' menu in WordPress
+3. Go to `/wp-admin/nav-menus.php`
+4. Edit exist menu item or add new menu item and just upload image than click `Save Menu`
+5. See your menu on site
+6. (WMPL users only) Goto WPML > WP Menus Sync and click to `Sync`
+
+== Frequently Asked Questions ==
+
+= How to wrap menu link text in `span` html element =
+
+Menu link text is already wrapped in `span.menu-image-title`.
+
+= How to add another size for the image? =
+
+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;
+
+});
+?>
+`
+
+= How to make hovered image visible on current page of menu item? =
+
+Add this link to style.css
+`
+.menu-item.current-menu-item > a.menu-image-hovered img.hovered-image {
+  opacity: 1;
+}
+`
+
+== Screenshots ==
+
+1. Admin screen
+2. Menu preview in standard twenty-thirteen theme
+
+== Changelog ==
+
+= 2.6 =
+* Fix bug on attachment page.
+* Add french translation. Thanx @CreativeJuiz
+
+= 2.5 =
+* 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.
+
+= 2.4 =
+* Fix compatibility with some modules and themes to according to [this topic](http://shazdeh.me/2014/06/25/custom-fields-nav-menu-items/)
+* Fix Jetpack Phonon frontend bug
+
+= 2.3 =
+* WPML menus sync support. Thanx @pabois for [feature request](http://wordpress.org/support/topic/very-good-wpml-compliant)
+
+= 2.2 =
+* Added grunt-wp-readme-to-markdown npm package for converting readme to markdown for github users.
+
+= 2.1 =
+* Fix [set-image-button-not-working](http://wordpress.org/support/topic/set-image-button-not-working)
+* Fix [vertical-align-when-using-mouseover-image](ttp://wordpress.org/support/topic/vertical-align-when-using-mouseover-image)
+
+= 2.0 =
+* Added support of media uploader.
+* Fixed php strict warnings.
+* Added .ico image support, thanks to [ivol84](https://github.com/ivol84)
+
+= 1.3 =
+* Added ability to set title position, an example: before, after image or hide
+
+= 1.2 =
+* Fix styles for hovered image
+
+= 1.1 =
+* 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
+
+== Upgrade Notice ==
+
+= 2.5 =
+Now you can set link title below and above image, thanx @alhoseany.
+
+= 2.4 =
+If your are using Jetpack Phonon module now menu icons will be look good.
+
+= 2.3 =
+If your are using WPML plugin, now when you sync menus, images will synced too.
+
+= 2.0 =
+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!
+
+= 1.2 =
+Now you can change title text position
+
+= 1.1 =
+Now you can upload image that replaced default on mouse hover