How to Display image from Menu Image in Walker Dropdown Select Menu

Created a custom menu list, titled Country that has flags representing countries (only Canada and USA) using the plugin Menu Image

I combined this menu with Walker, to create a dropdown. I however can only access the title assigned to the images, and cannot find out where the image information is actually stored within the $item.

Here is the Walker Class the I have used, this displays the Title of the selected item in the dropdown.

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
    function start_lvl($output, $depth){
        $indent = str_repeat("\t", $depth); // don't output children opening tag (`ul`)
    }
    function end_lvl($output, $depth){
        $indent = str_repeat("\t", $depth); // don't output children closing tag
    }
    /**
    * Start the element output.
    *
    * @param  string $output Passed by reference. Used to append additional content.
    * @param  object $item   Menu item data object.
    * @param  int $depth     Depth of menu item. May be used for padding.
    * @param  array $args    Additional strings.
    * @return void
    */
    function start_el($output, $item, $depth, $args) {
            //var_dump($item); exit;
            foreach ($item as $key=$value){
                if(strpos(strtolower((string)$value),"anada")!== false){
                    echo $key .":".$value."";
                }
            }
        $url = '#' !== $item-url ? $item-url : '';
        $output .= 'option value="' . $url . '"' . $item-title;
               // $item-image;
    }   
    function end_el($output, $item, $depth){
        $output .= "/option\n"; // replace closing /li with the option tag
    }
}

The call to this class is made inside my theme like so:

 ?php 
// Nav Menu Dropdown Class
include_once( '/lib/classes/nav-menu-dropdown.php' );

wp_nav_menu( array(
    // 'theme_location' = 'mobile',
    'menu'           = 'Country',
    'walker'         = new Walker_Nav_Menu_Dropdown(),
    'items_wrap'     = 'div class="mobile-menu"formselect onchange="if (this.value) window.location.href=this.value"%3$s/select/form/div',
) );
?

I have var_dumped information but I found nothing to assist me. I also output the menu using the standard method of wp_nav_menu( array( 'menu' = 'Country'));

This above displays the menu images that I would like to see in my dropdown, and I know where the images are stored, but I want to access it from the $item when I am building my walker dropdown

Update 1: Modification to function start_el

function start_el($output, $item, $depth, $args) {
            $menuImage = new Menu_Image_Plugin();
            $menuImage-menu_image_nav_menu_item_filter($output2, $item, $depth, $args);
            var_dump($output2);
            $url = '#' !== $item-url ? $item-url : '';
            $output .= 'option value="' . $url . '"' . $output2;
                   // $item-image;
        }   
        function end_el($output, $item, $depth){
            $output .= "/option\n"; // replace closing /li with the option tag
        }
    }

Output from $menuImage-menu_image_nav_menu_item_filter() was NULL.

Update 2

Reviewed the function of menu_image_nav_menu_item_filter in menu_image.php

 function start_el($output, $item, $depth, $args) {
                $image_size = $item-image_size ? $item-image_size : apply_filters( 'menu_image_default_size', 'menu-36x36' );
            $image = wp_get_attachment_image( $item-thumbnail_id, $image_size, false, "class=menu-image {$class}" );
            var_dump($image); //read string out
            echo $image;   //displays the image
                $url = '#' !== $item-url ? $item-url : '';
                $output .= 'option value="' . $url . '"' . $image;
                       // image is not being included in $output
            }   
            function end_el($output, $item, $depth){
                $output .= "/option\n"; // replace closing /li with the option tag
            }
        }

The image is still not included in the output?

Topic select walker images plugins Wordpress

Category Web


It's stored in metadata, there are four meta fields: _thumbnail_id and _thumbnail_hover_id - store attachment ID, _menu_item_image_size - store selected image size, _menu_item_image_title_position - store label position, but you can get stored values from this properties: $item->thumbnail_id, $item->thumbnail_hover_id, $item->image_size, $item->title_position. Check the menu_image_nav_menu_item_filter() function in menu-image.php

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.