Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #464180

    Hi, is it possible to highlight (add a featured banner or ribbon) to 1 specific portfolio item image in a masonry portfolio. This site is for a real estate agent selling pre-construction condo units in several different condo projects. I’ve got it set up so each project is a separate portfolio item and is displayed in the masonry portfolio. He wants to be able to choose one of the projects to be a featured project. Here is a link to the site so you know what I mean: http://findnewcondos.com

    Thank you.

    #464469

    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

    #464591

    Hi Ismael, The site is not supposed to be in maintenance mode. I don’t get the maintenance mode on my end, even when i’m not logged in.

    I’ve attached the login info in the private section.

    Here is the screenshot of what i’m trying to do: http://i.imgur.com/4SNAZq8.jpg

    As you can see on the top left image of the masonry portfolio, I would like to add a banner on the corner of the image that says “Featured Project”. It’s similar to what you guys have here on your forum reply boxes where it says “Team Kriesi.at”.

    Thank you!

    #464870

    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

    #465041

    Hi Ismael, that didn’t work for me.

    – I added the code to the functions.php file.
    – I created a new portfolio category called “Featured” and chose it for the portfolio item.
    – I made sure Featured was selected in the Masonry Element.

    Nothing changed except Featured is now an option in the sort list at the top.

    #466289

    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

    #466495

    Hi, unfortunately that didn’t do what I needed it to do.

    With the code you sent, it added the text Featured Project below the title when you hover over the image. I need it to look like the image I sent you previously (http://i.imgur.com/4SNAZq8.jpg) with the Featured Project on the top right corner of the image in in white with an orange background to match the site.

    Thank you for all your help so far, it’s much appreciated.

    #466903

    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

    #467093

    Thank you!

    It seems that the text is on the overlay layer. How would I get the opacity up on the “.av-masonry-featured” selector not not on the overlay layer?

    #467351

    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.