Forum Display Enhancements - Digital Point Thread Avatars

Unfortunately, I don't have the time to maintain and support this add-on in two locations. The newest version (and support) can always be found here: https://marketplace.digitalpoint.com...atars.886/item

About
This changes thread icons to be the avatar of the thread starter. It applies to thread listings on forumdisplay, search results and subscribed threads in the UserCP.

Installation

• Upload the cssrollup_digitalpoint_threadavatars.xml file to includes/xml (this is really only needed if you store CSS as files in the file system)
• Install the product-dp_thread_avatars.xml product under AdminCP -> Plugins & Products -> Manage Products -> Add/Import Product

Notes

• Icons are cropped (but never stretched) to be square for display.
• Threads with no new posts have the avatar slightly greyed out.
• Locked threads will have a lock image overlayed.
• Soft-deleted threads will have a red X image overlayed.
• If the user posted in the thread, they will see a mini version of their avatar overlayed.
• If a thread is "hot", the shadow of the icon will change color.
• ZERO SQL queries are added.
• Overlay images are encoded as CSS data (no extra HTTP requests needed for images or the CSS files themselves).
• If your site uses pre-defined avatars, they are not scaled down for use as the icon since vBulletin does not store the dimensions (instead, the upper/left potion is cropped for the icon).

Settings

• You can disable the mini-avatars under AdminCP -> Settings -> Options -> Forum Display Options (forumdisplay) -> Highlight Threads in Which User Has Posted
• You can disable the hot thread highlight under AdminCP -> Settings -> Options -> Forum Display Options (forumdisplay) -> Hot Threads Enabled
• You can change the color of the hot thread shadow under AdminCP -> Styles & Templates -> Style Manager -> StyleVars -> dpta_shadow_hot_color
• You can change the size of the avatar under AdminCP -> Styles & Templates -> Style Manager -> StyleVars -> threadbit_iconsize (since they are square, it keys only on width)
• If your site uses pre-defined avatars, you should use the AdminCP -> Settings -> Options -> User Picture Options -> Site Uses Pre-Defined Avatars option

Screenshots


Advanced

• If you want to add your own mini-icon overlays, you can utilize the $template_hook['thread_avatars'] variable to do so.
• If you want to selectively disable thread avatars, you can set the $show['hide_thread_avatars'] to true. This would allow you to create a custom profile field for users and set the $show['hide_thread_avatars'] based on the user's setting. Alternately you could enable the addon for certain usergroups or just for specific styles.

[Lazorbeam]

Originally Posted by digitalpoint

Was the XML file always there? If you uploaded it after you installed the plug-in, you would need to recompile the thread avatar templates (under AdminCP -> Maintenance -> Update Counters).

Tried that, no dice.

Running 4.1.4 if it matter any. Regardless, great mod, I'm still using it :P.

Question though - this mod made my "what's new" page load very slow. I believe it's because of all the "large" avatars being resized. Are there any plans to pre-shrink the avatars one way or another?

[vigneshrajesh]

Just installed and working great..thank you so much for this awesome mod..

[digitalpoint]

Originally Posted by Lazorbeam

Tried that, no dice.

Running 4.1.4 if it matter any. Regardless, great mod, I'm still using it :P.

Question though - this mod made my "what's new" page load very slow. I believe it's because of all the "large" avatars being resized. Are there any plans to pre-shrink the avatars one way or another?

Do you have a URL where you are seeing it?

As far as storing a resized version, no... there are no plans to.

[sadiq6210]

Could you see the attached photo
There is some avatars which is not in the center (there is empty space in the right)

This is my dpta.css & the icon size= 42x42 px

.threadbit .threadstatus.avatars {
	background:transparent none no-repeat 0 0 !important;
	width:{vb:math {vb:stylevar threadbit_iconsize.width}-6}px !important;
	height:{vb:math {vb:stylevar threadbit_iconsize.width}-6}px !important;
        padding: 2px;
	min-height:{vb:math {vb:stylevar threadbit_iconsize.width}-6}px;
	overflow:hidden;
	margin:5px 10px 6px;
        border: 1px solid #A5CAE4;
	border-radius:4px;
}

.threadbit .threadstatus.avatars img.icon {
	min-height:{vb:math {vb:stylevar threadbit_iconsize.width}-6}px;
}

.threadbit.hot .threadstatus.avatars {
	box-shadow:0 0 0 1px #777, 0 0 3px 2px {vb:stylevar dpta_shadow_hot_color};
	-webkit-box-shadow:0 0 0 1px #777, 0 0 3px 2px {vb:stylevar dpta_shadow_hot_color};
}

.threadbit .icon {
	opacity:0.7;
	filter:alpha(opacity=70);
}

.threadbit.new .icon {
	opacity:1;
	filter:alpha(opacity=100);
}

.threadbit img.self {
	max-width:20px;
	max-height:20px;
	background:#fff;
        border: 1px solid rgb(206, 206, 206);
	padding:1px;
	border-radius:2px;
	position:absolute;
	top:{vb:math {vb:stylevar threadbit_iconsize.width}-15}px;
	right:{vb:math {vb:stylevar threadbit_iconsize.width}-6}px;
}

