Inject category name into masonry element - Support | Kriesi.at

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
April 13, 2016 at 5:48 pm #613026

JoeLovell
Participant

Hi team,

I’m trying to return the post title and category of the relevant masonry item in the full-width masonry element. I’ve managed to get a div containing the title into the av-inner-masonry figure by adding:

$items .= “<div class=’ww-masonry-title’> <h3 class=’av-masonry-entry-title entry-title’ {$markup}>{$the_title}</h3></div>”;

around line 282 of …/config-templatebuilder/avia-shortcodes/helper-masonry.php but can’t figure out how to return the category name in the same spot.

Could you point me in the right direction?

Thanks,
Joe

April 17, 2016 at 4:54 am #615662
Ismael
Moderator
Hi JoeLovell!

Thank you for using Enfold.

Please add this in the functions.php file:
```
add_filter( 'avf_masonry_loop_prepare', 'avf_masonry_loop_prepare_mod_cat', 10, 2 );
function avf_masonry_loop_prepare_mod_cat( $key, $entries )
{
    $categories = get_the_category($key['ID']);
    $separator = ' ';
    $output = '';
    if ( ! empty( $categories ) ) {
        foreach( $categories as $category ) {
            $output .= '<span alt="' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</span>' . $separator;
        }
    }

    $key['text_after'] .= trim( $output, $separator );
    return $key;
}
```
Regards,
Ismael
April 18, 2016 at 11:24 am #616276

JoeLovell
Participant

Hi Ismael,

Many thanks for your help. This returns the category in the “av-inner-masonry-content-pos” div. The problem is that this will only display on mouseover.

I need it in the “av-inner-masonry main_color” figure (along with the title) so that it displays regardless of mouseover. Details to view site in previous message.

Many thanks,
Joe

April 20, 2016 at 5:45 am #617984
Ismael
Moderator
Hi!

We can’t locate the masonry element in your site. Please provide a link to the actual page. Or replace the code with this:
```
add_filter( 'avf_masonry_loop_prepare', 'avf_masonry_loop_prepare_mod_cat', 10, 2 );
function avf_masonry_loop_prepare_mod_cat( $key, $entries )
{
    $categories = get_the_category($key['ID']);
    //var_dump($categories);
    $separator = ' ';
    $output = '<div class="ww-masonry-cat">';
    if ( ! empty( $categories ) ) {
        foreach( $categories as $category ) {
            $output .= '<span alt="' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</span>' . $separator;
        }
    }
    $output .= '</div>';

    $key['text_before'] .= trim( $output, $separator );
    return $key;
}

// new script
add_action('wp_footer', 'ava_new_custom_script');
function ava_new_custom_script(){
?>
<script type="text/javascript">
(function($) {
    function a() {
        var masonry = $('.av-masonry-entry');
        if(!masonry.length) return;
        masonry.each(function() {
            var cat = $(this).find('.ww-masonry-cat');
            $(this).find('.ww-masonry-title').prepend(cat);
        });
    }

    a();
})(jQuery);
</script>
<?php
}
```
Remove browser cache before testing the page.

Best regards,
Ismael
April 20, 2016 at 6:46 pm #618575

JoeLovell
Participant

Hi Ismael,

That’s awesome, thanks. We’re almost completely there!

That works to inject the category in the ww-masonry-title for those items loaded on initial pageload. However, when we hit ‘LOAD MORE’, the extra items loaded get the ww-masonry-cat within the av-inner-masonry-content-pos, not the ww-masonry-title div.

I don’t think I understood you not being able to locate the masonry element in my site – how did you pick up my custom class names if you cant find the element it’s in?

Thanks as ever,
Joe

April 21, 2016 at 5:39 am #618880

Ismael
Moderator

Hi!

The custom class name is available in your first post. Where can we find the page with the masonry element?

Cheers!
Ismael

April 21, 2016 at 11:16 am #619042

JoeLovell
Participant

Hi Ismael,

The site is on our development server with the same domain name as a live site elsewhere so you’ll have to edit your hosts file to access it. Details in private content (please let me know if you can’t view the private content. I added some to a previous message that I’m not sure you received).

Cheers,
Joe

April 24, 2016 at 1:43 am #620718
Ismael
Moderator
Hey!

Replace the javascript with this:
```
// new script
add_action('wp_footer', 'ava_new_custom_script_masonry');
function ava_new_custom_script_masonry(){
?>
<script type="text/javascript">
(function($) {
    function a() {
        var masonry = $('.av-masonry-entry');
        if(!masonry.length) return;
        masonry.each(function() {
            var cat = $(this).find('.ww-masonry-cat');
            $(this).find('.ww-masonry-title').prepend(cat);
        });
    }

    a();

    $(window).on('debouncedresize av-height-change', function() {
        setTimeout( a(), 300 );
    });
})(jQuery);
</script>
<?php
}
```
Remove browser cache before testing the page.

Best regards,
Ismael
April 25, 2016 at 7:46 pm #621619

JoeLovell
Participant

Thanks Ismael. Excellent support.
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Inject category name into masonry element’ is closed to new replies.