XF 2.2 Trying to implement Image for guests

[BasilFawlty]

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:

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]

Oh, sorry I see my question got moved to a different forum. Sorry about that - I'll learn eventually!

 

[beerForo]

You can use a floating notice and show it only to guests. The notice can simply be a container for the image.

 

[BasilFawlty]

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.

 

[RobinHood]

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]

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]

I'm just reminded of this guy and how annoying he was lol.

 

[BasilFawlty]

I'm just remined of this guy and how annoying he was lol.

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.

 

[beerForo]

You should also check out the Write before Register function in XF.

 

[Ozzy47]

Like this?

 

[BasilFawlty]

Exactly! Only want that to show when they are not logged in.

 

[Ozzy47]

I’ll release an addon probably tomorrow that will do that.

 

[BasilFawlty]

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

 

[Ozzy47]

That could be achieved with a notice I believe.

 

[Paul B]

Two simple template edits using your original code.

The extra.less template:

[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:

<div class="annoyingSiteKillingNonsense"></div>

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.

 

[Paul B]

I had 2 minutes to kill ...

Feel free to change the class names

The extra.less template:

.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:

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

There's also this approach which is a little more elegant, as the div doesn't render at all for members who have posted:

.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);
    }
}

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

 

[BasilFawlty]

annoying floating image! I love it! It's true!

 

[BasilFawlty]

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!

 

[beerForo]

That was me. I just got so annoyed at the image I joined. It works!!!!

 

[BasilFawlty]

That was me. I just got so annoyed at the image I joined. It works!!!!

Oh so that was you!