[Resolved] Show categories inside featured images

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Show categories inside featured images

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #19532
    Li-ran
    Participant

    Hey,

    With the help of the support team at GeneratePress, I was able to get the categories to show inside the featured images (here’s an example).

    Any idea of how to make this work with WPSP as well?

    • This topic was modified 7 months, 3 weeks ago by Li-ran.
    #19581
    Tom
    Keymaster

    Hi there,

    Can you share the code you’re using for the GP posts? It should be very similar, we just need to add the items to the wpsp_inside_image_container hook.

    #19591
    Li-ran
    Participant

    Here it is:

    .post-image{
       position: relative;
    }
    .post-image > a > img.wp-post-image {
       width: 100%;
    }
    .post-image > span.cat_links { 
       position: absolute; 
       margin:0; 
       top:auto; 
       bottom: 7.5%; 
       left: 5%;
    }
    .post-image > span.cat_links > span > ul{
       list-style:none;
       margin:0;
       padding:5px;
    }
    
    #19597
    elvin
    Moderator

    Hi Liran,

    I’ve rewritten the code to work for WPSP. You can try this PHP code out.

    add_action( 'wpsp_inside_image_container', function( $settings ) {
        if ( 77 === $settings['list_id'] ) {
            $wpsp_cat_list = get_the_category_list(); 
    		$wpsp_category = get_the_category();
    		if ($wpsp_category) {
    			foreach($wpsp_category as $wpsp_cat) {
    			$wpsp_cat_slug = $wpsp_cat->slug; 
    			}		
    		}
    		if($wpsp_cat_list){echo '<span class="cat_links"><span class="'.$wpsp_cat_slug.'">'.$wpsp_cat_list.'</span></span>';} 
    	}
    });

    And style it with this CSS code.

    .wp-show-posts-image{
       position: relative;
    }
    .wp-show-posts-image > a > img.wp-post-image {
       width: 100%;
    }
    .wp-show-posts-image > span.cat_links { 
       position: absolute; 
       margin:0; 
       top:auto; 
       bottom: 7.5%; 
       left: 5%;
    }
    .wp-show-posts-image > span.cat_links > span > ul{
       list-style:none;
       margin:0;
       padding:5px;
    }

    We basically just replaced the generate_inside_featured_image_output hook from GP default with wpsp_inside_image_container for WPSP.

    And since WPSP has a slightly different CSS selector, we simply adjust the CSS selectors. We just changed .post-image(GP) to .wp-show-posts-image(WPSP).

    Everything else is pretty much the same.

    #19600
    Li-ran
    Participant

    Thanks! I’ll give it a try.

    #19602
    elvin
    Moderator

    Important note: if ( 77 === $settings['list_id'] ) on this line, make sure you change ’77’ to your WPSP list ID.

    • This reply was modified 7 months, 3 weeks ago by elvin.
    #19606
    Li-ran
    Participant

    Works like a charm! Do I need to create a new snippet for each list?

    #19608
    elvin
    Moderator

    Nice one,

    Works like a charm! Do I need to create a new snippet for each list?

    You definitely can do that if you have multiple WPSP lists and only want to apply it on some.

    But if you want this applied on all of your WPSP list, you can simply remove the if condition and just do this instead.

    add_action( 'wpsp_inside_image_container', function( $settings ) {
            $wpsp_cat_list = get_the_category_list(); 
    		$wpsp_category = get_the_category();
    		if ($wpsp_category) {
    			foreach($wpsp_category as $wpsp_cat) {
    			$wpsp_cat_slug = $wpsp_cat->slug; 
    			}		
    		}
    		if($wpsp_cat_list){echo '<span class="cat_links"><span class="'.$wpsp_cat_slug.'">'.$wpsp_cat_list.'</span></span>';} 
    });
    #19611
    Li-ran
    Participant

    Good to know. I appreciate your help, elvin.

    #19613
    elvin
    Moderator

    No problem. We’re always glad to be of any help.:)

    #26285
    José Antonio
    Participant

    Hi!, is possible add the categories inside the header, just after the title?

    Thanks!

    #26292
    elvin
    Moderator

    Hi Jose,

    You can add the categories below the title through the Meta tab. Make sure to check “Include terms” and set its dropdown value to “Below title” as shown here:
    https://share.getcloudapp.com/7Kup2lnz

    #26299
    José Antonio
    Participant

    Hi Elvin, thank you very much for your support.

    I have not explained myself well, sorry.

    I filter my content through a single tag that I have called “featured-home”, but I need to show also only the category it belongs to, not the tag used to filter the content.

    So I found the snippet in answer #post-26285

    But your snippet puts the span tag right at the beginning:

    <div class="wp-show-posts-inner" style="">
      <div class="wp-show-posts-image wpsp-image-center">
        <span class="cat_links">
          <span class="new-products">
          <ul class="category tag">
              <li><a href="https://contoso.com" rel="category tag">New products</a></li>
            </ul>
            </span>
          </span>
            <a href="https://contoso.com" title="Buy now">
              <img width="680" height="680" src="image.jpg">
            </a>
      </div>
      <header class="wp-show-posts-entry-header">
        <h2 class="wp-show-posts-entry-title">
          <a href="https://contoso.com/buy-now/" rel="bookmark">Buy now</a>
        </h2>
      </header>
      <!-- .entry-header -->
    </div>
    <!-- wp-show-posts-inner -->
    

    For SEO purposes I would like to place it inside the header tag, just behind the title, this would be my ideal code:

    <div class="wp-show-posts-inner" style="">
      <div class="wp-show-posts-image wpsp-image-center">
            <a href="https://contoso.com" title="Buy now">
              <img width="680" height="680" src="image.jpg">
            </a>
      </div>
      <header class="wp-show-posts-entry-header">
        <h2 class="wp-show-posts-entry-title">
          <a href="https://contoso.com/buy-now/" rel="bookmark">Buy now</a>
        </h2>
        <h3 class="category tag">
          <a href="https://contoso.com" rel="category tag">New products</a>
        </h3>
      </header>
      <!-- .entry-header -->
    </div>
    <!-- wp-show-posts-inner -->

    it’s possible?

    Thanks

    #26328
    elvin
    Moderator

    Ah yes, that’s because the snippet I’ve written was specifically for category overlaying on the featured image.

    You should use the wpsp_after_title hook to add your code in.

    add_action('wpsp_after_title',function(){
    //do your code here.
    });
    #26469
    José Antonio
    Participant

    Hi Elvin, work fine, thanks!

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