• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Quotes with avatars

CyberAP

CyberAP

Well-known member
This template modification will add avatars to your quotes (and a small arrow).

Here is how it looks:
example.webp

First step:
Open template called bb_code_tag_quote
Replace all of its contents with this:
Code: 
<xen:require css="bb_code.css" />
 
<xen:if is="{$attributes.member}">
<div class="quote_with_avatar {xen:if $ignored, ' ignored'}">
</xen:if>
 
<xen:if is="{$attributes.member}">
    <xen:set var="$avaUser.user_id">{$attributes.member}</xen:set>
    <xen:set var="$avaUser.username">{$nameHtml}</xen:set>
    <xen:set var="$avaUser.avatar_date">1</xen:set>
 
    <xen:avatar user="$avaUser" size="s" class="QuoteAvatar" />
</xen:if>
 
<xen:comment><!-- content is escaped via parser --></xen:comment>
<div class="bbCodeBlock bbCodeQuote{xen:if $ignored, ' ignored'}"{xen:if $nameHtml, ' data-author="{$nameHtml}"'}>
    <aside>
        <xen:if is="{$nameHtml}">
            <div class="attribution type">{xen:phrase x_said, 'name={xen:raw $nameHtml}'}:
                <xen:if is="{$source}">
                    <a href="{xen:link 'goto/{$source.type}', '', 'id={$source.id}'}#{$source.type}-{$source.id}" class="AttributionLink">&uarr;</a>
                </xen:if>
            </div>
        </xen:if>
        <blockquote>{xen:raw $content}</blockquote>
    </aside>
    <span class="arrow"></span>
</div>
 
<xen:if is="{$attributes.member}">
</div>
</xen:if>

Then open EXTRA.css template and add there:

Code: 
html body .pageContent .messageText .quote_with_avatar
{
    margin-top: 10px;
    {xen:if '@bbCodeBlock.margin-right',
        'margin-right: @bbCodeBlock.margin-right;',
        'margin-right: 40px;'
    }
    overflow: hidden;
}
 
