Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Support request] 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 10 posts - 1 through 10 (of 10 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 2 months, 1 week 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
    Participant

    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
    Participant

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

    • This reply was modified 2 months, 1 week ago by elvin.
    #19606
    Li-ran
    Participant

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

    #19608
    elvin
    Participant

    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
    Participant

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

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