Show category in Masonry gallery with link to overview posts in that category

Hey Frans,

Thank you for the inquiry.

Where can we check the modification? There are a lot of suggestions in the previous thread and we are not sure which one has been implemented. Please provide the site URL in the private field so that we can check the masonry element.

Best regards,
Ismael

Hi,

Thank you for the info.

To add a link to the categories, please replace the filter with the following code.

add_filter("avf_masonry_entry_content", function($content, $entry, $config) {
    $categories = get_the_category($entry["ID"]);
    $separator = ' ';
    $output = '';

    if ( ! empty( $categories ) ) {
        $output .= "";

        foreach( $categories as $category ) {
            $output .= '<span data-link="'. get_term_link($category->term_id, $category->taxonomy) .'" class="blog__masonry–categorie">' . esc_html( $category->name ) . ' / </span>';
        }

        $output .= "";

        $content = $output . $content;
    }
    return $content;
}, 10, 3);

Then add this script below.

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function($) {
            $(document).ready(function() {
                // redirect to the category page
                $('.av-masonry-entry').on('click', function(e) {
                    e.preventDefault();
                    var cat_link = $(e.target).attr('data-link'),
                        link = cat_link == undefined ? $(this).attr('href') : cat_link; 
                         
                    window.location.href = link;
                });
            });
        })(jQuery);
    </script>
<?php 
}, 999 );

Best regards,
Ismael

Hi,
Please note that the post excerpts will not show for posts created with the Advanced Layout Builder, you will need to manually add the excerpts with the Excerpts Option.
For blog posts there are a few elements that will not show automatically for posts created with the Advanced Layout Builder, typically it is recommended to use the WordPress default editor for posts to take advantage of the automatic features, but you are welcome to manually add the elements such as the social share buttons, the comment form, and the related posts element, along with manually adding your own excerpts, if you wish.
As for moving the filter to the left with 260px laft padding, this css is working in my test:

#top .av-masonry-sort {
    text-align: left;
}
#top .av-masonry-sort .av-sort-by-term {
    padding: 0px 0px 0px 260px;
}

Please see the screenshot in the Private Content area.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the screenshot, try changing the “/” and adding the line break in the function, like this:

$output .= '<span data-link="'. get_term_link($category->term_id, $category->taxonomy) .'" class="blog__masonry–categorie">' . esc_html( $category->name ) . ' - </span><br/>';

Best regards,
Mike

Hi,
Please include an admin login & a direct link to the page in your screenshot in the Private Content area, so we can examine.

Best regards,
Mike

Hi,
Thanks for the login, I adjusted the function to this:

add_filter("avf_masonry_entry_content", function($content, $entry, $config) {
    $categories = get_the_category($entry["ID"]);
    $separator = ' ';
    $output = '';

    if ( ! empty( $categories ) ) {
        $output .= "";

        foreach( $categories as $category ) {
            $output .= '<span data-link="'. get_term_link($category->term_id, $category->taxonomy) .'" class="blog__masonry–categorie">' . esc_html( $category->name ) . ' / </span>';
        }

        $output .= "<br/>";

        $content = $output . $content;
    }
    return $content;

}, 10, 3);

please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry I didn’t know you wanted two line breaks, please check now.

Best regards,
Mike

Hi,
The masonry item is already a link so you can’t add another link to it. I added Lees verder > as in other places on your site:

Best regards,
Mike