Masonry Blog Meta Elements

Hey jond33,

Thank you for the inquiry.

The category info is not included in the masonry template by default but you can still add them using “avf_masonry_entry_content” filter. Please try this code in the functions.php file.

add_filter("avf_masonry_entry_content", function($content, $entry, $config) {
    $categories = get_the_category($entry["ID"]);
    $separator = ' ';
    $output = '';
    if ( ! empty( $categories ) ) {
        $output .= "<ul>";
        foreach( $categories as $category ) {
            $output .= '<li>' . esc_html( $category->name ) . '</li>';
        }
        $output .= "</ul>";
        $content = $content . $output;
    }
    return $content;
}, 10, 3);

Please note that the filter above will only on the default post type or post types that supports categories.

Best regards,
Ismael

Hi,

Thank you for the update.

Where do you want to place the categories? You can reverse the position of the $content and the $output in this line to place the categories before the excerpt.

 $content = $content . $output;

Best regards,
Ismael

Hi,

That should be possible but you will have to add the modification directly inside config-templatebuilder/avia-shortcode-helpers/class-avia-masonry.php file because there are no filters available for this area. You can insert the categories output within this block, located on line 574.

$bg  = '<div class="av-masonry-outerimage-container">';
					$bg .=		$img_before;
					$bg .=		"<div class='av-masonry-image-container' {$img_style} {$outer_title} {$outer_alt}>";
					$bg .=			$img_html;
					$bg .=		'</div>';
					$bg .= '</div>';

Best regards,
Ismael

Hi,

Thank you for following up.

You can use the same code above and combine it with the filter, but with a few changes. Please try to replace block 574 with this code.

	$categories = get_the_category($entry["ID"]);
					$separator = ' ';
					$cats = '';
					if ( ! empty( $categories ) ) {
						$cats .= "<ul>";
						foreach( $categories as $category ) {
							$cats .= '<li>' . esc_html( $category->name ) . '</li>';
						}
						$cats .= "</ul>";
					}

					$bg  = '<div class="av-masonry-outerimage-container">';
					$bg .=      $cats;
					$bg .=		$img_before;
					$bg .=		"<div class='av-masonry-image-container' {$img_style} {$outer_title} {$outer_alt}>";
					$bg .=			$img_html;
					$bg .=		'</div>';
					$bg .= '</div>';

Best regards,
Ismael

Hi,

The categories are there but they are underneath the image container. Try to use this css code to move it on top of the background image.

.av-masonry-outerimage-container ul {
    position: absolute;
    z-index: 999;
    color: white;
}

Best regards,
Ismael