WSN Forum

Sliders, Carousels and Faders

Mon, 10 Sep 2012 14:00:21 GMT

Sometimes a simple list isn't enough, and you want some fancy effects. Some common effects include sliders (in which a series of images or other content slides across the screen horizontally based on navigation controls), carousels (much like a slider but with automatic cycling in an infinite loop) and faders (in which a series of images are shown in one spot in series, each fading out to display the next). To achieve these, WSN includes bxslider. This offers a variety of different effects with fairly simple implimentation, and is responsive to different screen sizes. Please note this guide requires WSN 8.0 or later.

WSN uses a slider at the top of the front page. To create your own custom sliders, faders or carousels go too Admin -> Themes -> Manage Templates -> "Additional Document Ready Function Content". This is where we'll set the parameters for what type of sliders we want, based on the examples and options. For illustrative purposes we'll make one regular slider, one carousel and one fader:

if ($('#regularslider').length) $('#regularslider').bxSlider({ infiniteLoop: true, pager: false, auto: false, slideWidth: 200, minSlides: 3, maxSlides: 5 });
if ($('#carousel').length) $('#carousel').bxSlider({ minSlides: 3, maxSlides: 5, slideWidth: 300, moveSlides: 1, auto: true })
if ($('#fader').length) $('#fader').bxSlider({ mode: 'fade', auto: true, controls: false });

Be sure to check out all the options at http://bxslider.com/options to build the right slider for your needs, and ask WSN support if you have any trouble.

Finally it's time for the HTML. Open up the template you'll be wanting to display in. Here's sample HTML for the three sliders we made above:

<div style="width: 300px; margin-left: 50px;">
<h2>10 Sponsored Articles Slider</h2>
<ul id="regularslider" class="slider">

<CONFIG>links[,]rand()[,]10[,]ascending[,]type='sponsored'[,][,]0[,]0[,]0[,]0[,][,]0[,]0[,][,]0[,][,][,]</CONFIG>
<li>
<div style="width: 100px">
<IF {LINKNUMIMAGES}>
<a href="{LINKDETAILSURL}">{LINKIMAGE[95 <,> 70]}</a>
<br >
</IF>
<a href="{LINKDETAILSURL}">{LINKTITLE}</a>
</div>
</li>

</ul>
</div>

<div style="width: 100%; margin-left: 50px;">
<h2>10 Sponsored Articles Carousel</h2>
<ul id="carousel" class="slider">

<CONFIG>links[,]rand()[,]10[,]ascending[,]type='sponsored'[,][,]0[,]0[,]0[,]0[,][,]0[,]0[,][,]0[,][,][,]</CONFIG>
<li>
<div style="width: 300px;">
<IF {LINKNUMIMAGES}>
<a href="{LINKDETAILSURL}">{LINKIMAGE[95 <,> 70]}</a>
<br >
</IF>
<a href="{LINKDETAILSURL}">{LINKTITLE}</a>
</div>
</li>

</ul>
</div>

<h2>Fader for Article Details / Article Bit / New Articles Templates</h2>
<ul id="fader" class="slider">

<CONFIG>attachments,time,50,ascending,type='link' AND objectid={LINKEFFECTIVEID} AND (filetitle LIKE '%.jpg' OR filetitle LIKE '%.jpeg' OR filetitle LIKE '%.png' OR filetitle LIKE '%.gif'),,,0,0,0,0,0,0,,0</CONFIG>
<li><img src="{ATTACHTHUMBURL[375 <,> 275]}" style="width: 375px; height: 275px;"></li>

</ul>

Please note that you must include class="slider" on your elements, this alerts WSN to call in the appropriate javascript/css to the page.

To change the internal content (which articles are shown) of your slider, fader or carousel use the toplist generator at Admin Panel -> Themes -> Toplist Generator to describe what content you want.

Custom Incomplete Field Text

Wed, 09 Nov 2011 11:36:46 GMT

Sometimes the generic "Please completed all the required fields" message isn't enough, and you want to describe in detail what the submitter should be doing with the field they didn't fill in or why you're requiring that information of them. You can do this with the $incompletefield tweak. Set up the field texts like this:

$incompletefield['links']['title'] = "You really do need to give a title for your topic.";
$incompletefield['links']['description'] = "You have to describe what your topic is about.";

Replace title and description with any field names. To find the field names, look at the input name attribute in the html or template or check the list at Admin Panel -> Customizations -> Add Fields.

Adding Database Tables

Sun, 22 Jun 2008 02:48:05 GMT

