creaky

Customer
I previously used the merge staff & online blocks following your guide. Does this work with 2.3?

 
Updated version:

Replace entire contents of "widget_members_online" template

Code:
<xf:comment>
<xf:if is="$options.staffOnline">
    <xf:if contentcheck="true">
        <div class="block" data-widget-section="staffMembers"{{ widget_data($widget) }}>
            <div class="block-container">
                <h3 class="block-minorHeader"><a href="{{ link('members', null, {'key': 'staff_members'}) }}">{{ phrase('staff_online') }}</a></h3>
                <ul class="block-body">
                <xf:contentcheck>
                    <xf:foreach loop="$online.users" value="$user">
                        <xf:if is="$user.is_staff">
                            <li class="block-row">
                                <div class="contentRow">
                                    <div class="contentRow-figure">
                                        <xf:avatar user="$user" size="xs" />
                                    </div>
                                    <div class="contentRow-main contentRow-main--close">
                                        <xf:username user="$user" rich="true" />
                                        <div class="contentRow-minor">
                                            <xf:usertitle user="$user" />
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </xf:if>
                    </xf:foreach>
                </xf:contentcheck>
                </ul>
            </div>
        </div>
    </xf:if>
</xf:if>
</xf:comment>

<div class="block" data-widget-section="onlineNow"{{ widget_data($widget) }}>
    <div class="block-container">
        <h3 class="block-minorHeader"><a href="{{ link('online') }}">{$title}</a></h3>
        <div class="block-body">
            <xf:if is="$options.staffOnline">
                <xf:if contentcheck="true">
                    <div class="block-row block-row--minor">
                        <h4 class="block-textHeader block-textHeader--scaled">
                            <a href="{{ link('members', null, {'key': 'staff_members'}) }}">{{ phrase('staff_online') }}</a>
                        </h4>
                        <ul class="listPlain">
                            <xf:contentcheck>
                                <xf:foreach loop="$online.users" value="$user">
                                    <xf:if is="$user.is_staff">
                                        <li class="block-row block-row--toEdge">
                                            <div class="contentRow">
                                                <div class="contentRow-figure">
                                                    <xf:avatar user="$user" size="xs" />
                                                </div>
                                                <div class="contentRow-main contentRow-main--close">
                                                    <xf:username user="$user" rich="true" />
                                                    <div class="contentRow-minor">
                                                        <xf:usertitle user="$user" />
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </xf:if>
                                </xf:foreach>
                            </xf:contentcheck>
                        </ul>
                    </div>
                </xf:if>
            </xf:if>
            <xf:if contentcheck="true">
                <div class="block-row block-row--minor">
                    <h4 class="block-textHeader block-textHeader--scaled">
                        {{ phrase('people_you_follow') }}
                    </h4>
                    <ul class="listHeap">
                        <xf:contentcheck>
                            <xf:if is="$options.followedOnline">
                                <xf:foreach loop="$online.users" value="$user">
                                    <xf:if is="in_array($user.user_id, $xf.visitor.Profile.following)">
                                        <li>
                                            <xf:avatar user="$user" size="xs" img="true" />
                                        </li>
                                    </xf:if>
                                </xf:foreach>
                            </xf:if>
                        </xf:contentcheck>
                    </ul>
                </div>
            </xf:if>

                <xf:if is="$online.users is not empty">
                    <div class="block-row block-row--minor">
                    <h4 class="block-textHeader block-textHeader--scaled">
                        {{ phrase('members') }}
                    </h4>
                    <ul class="listInline listInline--comma">
                        <xf:foreach loop="$online.users" value="$user"><xf:trim>
                            <li><xf:username user="$user" rich="true" class="{{ !$user.visible ? 'username--invisible' : '' }}" /></li>
                        </xf:trim></xf:foreach>
                    </ul>
                    <xf:if is="$online.counts.unseen">
                        <a href="{{ link('online') }}">{{ phrase('ellipsis_and_x_more', {'count': $online.counts.unseen}) }}</a>
                    </xf:if>
                    </div>
                <xf:else />
                    {{ phrase('no_members_online_now') }}
                </xf:if>
            </div>
        <div class="block-footer">
            <span class="block-footer-counter">{{ phrase('online_now_x_members_y_guests_z',{
                'total': number($online.counts.total),
                'members': number($online.counts.members),
                'guests': number($online.counts.guests)})
            }}</span>
        </div>
    </div>