.threadbit.lock .lockicon {
	position:absolute;
	top:2px;
	right:7px;
	width:20px;
	height:20px;
	background:URL(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAUCAYAAABSx2cSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAuFJREFUeNqklF9IU3EUx7/7c7dd3dza5h+2aUYlS9AeSlPBfEiUSAtMxAeFoBZU2kOYTxFWFPhSlk9i4EtlFIi9lgMtqBfFcNjsISrUMHPrzn/bvd7tdn5jkyvSSx343N89957v75x7fr/f1SiKgn81PbtoNJq0z24yCBfhJixEjPhBLBBrRGKHWCV0Go3GE1VVlZ3l5WWHwuEw77A7xGBwbn58YmIwEomMUswiEU8qVGXbeJPJ19vbG5qanFQu+nybRUUHVxobG1b9/jFl+NnTjWyn8w7F5W2nS4m1RFV7W9vCo4d9itvtniH/AnGSaLVara+ud3VJ3d1dAvmnCaNabKaAG7dv9cQLCvK/kl9H8Kn5OaLUZrONd3ZcUfI9ntFUP5IZmVlIfIwapxWEyAfyA0Q09W6L+CKKon91dU3ZY7eXkG9Xi00cp7fKsgy9XhdWCdMmUYWRRCKe0Om0hnTZ6W5nSJJkptkhilIh+ZXEunpJaeJiNnk8nmz0DnF2dfXxvUfLytHcvFxBGY7wPK/hOA5MEIvF2Kipr6/TObNzsmZmAha12NHU1GSpra2Fy+VysE1DDYLZbEY0GoUgCKDK4PV6kZubZ+rv789UizmWgQUwmHhjYyM5sqwM9px9Fosj0+3YYQaDgeCoYRy24nrISiYUbSZ4XkvfKWNL1iAq6qHAgF3b883YBGaD3xFe+oj6ChlujxaBgA4jfhkhQUJjjQElOfsghTZ3iz0ZbxH+Noa+wVkMDQFXW4HOFqCoAegZAG7eMyIw7UTZYde2OL3OWPwFdDTHEHgOXDoL3H8CFJwCBkaAB9eAd4+1iEVj6B8Wd2WOe7ztCMr7YTBNoeWcgpozRkx/5qhkGS/mZFSWcui5ewD+9ys477ucUIuXIsJPcX7BonwKSoqeM8Bm5WDN4qmJEn4LW3j5eh2Fe0OacGiZpV5KnmF2MGhJHHRfTOSmzvXfTEkJg0QI//Mb+iPAADsYK/mrQU8kAAAAAElFTkSuQmCC) top right no-repeat;
}

.threadbit .threadstatus.avatars div.overlay {
	position:absolute;
	top:2px;
	right:2px;
	width:32px;
	height:32px;
	background:URL(data:image/png;base64,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) top right no-repeat;
}

[digitalpoint]

What is the URL?

[sadiq6210]

Please check your pm's Shawn

[digitalpoint]

Oh... looks like it's a RTL issue. If you change the "Calculate Avatar For Thread" plug-in to this, does it work?

PHP Code:

if ($show['hide_thread_avatars'] != true) {
    if ($thread['avatarid']) {
        $thread['avatarurl'] = $thread['avatarpath'];
    } else {
        if ($thread['hascustomavatar'] AND $vbulletin->options['avatarenabled']) {
            if ($vbulletin->options['usefileavatar']) {
                $thread['avatarurl'] = $vbulletin->options['avatarurl'] . '/avatar' . $thread['postuserid'] . '_' . $thread['avatarrevision'] . '.gif';
            } else {
                $thread['avatarurl'] = 'image.php?' . $vbulletin->session->vars['sessionurl'] . 'u=' . $thread['postuserid'] . '&dateline=' . $thread['avatardateline'];
            }
            if ($thread['width'] == 0) {
                $thread['avatar_css'] = 'min-height:' . (vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6) . 'px;min-width:' . (vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6) . 'px;';
            } elseif ($thread['width'] == $thread['height']) {
                $thread['avatar_css'] = 'width:' . (vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6) . 'px;';
            } elseif ($thread['width'] < $thread['height']) {
                $thread['avatar_width'] = vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6;
                $thread['avatar_height'] = $thread['height'] / ($thread['width'] / (vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6));
                $thread['avatar_css'] = 'width:' . $thread['avatar_width'] .  'px;position:relative;top:' . intval(((vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6) - $thread['avatar_height']) / 2) . 'px;';
            } else {
                $thread['avatar_height'] = vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6;
                $thread['avatar_width'] = $thread['width'] / ($thread['height'] / (vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6));
                $thread['avatar_css'] = 'height:' . $thread['avatar_height'] .  'px;position:relative;' . vB_Template_Runtime::fetchStylevar("left") . ':' . intval(((vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6) - $thread['avatar_width']) / 2) . 'px;';
            }
        } else {
            $thread['avatarurl'] = '';
            $thread['avatar_css'] = 'height:' . (vB_Template_Runtime::fetchStylevar("threadbit_iconsize.width") - 6) . 'px;';
        }
    }
} 


[sadiq6210]

Thanks Shawn :up:

It is better now, but still there is a strange bug in resizing the avatar (the width and even in height)
See this screen-shot

Note that:
I added ( padding: 2px; ) in dpta.css
https://vborg.vbsupport.ru/showpost....&postcount=134

[digitalpoint]

Remove the 2px padding? That's the issue.

[sadiq6210]

Originally Posted by digitalpoint

Remove the 2px padding? That's the issue.

I want to put a space between the border and the inside img like the padding

Is there another method can I use it to get same result?

Because I am using the padding in online avatars, last post avatar and I didn't face any problem.