body .messageText .quote_with_avatar .QuoteAvatar
{
    border: none;
    float: left;
    margin-left: 10px;
    margin-right: 0;
    margin-bottom: 10px;
    padding: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
body .messageText .quote_with_avatar .QuoteAvatar:active
{
    position: relative;
    top: 1px;
    box-shadow: none;
}
 
.messageText .quote_with_avatar .QuoteAvatar .img.s
{
    background-color: #eee;
    background-position: 0% 0%;
    background-size: 60px;
    border: none;
    padding: 0;
    width: 60px;
    height: 60px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    -webkit-transition: box-shadow 0.06s;
}
 
.messageText .quote_with_avatar .QuoteAvatar:active .img.s
{
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 2px 4px rgba(0,0,0,0.4);
}
 
body .messageText .quote_with_avatar .bbCodeQuote
{
    margin: 0;
    margin-left: 85px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
 
.messageText .quote_with_avatar .bbCodeQuote .arrow
{
    border-radius: 0;
    height: 20px;
    width: 10px;
    position: absolute;
    left: -11px;
    top: 2px;
    overflow: hidden;
}
.messageText .quote_with_avatar .bbCodeQuote .arrow:after
{
    content: " ";
    background: @bbCodeQuote.border-color;
    height: 9px;
    width: 9px;
    top: 5px;
    left: 5px;
    position: absolute;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

Current issues:
  1. Has no gravatar support. Avatars of users who use gravatar will show up as a solid color.
  2. Shows only the current avatar the author uploaded.
Credits:

infis and Pepelac helped me make this template modfication working.
 
I tried this on my site but it didn't work quite as advertised. The avatar was on a different line than the quote. But I love the idea.
 
Allan said:
CyberAP, i like that :)

But, i have other idea :p, check my modification:
Possible ?
View attachment 22142
Click to expand...
bb_code_tag_quote template:
Code: 
<xen:require css="bb_code.css" />
 
<xen:comment><!-- content is escaped via parser --></xen:comment>
<div class="bbCodeBlock bbCodeQuote{xen:if $ignored, ' ignored'}{xen:if $nameHtml, ' hasAvatar'}"{xen:if $nameHtml, ' data-author="{$nameHtml}"'}>
    <aside>
        <xen:if is="{$nameHtml}">
            <div class="attribution type">{xen:phrase x_said, 'name={xen:raw $nameHtml}'}:
                <xen:if is="{$source}">
                    <a href="{xen:link 'goto/{$source.type}', '', 'id={$source.id}'}#{$source.type}-{$source.id}" class="AttributionLink">&uarr;</a>
                </xen:if>
            <span class="arrow"></span>
            </div>
        </xen:if>
        <blockquote>
 
        <xen:if is="{$attributes.member}">
            <xen:set var="$avaUser.user_id">{$attributes.member}</xen:set>
            <xen:set var="$avaUser.username">{$nameHtml}</xen:set>
            <xen:set var="$avaUser.avatar_date">1</xen:set>
 
            <xen:avatar user="$avaUser" size="s" class="QuoteAvatar" />
        </xen:if>
 
        {xen:raw $content}
 
        </blockquote>
    </aside>
</div>

extra.css:

Code: 
body .messageText .QuoteAvatar
{
    border: none;
    float: left;
    margin-left: 0;
    margin-right: 10px;
    padding: 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}
body .messageText .QuoteAvatar:active
{
    position: relative;
    top: 1px;
    box-shadow: none;
}
 
body .messageText .QuoteAvatar .img.s
{
    background-color: @primaryLighterStill;
    background-position: 0% 0%;
    background-size: 48px;
    border: none;
    padding: 0;
    width: 48px;
    height: 48px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
 
body .messageText .QuoteAvatar:active .img.s
{
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 2px 4px rgba(0,0,0,0.4);
}
 
body .messageText .bbCodeQuote.hasAvatar
{
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
 
body .messageText .bbCodeQuote.hasAvatar blockquote
{
    overflow: hidden;
}
 
body .messageText .bbCodeQuote.hasAvatar .attribution
{
    position: relative;
}
 
body .messageText .bbCodeQuote.hasAvatar .arrow
{
    border-radius: 0;
    height: 10px;
    width: 20px;
    position: absolute;
    left: 23px;
    bottom: -10px;
    overflow: hidden;
}
body .messageText .bbCodeQuote.hasAvatar .arrow:after
{
    content: " ";
    background: @bbCodeQuote.border-color;
    border: 1px solid @bbCodeQuote.border-color;
    height: 8px;
    width: 8px;
    top: -5px;
    left: 6px;
    position: absolute;
    box-shadow: 1px 1px rgba(255,255,255,0.25);
 
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
 
CyberAP said:
bb_code_tag_quote template:
Code: 
<xen:require css="bb_code.css" />
 
<xen:comment><!-- content is escaped via parser --></xen:comment>
<div class="bbCodeBlock bbCodeQuote{xen:if $ignored, ' ignored'}{xen:if $nameHtml, ' hasAvatar'}"{xen:if $nameHtml, ' data-author="{$nameHtml}"'}>
    <aside>
        <xen:if is="{$nameHtml}">
            <div class="attribution type">{xen:phrase x_said, 'name={xen:raw $nameHtml}'}:
                <xen:if is="{$source}">
                    <a href="{xen:link 'goto/{$source.type}', '', 'id={$source.id}'}#{$source.type}-{$source.id}" class="AttributionLink">&uarr;</a>
                </xen:if>
            <span class="arrow"></span>
            </div>
        </xen:if>
        <blockquote>
 
        <xen:if is="{$attributes.member}">
            <xen:set var="$avaUser.user_id">{$attributes.member}</xen:set>
            <xen:set var="$avaUser.username">{$nameHtml}</xen:set>
            <xen:set var="$avaUser.avatar_date">1</xen:set>
 
            <xen:avatar user="$avaUser" size="s" class="QuoteAvatar" />
        </xen:if>
 
        {xen:raw $content}
 
        </blockquote>
    </aside>
</div>

extra.css:

Code: 
body .messageText .QuoteAvatar
{
    border: none;
    float: left;
    margin-left: 0;
    margin-right: 10px;
    padding: 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}
body .messageText .QuoteAvatar:active
{
    position: relative;
    top: 1px;
    box-shadow: none;
}
 
body .messageText .QuoteAvatar .img.s
{
    background-color: @primaryLighterStill;
    background-position: 0% 0%;
    background-size: 48px;
    border: none;
    padding: 0;
    width: 48px;
    height: 48px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
 
body .messageText .QuoteAvatar:active .img.s
{
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 2px 4px rgba(0,0,0,0.4);
}
 
body .messageText .bbCodeQuote.hasAvatar
{
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
 
body .messageText .bbCodeQuote.hasAvatar blockquote
{
    overflow: hidden;
}
 
body .messageText .bbCodeQuote.hasAvatar .attribution
{
    position: relative;
}
 
body .messageText .bbCodeQuote.hasAvatar .arrow
{
    border-radius: 0;
    height: 10px;
    width: 20px;
    position: absolute;
    left: 23px;
    bottom: -10px;
    overflow: hidden;
}
body .messageText .bbCodeQuote.hasAvatar .arrow:after
{
    content: " ";
    background: @bbCodeQuote.border-color;
    border: 1px solid @bbCodeQuote.border-color;
    height: 8px;
    width: 8px;
    top: -5px;
    left: 6px;
    position: absolute;
    box-shadow: 1px 1px rgba(255,255,255,0.25);
 
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
Click to expand...
Cool ;)

But there are problem: some avatars appear blue
Sans-titre-5.webp

and the default avatar is not displayed:

Sans-titre-6.webp
 
Blue is shown when user is using gravatar for his avatar.
You can change the color here:
body .messageText .QuoteAvatar .img.s
{
background-color: @primaryLighterStill;
}

I'll investigate what happens in the second case.
 
CyberAP said:
  1. Shows the first avatar the author's uploaded.
Click to expand...
  1. The first avatar the member uploaded ever, period? Like if they uploaded an avatar 3 months ago and changed it to something else the same day, the very first avatar that they uploaded 3 months ago would show?
 
Nice work.

A few small problems though, as seen in the screenshot.

1. There needs to be some bottom padding for when there are subsequent quotes with less than 2 rows.
2. The arrows don't display correctly in IE.
3. For manual quotes (with no member ID in the attribution), there is a blank space and the arrow still shows.

quotes.webp
 
Brogan said:
1. There needs to be some bottom padding for when there are subsequent quotes with less than 2 rows.
2. The arrows don't display correctly in IE.
3. For manual quotes (with no member ID in the attribution), there is a blank space and the arrow still shows.

View attachment 22180
Click to expand...

1. Should be fixed now, I've added margin-bottom to the avatar.
2. Added support for IE9.
3. Fixed.
 
You must log in or register to reply here.

Similar threads

Allan
Animated online indicator
Replies
2
Views
825
sub_ubi
sub_ubi
H
  • Question Question
XF 2.2 Error when posting an insert image url?
Replies
5
Views
1K
hugo4melton
H
BubbaLovesCheese
  • Question Question
XF 2.2 I created a cool hover shadow and scale effect for nodes - but now the click through is gone.
Replies
1
Views
644
BubbaLovesCheese
BubbaLovesCheese
BubbaLovesCheese
  • Question Question
XF 2.2 SUBMISSION : Node animation on mouse hover
Replies
6
Views
1K
FaeWhisperer
FaeWhisperer
V
  • Question Question
XF 2.2 sf-dump artefacts when mp3s embedded in forum posts
Replies
14
Views
1K
voom
V
Top Bottom