Masonry Portfolio featured or highlighted image

Hi Jameel!

Thank you for using Enfold.

I would like to check the page but the website is currently on maintenance mode. Please post a temporary login details here so that we can check the masonry item. If possible, please provide a screenshot of what you’re trying to do. Use imgur or dropbox for the screenshot.

Regards,
Ismael

Hi!

Add this in the functions.php file:

add_filter( 'avf_masonry_loop_prepare', 'avf_masonry_loop_prepare_mod', 10, 2 );
function avf_masonry_loop_prepare_mod( $key, $entries )
{
  $postcategories = get_the_terms($key['ID'], 'portfolio_entries');
  $categorylist  = array();

  if ($postcategories) {
    foreach($postcategories as $cat) {
      $categorylist[] = $cat->name;
    }
  }

  $featured = in_array("Featured",$categorylist);

	foreach ( $key as $post => $value ) {
			if ( $post == 'content' && $featured) { $value .= "<div class='av-masonry-featured'>Featured Project</div>"; }
			$key[$post] = $value;
	}
    return $key;
}

Edit the portfolio item that you want to set as featured project then add a new category called “Featured”. You will know that it works if you see the “Featured Project” text in the portfolio item. Use the .av-masonry-featured selector to change the style of the text.

Best regards,
Ismael

Hi!

I actually updated the code above. Let’s start again. Please use this instead:

add_filter( 'avf_masonry_loop_prepare', 'avf_masonry_loop_prepare_mods', 10, 2 );
function avf_masonry_loop_prepare_mods( $key, $entries )
{
  $postcategories = get_the_terms($key['ID'], 'portfolio_entries');
  $categorylist  = array();

  if ($postcategories) {
    foreach($postcategories as $cat) {
      $categorylist[] = $cat->name;
    }
  }

  $featured = in_array("Featured",$categorylist);

	foreach ( $key as $post => $value ) {
			if ( $post == 'text_before' && $featured) { $value .= "<div class='masonry-featured'></div>"; }
			$key[$post] = $value;
	}
    return $key;
}

After that, add this below:

add_action('wp_footer', 'ava_custom_script', 10);
function ava_custom_script(){
?>
<script>
(function($) {
    $('#top .av-masonry-entry').each(function() {
      if($(this).find('.masonry-featured').length) {
        $(this).find('.av-inner-masonry').prepend('<div class="av-masonry-featured">Featured Project</div>');
      }
    });
}(jQuery));
</script>
<?php
}

Cheers!
Ismael

Hey!

You didn’t update the first code. Please check it now. You should see the “Featured” text on the top left corner of the portfolio item. Use the “.av-masonry-featured” selector to change the style of the “Featured Project” text.

Regards,
Ismael

Hi!

You can change this line:

$(this).find('.av-inner-masonry').prepend('<div class="av-masonry-featured">Featured Project</div>');

to this:

$('<div class="av-masonry-featured">Featured Project</div>').insertAfter(this).find('.av-inner-masonry-sizer');

Cheers!
Ismael