Skip to:
Content
Pages
Categories
Search
Top
Bottom

avatars in topic list view

  • @andrew55

    Participant

    I’ve seen in other forums where avatars of user’s who created topic are shown as topic icons in the topic list view. So every topic has an avatar next to it.

    Any suggestions on how to accomplish this? Is there a setting that controls this or maybe a plugin? I’ve been searching and can’t seem to find a solution.

Viewing 15 replies - 1 through 15 (of 15 total)
  • @andrew55

    Participant

    I realize there is already a smaller avatar showing for each topic, but I’m talking about a larger avatar icon to the left of each topic. Is there a setting or maybe a plugin to enable this feature?

    @robkk

    Moderator

    you can use this PHP function

    function rkk_topic_av() {
    	    	echo bbp_get_topic_author_link( array( 'size' => '32' , 'type' => 'avatar'));
    }
    add_action('bbp_theme_before_topic_title','rkk_topic_av');

    here is some custom CSS you can use.

    li.bbp-topic-title .avatar-32 {
      margin-right: 5px;
    }

    then to remove the small one you can copy loop-single-topic.php into your child theme into a folder called bbpress.

    look for

    <span class="bbp-topic-started-by"><?php printf( __( 'Started by: %1$s', 'bbpress' ), bbp_get_topic_author_link( array( 'sie' => '14' ) ) ); ?></span>

    change it to.

    <span class="bbp-topic-started-by"><?php printf( __( 'Started by: %1$s', 'bbpress' ), bbp_get_topic_author_link( array( 'type' => 'name' ) ) ); ?></span>

    @andrew55

    Participant

    Great – thank you very much. Works fine and looks great.

    A couple quick questions:

    1. Any suggestions on how to get the “Started by” text and username to display right under the topic title, to the right of the avatar, just like the topic title? Right now it is under the avatar.

    2. Long topic tiles are now wrapping under the avatar. Any suggestion on how to style the second line of title so it doesn’t wrap, but stays indented as the first line of the topic?

    I’m looking at the code and css and can’t figure it out. Thanks!

    @robkk

    Moderator

    1.

    change the size to a 48

    put this into your child themes functions.php file or a functionality plugin

    function rkk_topic_av() {
    	    	echo bbp_get_topic_author_link( array( 'size' => '48' , 'type' => 'avatar'));
    }
    add_action('bbp_theme_before_topic_title','rkk_topic_av');

    then use this CSS

    put this into anywhere you can put custom CSS

    a child themes style.css
    jetpacks custom css module
    any standalone custom css plugin.

    li.bbp-topic-title .avatar-48 {
      float: left;
      margin-right: 5px;
    }

    2. i guess use the text-overflow property in CSS

    here is an example.

    http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

    @lanhuong11022

    Participant

    You can refer to the source code in http://camaushop.net/

    @andrew55

    Participant

    Thank you robkk and lanhuong11022. I’m new to bbPress and appreciate the help getting started. The theme files are completely new to me, so it’s been fun trying to figure out everything.

    I was able to get the avatar larger. I’m still hungup on getting the overflow figured out.

    http://camaushop.net/ is a great start. It appears they have the avatar somehow wrapped in a span, and the span has the overflow assigned to it.

    I’m not asking anyone to hold my hand, but if I was to attempt to add a span around those forum icons, any suggestions on what theme file I might start experimenting with?

    Thanks for any suggestions.

    @stagger-lee

    Participant

    @lanhuong11022, what is that ? Is that bbPress forum ?

    @stagger-lee

    Participant

    Try with this:
    (I am not sure if it is this 100%, but try)

    //* Notice the line 7, 8, 10 and 11
    function my_bbp_change_avatar_size($author_avatar, $topic_id, $size) {
        $author_avatar = '';
        if ($size == 14) {
            return $author_avatar;
        }
        if ($size == 80) {
            $size = 110;
        }
        $topic_id = bbp_get_topic_id( $topic_id );
        if ( !empty( $topic_id ) ) {
            if ( !bbp_is_topic_anonymous( $topic_id ) ) {
                $author_avatar = get_avatar( bbp_get_topic_author_id( $topic_id ), $size );
            } else {
                $author_avatar = get_avatar( get_post_meta( $topic_id, '_bbp_anonymous_email', true ), $size );
            }
        }
        return $author_avatar;
    }
    
    /* Add priority (default=10) and number of arguments */
    add_filter('bbp_get_topic_author_avatar', 'my_bbp_change_avatar_size', 20, 3);
    add_filter('bbp_get_reply_author_avatar', 'my_bbp_change_avatar_size', 20, 3);
    add_filter('bbp_get_current_user_avatar', 'my_bbp_change_avatar_size', 20, 3);

    @andrew55

    Participant

    Stagger Lee – thanks for that, although it’s way over me head.

    When I got it in to functions.php, it does work partially (at certain screen widths). But at other screen widths, the text starts wrapping under the icon again.

    I’ll keep messing with it, but I’m open to suggestions.

    @robkk

    Moderator

    @andrew55

    I’m still hungup on getting the overflow figured out.

    link to your site and i could help with that.

    It appears they have the avatar somehow wrapped in a span, and the span has the overflow assigned to it.

    i dont think you need a span for it , i could add it into the code but im sure it will be fine with just a float:left;


    @stagger-lee

    what is that ? Is that bbPress forum ?

    that was not a bbPress forum, its something else.

    @stagger-lee

    Participant

    Take rest with CSS. Dont know how it looks.

    Small warning. If your forum is not visited well it could look amateurish. You will have post after post, after post, avatar of one and same User/Topic author.

    Same situation is if you use automatic bbPress topic from WordPress Posts.

    Making bigger avatars can make things worse if you dont have many Users. For instance another tweak “last commenter avatar”. I tried all this, and if you have just one User who like to comments more than other Users, it looks boring to see enlarged avatar of this User on whole screen everywhere.

    I mean easier to take it if avatar is few pixels big.

    @andrew55

    Participant

    stagger-lee – thank you very much for the warning/advice. Actually, that makes perfect sense. I went back to the previous topic view (with no large icons). For other sites it might make more sense, so hopefully the topic created here might help someone.

    I am going to stick with using forum icons in our main forum view. It adds a great look.

    I got some great help from Robkk creating these earlier, but I’m having the same issue. The long forum descriptions are wrapping under the forum icon, as can be seen in the example below with the lock icon.

    Any suggestion on how to style the forum description so it doesn’t wrap, but stays to the right of the forum icon?

    Here’s a link to our test site:
    https://www.lifeleap.org/newcommunitysite/

    Thanks for any suggestions.

    @stagger-lee

    Participant

    Separate bbp-forum-content on bbpress.css line 537 or use !important:

    .bbp-forum-content {
    margin: 0 0 0 73px !important;
    }

    display:table; gives you same effect.

    @andrew55

    Participant

    AH! Works great. Perfect. Thanks.

    @stagger-lee

    Participant

    Make CSS override. It will be lost with bbPress update.

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