</div>
This will show like this:

1736726079727.png


I'll make another post to display the avatars only inline for the staff.
 
Or for avatars only on staff, same template, replace entire contents with:

Code:
<xf:comment>
<xf:if is="$options.staffOnline">
    <xf:if contentcheck="true">
        <div class="block" data-widget-section="staffMembers"{{ widget_data($widget) }}>
            <div class="block-container">
                <h3 class="block-minorHeader"><a href="{{ link('members', null, {'key': 'staff_members'}) }}">{{ phrase('staff_online') }}</a></h3>
                <ul class="block-body">
                <xf:contentcheck>
                    <xf:foreach loop="$online.users" value="$user">
                        <xf:if is="$user.is_staff">
                            <li class="block-row">
                                <div class="contentRow">
                                    <div class="contentRow-figure">
                                        <xf:avatar user="$user" size="xs" />
                                    </div>
                                    <div class="contentRow-main contentRow-main--close">
                                        <xf:username user="$user" rich="true" />
                                        <div class="contentRow-minor">
                                            <xf:usertitle user="$user" />
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </xf:if>
                    </xf:foreach>
                </xf:contentcheck>
                </ul>
            </div>
        </div>
    </xf:if>
</xf:if>
</xf:comment>

<div class="block" data-widget-section="onlineNow"{{ widget_data($widget) }}>
    <div class="block-container">
        <h3 class="block-minorHeader"><a href="{{ link('online') }}">{$title}</a></h3>
        <div class="block-body">
            <xf:if is="$options.staffOnline">
                <xf:if contentcheck="true">
                    <div class="block-row block-row--minor">
                        <h4 class="block-textHeader block-textHeader--scaled">
                            <a href="{{ link('members', null, {'key': 'staff_members'}) }}">{{ phrase('staff_online') }}</a>
                        </h4>
                        <ul class="listHeap">
                            <xf:contentcheck>
                                <xf:foreach loop="$online.users" value="$user">
                                    <xf:if is="$user.is_staff">
                                        <li>
                                                    <xf:avatar user="$user" size="xs" />
                                        </li>
                                    </xf:if>
                                </xf:foreach>
                            </xf:contentcheck>
                        </ul>
                    </div>
                </xf:if>
            </xf:if>
            <xf:if contentcheck="true">
                <div class="block-row block-row--minor">
                    <h4 class="block-textHeader block-textHeader--scaled">
                        {{ phrase('people_you_follow') }}
                    </h4>
                    <ul class="listHeap">
                        <xf:contentcheck>
                            <xf:if is="$options.followedOnline">
                                <xf:foreach loop="$online.users" value="$user">
                                    <xf:if is="in_array($user.user_id, $xf.visitor.Profile.following)">
                                        <li>
                                            <xf:avatar user="$user" size="xs" img="true" />
                                        </li>
                                    </xf:if>
                                </xf:foreach>
                            </xf:if>
                        </xf:contentcheck>
                    </ul>
                </div>
            </xf:if>

                <xf:if is="$online.users is not empty">
                    <div class="block-row block-row--minor">
                    <h4 class="block-textHeader block-textHeader--scaled">
                        {{ phrase('members') }}
                    </h4>
                    <ul class="listInline listInline--comma">
                        <xf:foreach loop="$online.users" value="$user"><xf:trim>
                            <li><xf:username user="$user" rich="true" class="{{ !$user.visible ? 'username--invisible' : '' }}" /></li>
                        </xf:trim></xf:foreach>
                    </ul>
                    <xf:if is="$online.counts.unseen">
                        <a href="{{ link('online') }}">{{ phrase('ellipsis_and_x_more', {'count': $online.counts.unseen}) }}</a>
                    </xf:if>
                    </div>
                <xf:else />
                    {{ phrase('no_members_online_now') }}
                </xf:if>
            </div>
        <div class="block-footer">
            <span class="block-footer-counter">{{ phrase('online_now_x_members_y_guests_z',{
                'total': number($online.counts.total),
                'members': number($online.counts.members),
                'guests': number($online.counts.guests)})
            }}</span>
        </div>
    </div>
</div>

Results:

1736726208264.png
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back