[Resolved] Adding Post Type Icons

Home Forums Support Adding Post Type Icons

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1280092
    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

    #1281251
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1281332
    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

    #1281713
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

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

    Let me know 🙂

    #1281722
    John

    Hi Tom,

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

    Keep on keeping the great work up
    Jo

    #1281724
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.