Hey there,
I have created a field group called Menu Icons. It shows up an image selector field when users edit any menu.
I have gotten the images to appear perfectly in menus, above the text.
I am just wondering how I can possibly get the image ALT tag to show up on these images? Currently the image just displays as:
<img src="example.jpg" class="menu-image">
I want to add the alt tag at the end of that.
I don’t know if it helps but below is my code to show the menu:
<nav id="site-navigation" class="main-navigation">
<?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?>
</nav>
The settings for the Menu Icons is set to return Image URL.
Any help at all would be so appreciated!
To show these images you must have created a filter to do so as described either here https://www.advancedcustomfields.com/resources/adding-fields-menu-items/ or here https://www.advancedcustomfields.com/resources/adding-fields-menus/. In order to add the alt tag you will need to get it and show it in your filter, this isn’t something that WP automatically does. Check out this explanation https://wordpress.stackexchange.com/questions/193196/how-to-get-image-title-alt-attribute
Oh my gosh!! I feel so silly that I totally forgot I did that. Yep, you are right and thank you that helped solve my question!
Sorry, I marked the answer as solved because I thought I had it for a sec, but I still cant get it to work
Below is the code:
// loop
foreach( $items as &$item ) {
// vars
$icon = get_field('menu_image', $item);
// append icon
if( $icon ) {
$item->title = ' <img src="' . $url['url'] . '" class="menu-image" alt="' . $image['alt'] . '"><br>' .$item->title;
}
}
// return
return $items;
I have changed my field to output Image Array and am using the above code but it now wont display the image url or the alt tags….. Not sure what I am missing
Not sure how to click edit on that last post as I posted the wrong code…
I am using the below with Image Array option selected:
// loop
foreach( $items as &$item ) {
// vars
$icon = get_field('menu_image', $item);
// append icon
if( $icon ) {
$item->title = ' <img src="' . $icon['url'] . '" class="menu-image" alt="' . $icon['alt'] . '"><br>' .$item->title;
}
}
// return
return $items;
Your code looks correct according to the documentation. Honestly, I don’t know, I haven’t had the chance to use fields on menu items yet. Are the images appearing?
how can i add any html tag before title. ex. <span>title<span> and how could print image first then title
