[Support request] Thumbnails images in Secondary Navigation Menu

Home Forums Support Thumbnails images in Secondary Navigation Menu

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1274747
    Agnieszka

    Hello, I would like to know if I could display thumbnail images (maybe 8 in a row) in the secondary navigation menu, and after clicking on the image it will take me to an assigned blog post. It seems it is doable but I can’t figure out how.
    TIA

    #1275169
    David
    Staff
    Customer Support

    Hi there,

    in the Menu builder the Navigation Label will accept HTML so you could simply add an <img src="full_url_to_image/image.jpg" width=50 height=50" /> tag instead of a title.

    #1275691
    Agnieszka

    David, thank you for your advice. I have tried that and when I click on the image it takes me nowhere. It shows page not found. And its a lot of work. I would like the second navigation to be like an archive. Is there any way to make the menu use widgets? It would be so much easier and faster to change the images.
    Thank you!

    #1275997
    Leo
    Staff
    Customer Support

    David’s solution is definitely the easiest.

    I don’t see the secondary navigation in your site.

    Can you add it in so we can see why it isn’t working?

    Let me know 🙂

    #1276048
    Agnieszka

    Leo, I am not very techie so I am sorry David, you might be right. For me it’s easy to use widgets. You can’t see the secondary navigation because it is hidden since I didn’t put anything in it.
    Going back to the code David wrote, do I use the post’s feature image? or I create thumbnail, downloading it to my library, and using it?
    TIA

    #1276524
    David
    Staff
    Customer Support

    Would this Menu display the most recent posts ? A bit like the Recent Posts widget ?

    #1276650
    Agnieszka

    David, yes but I want to control what posts go there.

    #1276655
    Agnieszka

    if you look at my blog, right now I have the older posts displayed on my right sidebar. I think it looks too busy and it would look better if I had them displayed in the secondary menu.

    #1277052
    David
    Staff
    Customer Support

    Try adding this PHP Snippet to your site:

    add_filter('wp_nav_menu_objects', 'db_secondary_thumbnail_menu', 10, 2);
    
    function db_secondary_thumbnail_menu($sorted_menu_objects, $args) {
    	
    	// Check for secondary menu
    	if ($args->theme_location != 'secondary')
            return $sorted_menu_objects;
    
        // edit the menu objects
        foreach ($sorted_menu_objects as $menu_object) {
            // check menui for posts and pages
            if ( in_array($menu_object->object, array('post', 'page' )) && has_post_thumbnail($menu_object->object_id) ) {
                // get title and post thumbnail
                $menu_object->title = sprintf(
                    '<span class="menu-title">%1$s</span>%2$s',
                    $menu_object->title,
                    get_the_post_thumbnail($menu_object->object_id, 'thumbnail')
                );
            }
        }
    
        return $sorted_menu_objects;
    }

    Then add this CSS:

    .secondary-navigation .main-nav ul li a {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    
    .secondary-navigation .main-nav ul li a img {
        height: 30px;
        width: auto;
        ;
        margin-right: 10px;
    }

    Then simply add Posts to your Secondary menu and it should display their thumbnails with them.

    #1310470
    Doug triplett

    David,

    I am the tech implementing this. I put the php in the header but it is displaying not running. I have tried both with the run box checked and unchecked in hooks.

    I have the menu with sections linking to the posts but the images are not pulling.

    Plus the HTML snippet is creating a broken image icon

    The css is added in the proper place.

    This is all happening on agnescreates.com

    #1310907
    David
    Staff
    Customer Support

    Hi there,

    that code must be added using one of the methods provided here:

    https://docs.generatepress.com/article/adding-php/

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.