Suppose you want to add a new table of data into WSN. For purposes of illustration, we'll say it's a list of widgets. You want to be able to display a list of widgits with a toplist and {WIDGETFIELDNAME} template variables, and you (perhaps) want to allow users to submit, edit and delete widgets through WSN. If so, read on. First, create your database table using phpmyadmin or whatever method you prefer. Use the same prefix for it that you use for the rest of the tables in that installation -- we'll say wsnlinks_widgets for our example.

Please follow these guidelines in making your table:
(1) The first column should be named 'id' and be an integer with a 'unique' index set to auto_incriment
(2) If you want to record the time the widget is added, include an integer field 'time'
(3) If you want to record the time last edited, include an integer field named 'lastedit'
(4) If it'll belong to a forum, include an integer field named catid
(5) If it'll belong to a member, include an integer field name ownerid

After you've created the table, visit run yourinstalllocation/upgrade.php to get the table list cache updated. Then check the toplist generator and you'll find widgets available once you create the table. You'll use the template variables {WIDGETFIELDNAME} -- { + capitalized version of the table name with the prefix and any trailing 's' removed + capitalized version of any database field name + }. Displaying stuff isn't much use until we can create stuff, though... in our example we want to be able to create and delete widgets through the script, as well as possibly add other template functions. In order to enable these possibilities we need to create a widget class. Take the existing classes/search.php for a simple example. Copy that to widget.php, open it in a text editor. Change both instances of "search" to "widget" and change "searchestable" to "widgetstable" (this must be the name of your database table without the prefix, with the 'table' suffix). Note that as in our example the class name must be same as the file name (without the .php). Now that we have a class, we can create templates for adding and editing widgets. Our 'add widget' page will use a custom template named widget_add (that's what you can type on the manage templates page to create it) a.k.a. templates/yourset/custom/widget_add.tpl (if you prefer the filesystem). It will always be the name of the class followed by an underscore and an action type. The three available actions are add, view and edit: widget_add, widget_view, widget_edit templates. Our widget_add template needs to contain somewhere in it a form like this:

<form action="generics.php?action=add&classname=widget" method="POST">
Field 1: <input type="text" name="field1">
Field 2: <input type="text" name="field2">
<button type="submit">Submit</button>
</form>

Replace "widget" in the above with your applicable class and {WIDGET with your appropriate template variable prefix. Replace field1 and field2 with the names of fields in your database table, and add as many more as are applicable for you. Of course, if applicable for the field type, use selectors or checkboxes or radio buttons or textareas. In order to let people submit their widgets, we'll put a link somewhere to generics.php?action=add&classname=widget . For displaying a list of widgets, of course, you'll use a toplist. The toplist can link to a 'view individual widget' page (widget_view) like this: generics.php?action=view&classname=widget&id={WIDGETID}

For editing widgets, you'll link to generics.php?action=edit&classname=widget&id={WIDGETID} . The widget_edit template's form will be the same as widget_add except for replacing action=add with action=edit in the form action line. To allow people to delete widgets, you can provide a link (or separate form) to generics.php?filled=1&classname=widget&action=delete&id={WIDGETID} In order to have the redirect messages after adding/editing/etc display the right text, you'll need to add new language items: redirect_widgetadded, redirect_widgetdeleted and redirect_widgetupdated. These get added automatically the first time they're needed.

If you want to require validation of widgets, use a 'validated' field which is a tinyint of length 1 with a default value of 0. As of WSN 8.1.0 this will automatically show up in the validation tabs (note you'll need to have added the classes/widget.php file mentioned earlier for it to work)... with older versions you'll need to create a custom admin template and copy the existing validation pages customizing to your new table's info. Set which usergroups need validation by adding a 'validatewidgets' usergroup field on the add fields page, then editing each usergroup as desired.

If you need to trigger "incomplete, please fix x" prompts on submissions and edits, use the pluggable function checkincompletes. If you want to allow searching of the new table, copy the existing search boxes but change whichtype=links (for example) to whichtype=widgets. Change all the fields specified to fields that exist in your widgets table. You'll need to make a template to display the search results for it as well -- name that widgets_search.tpl and copy the "search members" (searchmembers.tpl) into it. Then change to and to . Finally, change all the fields and template variables to ones that apply for widgets. To set the order of search results you can pass orderfield and orderascdesc in the form or url (for example, orderfield=votes&orderascdesc=desc).

You now have a complete widget system at your disposal. If you're a programmer you may wish to go further, though. You can edit the class to create a new template variable -- any method of a class is available as {WIDGETMETHODNAME} or {WIDGETMETHODNAME[parameter1 <,> parameter2]}. You can override the generic (generic.php) class' methods by putting new versions in your child class. Additional note: if you're going to associate a switch with a table, the switch name should be the table name without the prefix.

Advanced Programmer Notes

The name of the table is stored in $widgetstable, and the fields are in $settings->widgetsfields. You can use if (!$widgetstable) { $db->query("CREATE TABLE..."); } in a /modifications/ directory file to automatically create the table without the need for any setup process. Example useful bits of code:

$q = $db->select('all', 'widgetstable', 'ownerid=5', 'ORDER BY time DESC'. 'LIMIT 0,10');
$n = $db->numrows($q);
$bit = $template->extract('', '');
for($x=0; $x<$n; $x++)
{
$widget = new widget('row', $db->row($q)); // fetches next widget from query
$all .= $widget->replacements($bit); // replaces all {WIDGET template vars with correct values
}
$template->replace($bit, $all);
$widget = new widget('id', 5); // fetches widget #5
$text = $widget->replacements($text); // replaces all {WIDGET template vars with correct values

Adding Logic to Redirects

Thu, 03 Apr 2008 01:17:40 GMT

Note: This is an advanced topic for experts.

Sometimes, some of you may want to have a form redirect differently depending on the values the user has selected in it. You can apply a special message and destination url when a particular form field has a particular value, by adding the logic to your tweaks file like this:

$redirectchecks[0] = array("profile.php", "fieldname", "fieldvalue", "redirect message to display", "destination url");
$redirectchecks[1] = array("profile.php", "anotherfieldname", "anotherfieldvalue", "another redirect message to display", "anotherdestination url");
$redirectchecks[2] = array("suggest.php", "fieldname", "fieldvalue", "redirect message to display", "destination url");

Important: note that the URL being checked against is the URL of the redirect page -- not of the page with the form that was submitted. It will match any redirect page containing the first parameter you've passed, so for "suggest.php" you'll be running the check on submitting both topics and forums. There's no way to run it only on submitting topics or only on submitting forums, so hopefully your trigger field name/value combos don't conflict.

Suppose you have a custom field in your 'submit topic' form called 'iwantpageb'. When it has the value 'yes' you want to send people to b.html with a "thank you for choosing page b" redirect page message in the meantime. This is what you'd use:

$redirectchecks[0] = array("suggest.php", "iwantpageb", "yes", "thank you for choosing page b", "b.html");

If you want to test for something other than equality, you can specify another operator in an optional 6th term. This can be any standard PHP operator: >, >=, <, <=, !=. For example, to redirect when something is greater than 5:

$redirectchecks[0] = array("suggest.php", "something", "5", "thank you for choosing page b", "b.html", ">");

Adding New Template Variables

Sun, 04 Nov 2007 14:05:45 GMT

Since fields are template variables, one way to add a template variable is simply to add a field. Sometimes you may want to do something more complex, though. All methods of each class are available as template variables, but adding a method to a class isn't upgradable, you'd be stuck with lots of work on every upgrade. As a solution, here's an upgradable way to accomplish the same thing.

The quickest way to describe is to illustrate. Save this as a modifications directory file (say, modifications/example.php):

<?php
$pseudomethods[] = 'ismine';
$pseudomethods[] = 'specialformula';

function ismine($object)
{ // determine if the object is owned by the viewing member
global $thismember;
$r = 0;
if ($object->ownerid == $thismember->id && $thismember->isregistered()) $r = 1;
return $r;
}

function specialformula($object)
{
if ($object->objecttype == 'link')
{
if ($object->recipurl && $object->recipurl != 'http://') $recipformula = 0.5;
else $recipformula = -0.5;
$formula = ((((($object->numposts + 2)/($object->numposts + 1)) + (($object->hitsin + 10)/($object->hitsin + 1)) + ($object->rating / 2) + $recipformula) + $object->pagerank) / 2);
$r = $formula;
}
else if ($object->objecttype == 'member')
{
$formula = ($this->submissions() * 2) + $this->postcount();
if ($this->time < time() - (86400*100)) $formula = $formula * 1.75; // extra credit for sticking around more than 100 days
$r = $formula;
}
return $r;
}
?>

This has added several template variables: {LINKISMINE} (plus {CAT/{COMMENT/{MEMBER versions) and {LINKSPECIALFORMULA} / {MEMBERSPECIALFORMULA}. It's important to note that these functions can apply to all types of objects, so you could actually use {EVENTFUNDSDAYS} as well, though it doesn't make any logical sense so you wouldn't.

Basically all there is to do is write the function, and then add the function name to the $pseudomethods array as shown at the top.

$object will be whatever sort of object it's a template variable for, so to work with multiple types of objects you test $object->objecttype as shown in the example.

The specialformula function is an example for when you have formulas in mind too complicated to do in the topic importance or member rating formula boxes. It provides an illustration of how you test for what type of object you're working with.

Please be careful to ensure that your function name doesn't conflict with any existing object methods, fields or functions. Make it unique. One way to ensure that in a future-proof manner is to use your own prefix, like yourname_functionname.