0

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"><form><select 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?

0

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

  • Inside the function start_el I created a $menuImage = new MenuImage(); which called the menu_image_nav_menu_item_filter() . The output returned was output2 and I used that output to replace $item->title , however the output2 was null, so the drop downs were empty. – mcv Dec 20 '16 at 13:15
  • I displayed the code changes above. – mcv Dec 20 '16 at 13:19
  • You don't need to create instance of MenuImage class, if this module is activated, it should work. Or if you want to access instance directly, you can use global $menu_image;, I guess. Anyway try to get metadata directly: $item->thumbnail_hover_id = get_post_meta( $item->ID, '_thumbnail_hover_id', true ); – zviryatko Dec 20 '16 at 13:25
  • Got ya, but the $item->thumbnail_hover_id you detail above is the same as the $item->thumbnail_id I have finally got the image after reviewing the method you mentioned but it still in not appearing within html <option> please refer to update 2 in my original post – mcv Dec 20 '16 at 13:59
  • Html element <option> didn't support anything inside except plain text. You can use any icon-font there, or create your one. – zviryatko Dec 20 '16 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.