glFusion Wiki

Site Tools


glfusion:widgets

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

glfusion:widgets [2010/04/05 11:35]
glfusion:widgets [2016/07/16 19:39] (current)
Line 1: Line 1:
 +====== Widgets ======
 +
 +Widgets are little snippets of code that enhance a glFusion site. While not complex enough to be considered a [[:​glfusion:​plugin_admin|plugin]],​ they perform specific tasks or functions that add interactivity to your site.
 +
 +Many of the widgets included with glFusion are built in JavaScript, using the jQuery library as their foundation. Widgets can also be functions that reside in //​**public_html/​lib-common.php**//,​ //​**private/​system/​lib-custom.php**//​ (for your non-standard custom ones), or most commonly //​**private/​system/​lib-widgets.php**//​.
 +
 +===== jQuery Widgets =====
 +[[http://​jquery.com/​|{{:​glfusion:​widgets:​jquery-logo.png ​ |}}]]One of the benefits of including the jQuery compact JavaScript library, is the ability to create custom widgets that bring additional functionality to your site. Most of the widgets below function by adding HTML or PHP code to a block or static page. You can then position the block or static page however you like on your glFusion powered site (i.e. above or below the featured story, at the bottom of the page, etc.) Additionally,​ some widgets can be used within .thtml theme template files for a constant site presence.
 +
 +**By default, the css styling for all jQuery based widgets is now located in your theme'​s **//​**style.css**//​ file.
 +
 +<​note>​Since this site uses UTF-8 character encoding, copying and pasting code from this wiki documentation may have unexpected results in non UTF-8 aware text editors.</​note>​
 +
 +====Rotator====
 +
 +{{:​glfusion:​widgets:​screenshot-theme_glfusion_org_2015-10-22_09-24-36.png?​200 |}}By implementing [[http://​www.jqueryscript.net/​slider/​nivo-slider.html|Nivo Slider]] class, glFusion has the ability to create a flexible, responsive slider. The Rotator widget is a sequential image rotator with hyperlinks and optional descriptive text. Created with JavaScript, it provides an alternative to using Flash to rotate featured content links on your site. 
 +
 +To create a Rotator widget, go to the Static Page admin interface, and create a static page, and make sure Post Mode is set to HTML Formatted. Then enter the following code, inserting your own content where specified.
 +
 +<code php>
 +// this staticpage needs to have PHP set to execute PHP below
 +// use lib-widgets.php
 +USES_lib_widgets();​
 +
 +$sliderData = array(
 +'​images'​ => array(
 +  array(
 +    '​image'​ => '/​images/​library/​Image/​moorotator1.jpg',​
 +    '​caption'​ => '​Welcome to the glFusion Revolution!<​br>​Learn more about the glFusion development philosophy today!',​
 +    '​link' ​ => '​http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​mission'​
 +  ),
 +  array(
 +    '​image'​ => '/​images/​library/​Image/​moorotator2.jpg',​
 +    '​caption'​ => '<​b>​Custom Header Images</​b><​br>​Personalize your site according to your visitors time of day!',
 +    '​link'​ => '​http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​nouveau#​custom_header_images',​
 +  ),
 +  array(
 +    '​image'​ => '/​images/​library/​Image/​moorotator3.jpg',​
 +    '​caption'​ => '<​b>​Language Localization</​b><​br>​Support for a multi-lingual site right out of the box!',
 +    '​link'​ => '​http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​language',​
 +  ),
 +  array(
 +    '​image'​ => '/​images/​library/​Image/​moorotator4.jpg',​
 +    '​caption'​ => '<​b>​Bugs Belong in Nature, not glFusion</​b><​br>​Found a bug? Visit our Tracker and submit a report!',​
 +    '​link'​ => '​https://​github.com/​glFusion/​glfusion/​issues',​
 +  ),
 +  array(
 +    '​image'​ => '/​images/​library/​Image/​moorotator5.jpg',​
 +    '​caption'​ => '<​b>​Remote Social Authentication</​b><​br>​Login to glFusion using your favorite social networking services.',​
 +    '​link'​ => '​http://​www.glfusion.org/​wiki/​glfusion:​remoteauth',​
 +  ),
 +
 +  /* repeat the array as needed for more slides */
 +
 +),
 +  ​
 +'​options'​ => array(
 +  '​slideWidth'​ => 570,            // the width of each slide   
 +  '​mode'​ => '​horizontal', ​        // Type of transition - horizontal, vertical, fade
 +  '​speed'​ => 500,                 // Slide transition duration (ms)
 +  '​slideMargin'​ => 0,             // Margin between each slide
 +  '​startSlide'​ => 0,              // Starting slide index (zero-based)
 +  '​randomStart'​ => false, ​        // Start slider on a random slide
 +  '​infiniteLoop'​ => true,         // if true, clicking Next while on last slide will transition to the first
 +  '​hideControlOnEnd'​ => false, ​   // If true, "​Next"​ control will be hidden on last slide and vice-versa
 +  '​captions'​ => true,             // Include image captions
 +  '​responsive'​ => true,           // Enable or disable auto resize of the slider
 +  '​touchEnabled'​ => true,         // slider will allow touch swipes
 +  '​pager'​ => true,                // If true, a pager will be added
 +  '​pagerType'​ => '​full', ​         // if full, a pager link will be generated for each slide. If short, a x / y page will be used (ex. 1 / 5)
 +  '​auto'​ => true
 +),
 +
 +'​template'​ => '​slider.thtml' ​     // you can specify a custom template file if needed
 +);
 +
 +return WIDGET_slider($sliderData);​
 +</​code>​
 +
 +
 +^Option ^Default Value ^Description ^
 +|effect |'​random'​ |Specify sets like ,'fold ,fade ,​sliceDown' ​ |
 +|slices |15 |For slice animations |
 +|boxCols |8 |For box animations |
 +|boxRows |4 |For box animations |
 +|animSpeed |500 |Slide transition speed |
 +|pauseTime |3000 |How long each slide will show |
 +|startSlide |0 |Set starting Slide (0 index) |
 +|directionNav |true |Next & Prev navigation |
 +|controlNav |true |1,2,3... navigation |
 +|controlNavThumbs |false |Use thumbnails for Control Nav |
 +|pauseOnHover |true |Stop animation while hovering |
 +|manualAdvance |false |Force manual transitions |
 +|prevText |'​Prev'​ |Prev directionNav text |
 +|nextText |'​Next'​ |Next directionNav text |
 +|randomStart |false |Start on a random slide |
 +
 +The transition can be any one of the following:
 +
 +  * sliceDown
 +  * sliceDownLeft
 +  * sliceUp
 +  * sliceUpLeft
 +  * sliceUpDown
 +  * sliceUpDownLeft
 +  * fold
 +  * fade
 +  * random
 +  * slideInRight
 +  * slideInLeft
 +  * boxRandom
 +  * boxRain
 +  * boxRainReverse
 +  * boxRainGrow
 +  * boxRainGrowReverse
 +
 +<note warning> PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the [[glfusion:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​
 +
 +Set **In a block** to //​**unchecked**//,​ set **PHP** to //**execute PHP**// and save your static page, including any other placement options you desire.
 +
 +<​note>​ To change the styling of the Rotator, edit your theme'​s //​**style.css**//​ file.</​note>​
 +
 +====Rotator Block====
 +
 +{{:​glfusion:​widgets:​rotator-block.png?​100 |}}Utilizing the [[http://​bxslider.com/​|bxSlider jQuery Widget]], the Rotator Block widget is a sequential image rotator with hyperlinks and optional descriptive text. Created with javascript, it provides an alternative to using Flash to rotate featured content links in a block on your site.
 +
 +To create a Rotator Block widget, go to the Block admin interface and create a new block, and make sure **Type** is set to //**Normal Block**//. Then enter the following code, inserting your own content where specified:
 +
 +
 +<code html>
 +<script type="​text/​javascript"​ src="​http://​www.yoursitehere.com/​javascript/​addons/​bxslider/​jquery.bxslider.min.js"></​script>​
 +<script type="​text/​javascript">​
 +    $(document).ready(function() {
 +        $('​.bxslider1'​).bxSlider({
 +            slideWidth : 150,
 +            mode : '​fade', ​         // Type of transition between slides - '​horizontal',​ '​vertical',​ '​fade'​
 +            speed : 500,            // Slide transition duration (in ms)
 +            slideMargin : 0,        // Margin between each slide
 +            startSlide : 0,         // Starting slide index (zero-based)
 +            randomStart : false, ​   // Start slider on a random slide - (true / false)
 +            infiniteLoop : true,    // If true, clicking "​Next"​ while on the last slide will transition to the first slide and vice-versa
 +            hideControlOnEnd : true,// If true, "​Next"​ control will be hidden on last slide and vice-versa
 +            captions : false, ​      // Include image captions. Captions are derived from the image'​s title attribute
 +            responsive : true,      // Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.
 +            touchEnabled : false, ​  // If true, slider will allow touch swipe transitions
 +            controls: false, ​       // If true, "​Next"​ / "​Prev"​ controls will be added
 +            pager : false, ​         // If true, a pager will be added
 +            auto : true             // Slides will automatically transition
 +        });
 +    });
 +</​script>​
 +
 +<ul class="​bxslider1"​ style="​padding:​0px !important;">​
 +    <li>
 +        <a href="​http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​start"​ target="​_blank">​
 +            <img src="​http://​theme.glfusion.org/​images/​library/​Image/​moorotatorblock1.jpg"​ title="​Documentation Wiki" alt="​Documentation Wiki">​
 +        </a>
 +    </li>
 +    <li>
 +        <a href="​http://​www.glfusion.org/​wiki/​doku.php?​id=roadmap"​ target="​_blank">​
 +            <img src="​http://​theme.glfusion.org/​images/​library/​Image/​moorotatorblock2.jpg"​ title="​glFusion Roadmap"​ alt="​glFusion Roadmap">​
 +        </a>
 +    </li>
 +    <li>
 +        <a href="​http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​mission"​ target="​_blank">​
 +            <img src="​http://​theme.glfusion.org/​images/​library/​Image/​moorotatorblock4.jpg"​ title="​Join Us" alt="​Join Us">​
 +        </a>
 +    </li>
 +</ul>
 +
 +
 +</​code>​
 +
 +
 +
 +<note warning>​Make sure you update //​**public_html/​javascript/​mootools/​gl_moorotator-block.js**//​ and specify the absolute path to your blankimage variable. If you don't, you'll notice broken image issues in between image fades. Since the block editor doesn'​t support switching back and forth between PHP and html code (like the staticpage editor does), you will have to make this edit manually.</​note>​
 +
 +<​note>​ To change the styling of the gl_moorotator-block,​ edit your theme'​s //​**style.css**//​ file.</​note>​
 +
 +
 +====Tab Slider ====
 +{{ :​glfusion:​widgets:​gl_slide2.png|}}The Tab Slider widget allows you to create multiple content elements, and then alternate between viewing those elements within the display area. This maximizes the use of screen space, keeps the overall page layout cleaner, and allows for enhanced user interaction with your site. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_mooslide|Click here]] to see a live example.
 +
 +You can navigate between the content elements by either clicking on the individual tab header links, or by using the blue previous and next buttons.
 +
 +In glFusion v1.1.0 and beyond, we have included a function that will take the content of other static pages, and combine them to create one mooslide. Simply create your static pages, and then create a separate static page, and make sure **Post Mode** is set to //**HTML Formatted**//,​ then enter the following code:
 +
 +<code php>
 +  // this staticpage needs to have PHP set to execute PHP (return) below
 +  // use lib-widgets.php
 +  USES_lib_widgets();​
 +  ​
 +  // add your staticpage IDs, order here is order they appear on the slide tabs
 +  ​
 +  $dataArray = array(
 +    '​panels'​ => array(
 +      '​slide_whatsnew',​
 +      '​slide_cachetech',​
 +      '​slide_integratedplugins',​
 +      '​slide_jquery',​
 +      '​slide_widgets',​
 +    ),
 +    '​options'​ => array(
 +      '​autoplay'​ =>  6000,         // false or integer - Number of milliseconds betweeen transitions to the next tab.
 +      '​tabArrowWidth'​ =>  35,      // Width in pixels of the tab arrows.
 +      '​defaultTab'​ =>  1,          // Index of the tab selected by default. (1-indexed)
 +    /*  '​height'​ =>  300,  */          // Set a static value for the height of the whole widget in pixels.
 +      '​indicators'​ =>  true,       // Show panel indicators.
 +      '​mousewheel'​ =>  true,       // Allow scrolling to the next and previous panel using the mousewheel.
 +      '​position'​ =>  '​top', ​       // top or bottom ​ - Position of the tabs relative to the panel container
 +      '​panelArrows'​ =>  true,      // Show the next and previous panel arrows.
 +      '​panelArrowsShowOnHover'​ =>  true,  // Hide the panel arrows unless the panel container is being hovered over.
 +      '​tabs'​ =>  true,             // Use tabs
 +      '​tabHeight'​ =>  30,          // Height in pixels of the tabs container
 +      '​tabArrows'​ =>  true,        // Use tab arrows when tabs overflow out of their container.
 +      '​tabSlideLength'​ =>  100,    // Number of pixels to slide the tabs when using the tab arrows.
 +      '​tabSlideSpeed'​ =>  200,     // Number of milliseconds of the tab sliding transition.
 +      '​transition'​ =>  '​slide', ​   // slide or fade - Transition to use for panel transitions.
 +      '​transitionSpeed'​ =>  500,   // Number of milliseconds of the panel transition.
 +      '​width'​ =>  560,             // Set a static width in pixels for the widget.
 +    )
 +  );
 +  ​
 +  //call the WIDGET_tabslide function from lib-widgets.php
 +  return WIDGET_tabslide($dataArray);​
 +
 +</​code>​
 +
 +<note warning> PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the [[glfusion:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​
 +
 +Set **In a block** to //​**unchecked**//,​ set **PHP** to //**execute PHP (return)**//​ and save your static page, including any other placement options you desire.
 +
 +
 +==== Spring Menu ====
 +{{glfusion:​widgets:​gl_moospring.png |}}Like the Tab Slider widget above, the Spring Menu widget is a great way to showcase content, while maximizing layout space. This widget is geared toward prominently displaying important links on your site, and will grab the attention of your visitors, keeping them engaged as they interact with the fun, yet unobtrusive sizing animation. Use them as supplemental menus to important areas of your site. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_moospring|Click here]] to see a live example.
 +
 +To setup this widget, go to the Static Page admin interface, and create a new static page. Make sure **Post Mode** is set to //**HTML Formatted**//,​ then enter the following code:
 +
 +<code php>
 +USES_lib_widgets();​
 +
 +$menuData = array(
 +  '​images'​ => array(
 +    array(
 +      '​image'​ => '/​layout/​vintage/​images/​grabit.jpg',​
 +      '​link' ​ => '​http://​dvlp.glfusion.org/​filemgmt/'​
 +    ),
 +    array(
 +      '​image'​ => '/​layout/​vintage/​images/​readit.jpg',​
 +      '​link'​ => '​http://​glfusion.org/​wiki/​doku.php',​
 +    ),
 +    array(
 +      '​image'​ => '/​layout/​vintage/​images/​sayit.jpg',​
 +      '​link'​ => '​http://​theme.glfusion.org/​forum/',​
 +    ),
 +    array(
 +      '​image'​ => '/​layout/​vintage/​images/​joinus.jpg',​
 +      '​link'​ => '​http://​glfusion.org/​wiki/​doku.php',​
 +    )
 +  ),
 +  '​options'​ => array(
 +   '​border'​ => 5,
 +   '​duration'​ => 400,
 +   '​openDim'​ => 240,
 +   '​closeDim'​ => 125,
 +   '​fadeInTitle'​ => false,
 +   '​height'​ => 100
 +  )
 +);
 +
 +return WIDGET_springMenu($menuData);​
 +
 +</​code>​
 +
 +<note warning> PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the [[glfusion:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​
 +
 +Set **In a block** to //​**unchecked**//,​ set **PHP** to //**execute PHP**// and save your static page, including any other placement options you desire.
 +
 +
 +
 +===== Auto Translations =====
 +
 +{{ :​glfusion:​widgets:​autotranslations_block.png|}}In addition to the [[:​glfusion:​language|multi-language capabilities]] built into glFusion, we have partnered with [[http://​www.google.com|Google]] to leverage their automatic translation services.
 +
 +The function **WIDGET_autotranslations** in //​**private/​system/​lib-widgets.php**//​ builds a list of flag image links that, when clicked, will automatically translate your glFusion site to one of several languages. This translated page is persistent for the browser session, so if you continue to navigate the translated site, each page you visit will continue to be translated, until you close the browser window.
 +
 +. The languages currently supported by Google include:
 +
 +^ Language ^ ISO Code ^ Language ^ ISO Code ^ Language ^ ISO Code ^ Language ^ ISO Code ^ Language ^ ISO Code ^
 +| Arabic | ar | English | en | Italian | it | Norwegian | no | Serbian | sr |
 +| Bulgarian | bg | Spanish | es | Hebrew | iw | Polish | pl | Swedish | sv |
 +| Catalan | ca | Finnish | fi | Japanese | ja | Portugese | pt | Filipino | tl |
 +| Czech | cs | French | fr | Korean | ko | Romanian | rc | Ukrainian | uk |
 +| Danish | da | Hindi | hi | Lithuanian | lt | Russian | ru | Vietnamese | vi |
 +| German | de | Croatian | hr | Latvian | lv | Slovak | sk | Chinese Simplified | zh-CN |
 +| Greek | el | Indonesian | id | Dutch | nl | Slovenian | sl | Chinese Traditional | zh-TW |
 +
 +The structure of each link is as follows: ​
 +
 +<code html>
 +<​li><​a href="​http://​translate.google.com/​translate?​hl=XX&​sl=YY&​tl=XX&​u=http://​yoursite"><​img src="​http://​yoursite/​images/​translations/​XX.png"​ alt="​XX"​ /></​a></​li>​
 +</​code>​
 +
 +Where XX represents the language to be translated to (see the ISO codes listed above), and YY represents the default language of your site. In the hyperlink, the text **hl** represents the language the Google header will appear in, **sl** represents the default language of your site, **tl** represents the language Google will translate to, and finally **u** is the URL of the site to be translated.
 +
 +To call this function in a static page, go to the Static Page admin interface and create a new static page, give it a **Title** and **ID**, and make sure **Post Mode** is set to //**HTML Formatted**//​. Then enter the following code:
 +
 +<code php>
 +USES_lib_widgets();​
 +echo WIDGET_autotranslations(1);​
 +</​code>​
 +
 +By setting 1 when calling the function, glFusion will return the text "Click on a flag to automatically translate this site into that country'​s language"​ above the list of flags. This text can be edited in the site language file, under the lib-widgets section. By removing the "​1"​ when calling the function, glFusion will return just the list of flag links.
 +
 +<note warning> PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the [[glfusion:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​
 +
 +By default, glFusion includes this function already formatted in a nice block that appears on the right side of the homepage.
 +
 +If you edit that block, you will notice that the code used to create the block is slightly different from the code used above to create the static page. This is because of the additional security in the block system that requires a PHP function called in a block to have the prefix "​phpblock_"​. Rather than duplicate the entire function and give it a different name, we've decided to wrap the **WIDGET_autotranslations** function in a **phpblock_autotranslations** function that lives in **//​public_html/​lib-common.php//​**.
 +
 +<code php>
 +/**
 + * This block will display a list of flags that link to the Google
 + * automatic translation service.
 + *
 + * Loads the autotranslations widget block from private/​system/​lib-widgets.php
 + */
 +function phpblock_autotranslations() {
 +   ​global $_CONF, $LANG_WIDGETS;​
 +   ​require_once $_CONF['​path'​] . '​system/​lib-widgets.php';​
 +   ​return(WIDGET_autotranslations());​
 +}
 +</​code>​
 +
 +{{ glfusion:​widgets:​flags.jpg|}}The flag icons used in this widget came from [[http://​www.famfamfam.com/​lab/​icons/​flags/​]]. These icons are public domain, and as such are free for any use (attribution appreciated but not required). If you find these icons useful, please donate via paypal to mjamesATgmailDOTcom (or click the donate button available at [[http://​www.famfamfam.com/​lab/​icons/​silk]])
 +
 +Note that these flags are originally named using the ISO3166-1 alpha-2 country codes where appropriate. A list of codes can be found at [[http://​en.wikipedia.org/​wiki/​ISO_3166-1_alpha-2]]. We have renamed the flags used to match the respective 2 digit language code used by Google for the translation service. These flag icons can be found in //​**public_html/​images/​translations/​**//​.