GET FREE VERSION GET THE PRO VERSION

Show labels for Media Grid plugin

Learn how to display the product labels for Media Grid - WordPress Portfolio plugin.

In this article

Overview

Media Grid is a popular WordPress plugin to create images grids with different layouts and styles.

As one of the features this plugin can show a grid of WooCommerce products with these products images and titles/descriptions.

The main problem is that the Advanced Woo Labels plugin labels are not working with images grids by default. This problem occurs due to the fact that Media Grid just doesn't have proper hooks that we can use to display the labels.

Media Grid images without labels

Media Grid images without labels

The good news is that you still can display the labels for this grid. More details about how to do that you can read below.

Solution to display labels for Media Grid

So, as has been mentioned, it is still possible to display the label.

To do this we need to make some changes in the Media Grid plugin source code.

The problem with this solution is that after the plugin update all that changes will be lost. So one of the solutions here is not to update the plugin or manually add the same changes after each update.

Anyway to force the media grid to display the labels please open wp-content/plugins/media-grid/classes/items_renderer.php, find line

$code .=  
'<div class="mgi_thumb_wrap" '.$autoheight_padding.'>'.
    '<div class="mgi_thumb mgi_main_thumb mgi_bg_pos_'. get_post_meta($this->item_id, 'mg_thumb_center', true) .'" data-fullurl="'. $thumbs['desktop'] .'" data-mobileurl="'. $thumbs['mobile'] .'" data-item-title="'. esc_attr($post->post_title) .'"></div>
</div>
<noscript>
    <img src="'. $thumbs['desktop'] .'" alt="'. esc_attr($post->post_title) .'" />
</noscript>';

and replace it with

$code .=  awl_get_labels_html_by_position( 'on_image', $this->item_id ) .
'<div class="mgi_thumb_wrap" '.$autoheight_padding.'>'.
    '<div class="mgi_thumb mgi_main_thumb mgi_bg_pos_'. get_post_meta($this->item_id, 'mg_thumb_center', true) .'" data-fullurl="'. $thumbs['desktop'] .'" data-mobileurl="'. $thumbs['mobile'] .'" data-item-title="'. esc_attr($post->post_title) .'"></div>
</div>
<noscript>
    <img src="'. $thumbs['desktop'] .'" alt="'. esc_attr($post->post_title) .'" />
</noscript>';

That's all! Now just check your media grid - labels must be visible for each image inside it ( of course, if greed displaying WooCommerce products and the product meets label display condition ).

Media Grid images with labels

Media Grid images with labels