Login

UberMenu 3

Support CenterSubmit a Ticket

Image filters

Filters added as of UberMenu version 3.2.1

These filters allow you to alter the image that is displayed with your menu items, beyond the controls in the menu item settings.

ubermenu_item_image_id

The ubermenu_item_image_id filter allows you to filter the image ID for a menu item. The ID must be a valid WordPress image attachment ID in your database. If your target image is an attachment in the database, use this filter.

ubermenu_item_image_id

Your registered callback will be called once for each menu item. Return the ID of the image attachment resource you want to display.

$img_id
The ID of the image. If an image has been set for this item in the menu item settings, it will be passed to the function via this parameter.
$ubermenu_item
An UberMenu Item object.

Example: Replace a specific menu item’s image with a specific image

add_filter( 'ubermenu_item_image_id' , 'um_filter_image_id' , 10 , 2 );
function um_filter_image_id( $img_id , $ubermenu_item ){
 
   if( $ubermenu_item->getID() == 75 ){
      $img_id = 562;
   }
 
   return $img_id;
}

Tips

To get the ID of the menu item, use

$ubermenu_item->getID();

To get a specific setting, use

$ubermenu_item->getSetting( $setting_slug );

To get the object that the WordPress Menu Item points to, use

$menu_item = $ubermenu_item->get_item();
$menu_item->type;  //the type of menu item, e.g. 'post_type'
$menu_item->object; // the type of object the item points to, e.g. 'post'

ubermenu_item_image_src

The ubermenu_item_image_src filter allows you to filter the image src attribute for a menu item. If your image URL is an external resource, or not a WordPress image attachment, use this filter.

ubermenu_item_image_src

Your registered callback will be called once for each menu item. The returned array must follow the structure of the wp_get_attachment_image_src return array.

$img_src
The URL/src attribute for the image.
$ubermenu_item
An UberMenu Item object.

Example: Display the author’s gravatar for posts

add_filter( 'ubermenu_item_image_src' , 'um_filter_image_src' , 10 , 2 );
function um_filter_image_src( $img_src , $ubermenu_item ){
 
   $menu_item = $ubermenu_item->get_item();  //Get the WordPress menu item object
 
   //Only filter if this is a Post menu item
   if( $menu_item->type == 'post_type' && $menu_item->object == 'post' ){
      $post_author_id = get_post_field( 'post_author', $menu_item->ID );  //Get the author for this post
 
      //Return an array with the URL and dimensions of the gravatar image
      return array(  //like https://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
         0  => get_avatar_url( $post_author_id , array( 'size' => 35 ) ),    //URL
         1  => 35,                                                           //width
         2  => 35,                                                           //height
      );
   }
 
   return $img_src;
}

ubermenu_item_image

The ubermenu_item_image filter gives you complete control over the HTML output for the image. If you want complete control, use this filter; but be aware that the UberMenu image settings won’t apply here, so you may need to custom style your image.

ubermenu_item_image

Your registered callback will be called once for each menu item. Return the image markup to be displayed.

$img
The HTML markup for the image.
$ubermenu_item
An UberMenu Item object.
add_filter( 'ubermenu_item_image' , 'um_filter_image' , 10 , 2 );
function um_filter_image( $img , $ubermenu_item ){
 
   $menu_item = $ubermenu_item->get_item();
 
   if( $menu_item->type == 'post_type' && $menu_item->object == 'pages' ){
      $img = '<img src="/path/to/my/img.jpg" class="my classes" alt="My image" />;
   }
 
   return $img;
}

ubermenu_item_image_attributes

The ubermenu_item_image_attributes filter allows you to control the attributes of the img tag. You are passed an array of attributes in key/value pairs that you can add, remove, or modify.

ubermenu_item_image_attributes

Your registered callback will be called once for each menu item image. Return the array of attributes to be applied to the image tag.

$atts
An array of attributes for the img tag
$ubermenu_item
An UberMenu Item object.
add_filter( 'ubermenu_item_image_attributes' , 'um_filter_image_atts' , 10 , 2 );
function um_filter_image_atts( $atts , $ubermenu_item ){
  $atts['alt'] = 'My image alt text';
  return $atts;
}

Dynamic Terms Images

Since WordPress terms do not have featured images (like posts do), there’s no standard way or UI to assign images to dynamic terms. However, you can use the following filter to programmatically assign an image from your media library to the items

ubermenu_dt_image

ubermenu_dt_image

Your registered callback will be called once for each dynamic term result. Return the image attachment ID to be used.

$img_id
The ID of the image attachment from your media library.
$menu_item_id
The ID of the menu item. The format will be: {dynamic-term-item-id}-term-{term-id}, e.g. 261-term-52
$term
The term object.
//This example looks for the term with ID 52, and assigns it an image with ID 295
//Of course, if you are using the term metadata, you can code this dynamically instead
//using get_term_meta()
add_filter( 'ubermenu_dt_image' , 'um_dynamic_terms_image' , 10 , 3 );
function um_dynamic_terms_image( $img_id , $menu_item_id , $term ){
 
   //For term 52, use image 295
   if( $term->term_id == 52 ){
      $img_id = 295;
   }
 
   //Or more generically
   //$img_id = get_term_meta( $term->term_id, 'my-featured-image', true );  //where my-featured-image is your meta key for the image ID
                 
   return $img_id;
}

More about term metadata: https://www.smashingmagazine.com/2015/12/how-to-use-term-meta-data-in-wordpress/

On this page