XF 2.2 Trying to implement Image for guests

BasilFawlty

Member
With my VB when visitors are not logged in, they see an image that goes away once they log in (or when they are on the registration page. In VB additional.css section, I had CSS that looks something like this:

CSS:
div.showtoguest {
background:url(images/misc/showguest.png);
background-repeat: no-repeat;
width:300px;
height:200px;
padding:0 5px 3px;
position:fixed;
right:20px;
top:75px;
z-index:1;
}
This put a floating image on the screen util they either logged in or went to the registration page.

Then in my Header Template there were conditionals such that, if a visitor 1) was not logged in and 2) was not on the registration page, the CSS with the image would be rendered. How would I do something similar in XF? Could it be done by just using the extra.less or would a template need to be edited and what would the conditionals look like?
 

BasilFawlty

Member
You can use a floating notice and show it only to guests. The notice can simply be a container for the image.
If I'm not mistaken, a floating notice appears down in the lower-right corner. What I want (and what I have on my current VB) is a floating image that appears in a precise location I specify up near the top-right of the screen, and it stays in that location even as you scroll.

Screen Shot 2021-02-14 at 1.47.07 AM.jpeg
 

RobinHood

Well-known member
You can probably still move the floating notice with css.

I believe there’s a data-not-logged-in attribute or similar that you can target without using a notice. On mobile right now so can’t check.

You’d have much more granular criteria control using the notice system though and positioning that.
 

Mr Lucky

Well-known member
Quick note of caution:

I have used css to reposition the floating notice, but it was not until a couple of days later I found out that depending on the device it was obscuring important stuff such as logins. This should not be a problem provided it is dismissible (and that everyone knows how to dismiss it)
 

beerForo

Well-known member
I'm just reminded of this guy and how annoying he was lol.
word everyone GIF
 
Last edited:

BasilFawlty

Member
I'm just remined of this guy and how annoying he was lol.
word everyone GIF
Wow, that brings back memories LOL! Believe it or not, my little man resulted in a marked increase in registrations and participation on my forum. Many people would register just to make him go away (the were lurkers) but once they got registered they would jump in and start participating.
 

BasilFawlty

Member
As long as your doing it, it would be nice to have (as I did on my old VB) a different image that appears if they register and log in, but shows if they have never posted a message. Once they post a message, that image (which floats as they scroll) goes away
 

Brogan

XenForo moderator
Staff member
Two simple template edits using your original code.

The extra.less template:
Less:
[data-logged-in="false"]
{
    .annoyingSiteKillingNonsense
    {
        background:url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);
        background-repeat: no-repeat;
        width:300px;
        height:200px;
        padding:0 5px 3px;
        position:fixed;
        right:20px;
        top:75px;
        z-index:99999;
    }
}

The PAGE_CONTAINER template:
HTML:
<div class="annoyingSiteKillingNonsense"></div>

1614471871533.png

The result: https://db76df28bf7ba8d3.demo-xenforo.com/223/index.php

If you want a different image to show to members who haven't posted, use the same less code with a different class name and without the data-logged-in, and use a conditional statement in the PAGE_CONTAINER template using $xf.visitor.message_count.
 

Brogan

XenForo moderator
Staff member
I had 2 minutes to kill ...

Feel free to change the class names :ROFLMAO:

The extra.less template:
Less:
.annoyingFloatingImage
{
    background-repeat: no-repeat;
    width:300px;
    height:200px;
    padding:0 5px 3px;
    position:fixed;
    right:20px;
    top:75px;
    z-index:99999;

    [data-logged-in="false"] &.justPassingThrough
    {
        background-image:url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);
    }

    &.seriouslyIveLoggedInAndYoureStillBuggingMe
    {
        background-image:url(https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x_r2.png);
    }
}

The PAGE_CONTAINER template:
HTML:
<div class="annoyingFloatingImage justPassingThrough {{ $xf.visitor.message_count ? '' : 'seriouslyIveLoggedInAndYoureStillBuggingMe' }}"></div>

1614483048547.png


There's also this approach which is a little more elegant, as the div doesn't render at all for members who have posted:
Less:
.annoyingFloatingImage
{
    background-repeat: no-repeat;
    width:300px;
    height:200px;
    padding:0 5px 3px;
    position:fixed;
    right:20px;
    top:75px;
    z-index:99999;

    &.reallyAnnoying
    {
        background-image:url(https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x_r2.png);
    }

    [data-logged-in="false"] &.reallyAnnoying
    {
        background-image:url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);
    }
}

HTML:
<xf:if is="!$xf.visitor.message_count">
    <div class="annoyingFloatingImage reallyAnnoying"></div>
</xf:if>
 

BasilFawlty

Member
Just an FYI, when I implemented these little guys I saw a pretty significant increase in people who had just been lurking actually join. But I get your sentiment. By the way - THANK YOU!
 
Last edited:
Top