[Support request] Adding Post Type Icons

[John]

Hi there,

I’d like to add icons to the post-types, like a play icon for video type and so on..furthermore it would be awesome to have them posts show up like standard posts on archives, regardless of the post type.

Any idea on how to master this challenge?

Here’s the css part for them post type icons

/***** Post Format Icons *****/
.thumb-icon { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.format-image .thumb-icon:after, .format-gallery .thumb-icon:after, .format-video .thumb-icon:after, .format-audio .thumb-icon:after { position: absolute; right: 5%; bottom: 5%; font-family: “FontAwesome”; font-size: 15px; line-height: 1; color: #fff; padding: 10px; border: 2px solid #fff; border-radius: 100%; z-index: 999; background: rgba(0,0,0,0.4); }
.format-image .thumb-icon-small:after, .format-gallery .thumb-icon-small:after, .format-video .thumb-icon-small:after, .format-audio .thumb-icon-small:after { font-size: 10px; padding: 5px; }
.format-image .thumb-icon:after { content: ‘\f030’; }
.format-gallery .thumb-icon:after { content: ‘\f03e’; }
.format-video .thumb-icon:after { content: ‘\f04b’; padding: 10px 12px; }
.format-audio .thumb-icon:after { content: ‘\f028’; padding: 10px 11px; }
.format-video .thumb-icon-small:after, .format-audio .mh-thumb-icon-small:after { padding: 5px 6px; }

thanks in advance for your time & effort
Jo

[Tom]

Hi there,

You would need to set your post formats, then you could do something like this:

.format-video .wp-show-posts-image:before {
    content: "\f04b";
    position: absolute; 
    right: 5%; 
    bottom: 5%; 
    font-family: "FontAwesome"; 
    font-size: 15px; 
    line-height: 1; 
    color: #fff; 
    padding: 10px; 
    border: 2px solid #fff; 
    border-radius: 100%; 
    z-index: 999; 
    background: rgba(0,0,0,0.4);
}

.wp-show-posts-image {
    position: relative;
}

Let me know if you need more info 🙂

[John]

Hi Tom,
thanks a lot for your time and effort, works great *thumbs up*

I do need some help & guidance about them post formats though.
I setted them Post formats on functions.php like this:

( ‘post-formats’, array( ‘image’, ‘video’, ‘gallery’, ‘audio’ ) );

Those are the post formats that I would like to use on my site. Now how
do I get them to show up equally like standard posts in the Archives;;
apart from the standard format, all other formats above are showing full posts on archives, which I would like to avoid.

thanks in advance once again 🙂
Jo

[Tom]

Hi there,

Try this:

add_filter( 'generate_show_excerpt', function( $show ) {
    if ( 'standard' !== get_post_format() && ! $show ) {
        return true;
    }

    return $show;
} );

Let me know 🙂

[John]

Hi Tom,

works like it should 🙂 thanks a bunch, your help is greatly appreciated!

Keep on keeping the great work up
Jo

[Tom]

Glad I could help! 🙂

[John]

Good day to the awesome GP Team,

here I am again with allmost the same post type issue. Since we switched to GB
I’m in need of a GB related solution that will replace the .wp-show-posts-image part

.format-video .wp-show-posts-image:before {
    content: "\f04b";
    position: absolute; 
    right: 5%; 
    bottom: 5%; 
    font-family: "FontAwesome"; 
    font-size: 15px; 
    line-height: 1; 
    color: #fff; 
    padding: 10px; 
    border: 2px solid #fff; 
    border-radius: 100%; 
    z-index: 999; 
    background: rgba(0,0,0,0.4);
}

.wp-show-posts-image {
    position: relative;
} 

thanks in advance for your time & effort
John

[David]

Hi there,

your site has various post card designs ( which look great 🙂 ) some are using an Image Block for the featured image, whereas others have the image as the Container background.

Could you provide a mockup image of how you would want the icon to be displayed on the various types ?

[John]

Hi there David,

thanks for chiming in and glad that you like the layout 🙂

I’d like to have them in the bottom-right side of the picture/container like
in the screenshot
Posttype Image

thanks in advance
John

[Ying]

Hi John,

Do you want to add the icon to all cards’ images? Or only the video format cards?

Can you point us to where you want to add the icon?

[John]

Hi Ying,

I’d like to have them in 4 post format cards, video, sound, image and gallery.

Here’s the previously used css for 3 post formats

/***** post format icons *****/
.format-video .wp-show-posts-image:before {
    content: "\f04b";
    position: absolute;
    right: 5%;
    bottom: 5%;
    font-family: "FontAwesome";
    font-size: 15px;
    line-height: 1;
    color: #fff;
    padding: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    z-index: 999;
    background: rgba(0,0,0,0.4);
}
.format-image .wp-show-posts-image:before {
    content: "\f030";
    position: absolute;
    right: 5%;
    bottom: 5%;
    font-family: "FontAwesome";
    font-size: 15px;
    line-height: 1;
    color: #fff;
    padding: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    z-index: 999;
    background: rgba(0,0,0,0.4);
}
.format-gallery .wp-show-posts-image:before {
    content: "\f03e";
    position: absolute;
    right: 5%;
    bottom: 5%;
    font-family: "FontAwesome";
    font-size: 15px;
    line-height: 1;
    color: #fff;
    padding: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    z-index: 999;
    background: rgba(0,0,0,0.4);
}
.wp-show-posts-image {
    position: relative;
}

[Ying]

Can you link me to where you want to apply the icons?

I need to see the HTML to write CSS.

[John]

Of course, please have a look at the private information 🙂

[Ying]

Can you point me to the sections that are video, sound, image and gallery post format?

I cannot read Greek, unfortunately.

[John]

It should work site-wide like it worked by having .wp-show-posts in use, there are no specific sections.
It’s a pity though, that you don’t speak greek 😀

[Author]

Posts