Guest Buttons

A guest button is a groovy little MashUp that hides unauthorized content from guests behind a pretty button. The idea is to let guests know that more is available, but that that they'll need to login or register to know what those things are. The href link itself points only to the login script, so no information is given to the guest about what the eventual contents may be.

The code assumes that you have more that one button, and that you want to rotate them through a cycle randomly. It also assumes that all of your buttons are attached to the Home/WebHome topic, and that they follow the naming convention guest_button_X.png, where X is a digit. Only the digit is jumbled randomly each time the page loads.

Requirements

• TWiki:Plugins.ImagePlugin
• TWiki:Plugins.SpreadSheetPlugin
• TWiki:Plugins.IfDefinedPlugin

Creating Buttons

This is how I created my buttons, but you've probably got something fancy like photoshop

1. open a monochrome image with snagit
2. adjust the image size to height = 50px
3. use the fade edge effect to add a fade to white on the right border
   • outline size = 0
   • effect size ~ 50
4. increase the image width to = 500px
5. insert text into the button
   • e.g. "Have we met ? Login or Introduce Yourself .."
6. use the beveled edge effect to add a bevel on the bottom-right or top-right corner
   • effect size ~12
   • border & shadow size = 0
7. use the border edge effect to put a 3D border around the outside of the image
   • adjust the highlight and main colors

Using Them

It's the else part of this statement which does the trick.

%IFACCESS{"DestinationTopic" type="view" then="<H2>[[DestinationTopic][Destination Topic]]</H2> $percntIMAGE{\"$percntWEB$percnt/DestinationTopic/image_non_guests_see.jpg\" type=\"frame\" align=\"none\" href=\"DestinationTopic\" caption=\"This is pretty cool\" width=\"500\" height=\"350\"}$percnt" else="<H2>more...</H2> $percntBR$percnt $percntIMAGE{\"Home/WebHome/guest_button_$percntCALC{\"$dollarLISTRAND(1,2,3,4,5)\"}$percnt.png|500px\" type=\"float\" alt=\"please login or register\" align=\"none\" href=\"$percntSCRIPTURL$percntlogin\" caption=\"\"}$percnt"}% 

Available Buttons

%IMAGE{"Home/WebHome/guest_button_1.png|500px" type="frame" align="none" caption="guest button 1"}% %IMAGE{"Home/WebHome/guest_button_2.png|500px" type="frame" align="none" caption="guest button 2"}% %IMAGE{"Home/WebHome/guest_button_3.png|500px" type="frame" align="none" caption="guest button 3"}% %IMAGE{"Home/WebHome/guest_button_4.png|500px" type="frame" align="none" caption="guest button 4"}% %IMAGE{"Home/WebHome/guest_button_5.png|500px" type="frame" align="none" caption="guest button 5"}% %IMAGE{"Home/WebHome/guest_button_6.png|500px" type="frame" align="none" caption="guest button 6"}% %IMAGE{"Home/WebHome/guest_button_7.png|500px" type="frame" align="none" caption="guest button 7"}%

-- Contributors: KeithHelfrich - 10 May 2008

Discussion

Perhaps this could be either wrapper in a plugin (much like TwistyPlugin) or moved to the TWiki web as a SupplementalDocument for all to see?

-- RafaelAlvarez - 10 May 2008

Alternatively you can use css class twikiButton or twikiSubmit for a link (this is styled as a button with pattern skin, but the css class is used by the TWiki core as well):

<a class="twikiButton" href="#">Link text</a>

-- ArthurClemens - 10 May 2008

That is a very typical small application or widget for the upcoming Apps? web. For now the standard is to package a TWikiApplication as an AddOnPackage in the Plugins web.

-- PeterThoeny - 11 May 2008

In some applications I do a very similar thing using a %CONTEXT% var in the css class of the html body, and then css classes of =AuthRequired, ChangePermRequired, or GuestContent.

Then I can use browser CSS to show the right links.

on the PRO side, its less of a server load, as the evaluation is client side, via the magical selection of the right combination of css classes, and CON wise - you're sending non-guest links to a browser.

-- SvenDowideit - 12 May 2008