extensions development for Joomla!™

 

JProIntroTicker

User's guide for

JProIntroTicker

JProIntroTicker module, allows you to display your article intros on a responsive and touch sensitive ticker slideshow to your users/customers, linking directly to the article or custom link. It's Joomla!™ R3ADY!

extension name: JProIntroTicker
current version: 3.0.2
previous versions: 3.0.0 - 3.0.1
languages: en-GB
included in package: n/a
demos: demo one,
type: module
release date: August 15, 2012
updated on: December 8, 2013
compatibility: Joomla!™ 3 R3EADY!
min. requirements: Joomla!™ 3+
bootstrap framework
Gantry framework ready
download : JProIntroTicker
 
 

Introduction

What is JProIntroTicker

JProIntroTicker module, allows you to display your article intros on a responsive and touch sensitive ticker slideshow to your users/customers, linking directly to the article or custom link. It's Joomla!™ R3ADY!

JProIntroTicker module is compatible with handheld devices with touch screens. It uses a a touch sensitivity system and responsive behavior. Also compatible wit HTML5 and CSS3 specs.

JProIntroTicker is ready to use after install and basic configuration, but it gives you the power to perform an advanced live configuration, using JPro Extensions Live Config System, in your Joomla!™ administrator area. It is highly customizable, and has the ability to be cloned and displayed several times in the same page, allowing this module to serve different purposes and with different pre-defined styles.

The latest version includes now several important features to know:

  • Touch sensitivity swipe for handheld devices;
  • Keyboard navigation (previous/next and Enter click behavior) in the front-end;
  • Use a main image, article images or no image along with the intro text;
  • Limit the intro content length in number of words to display;
  • Link directly to the article or other options;
  • Multiple advanced CS3 pre defined background styles (colors, gradients, grid and transparent);
  • Slides and fades graciously the content using advanced CSS3 and jQuery;
  • Compiled CSS and Javascript files for extreme faster rendering with memory optimization; 
  • In the administrator area, the JPro Extensions new Live Config System allows you to configure your module visually;
  • The administration system is also faster, lightweight and user friendly.

Installation, updates and upgrades

How to install the JProIntroTicker module

The installation process is the standard Joomla!™ installation procedure and no special requirements are needed to perform a successful module installation. During the installation, the system automatically creates a directory - "introticker" inside your default Joomla!™ images folder, allowing you to place dedicated imagery inside this folder and get better organized in your system. This feature allows you a better control over the images you wish to display, by using your Joomla!™ media manager.

Administration

Configuring the backend options

JProIntroTicker allows you to perform basic and advanced configurations on your Joomla!™ modules administration area.

There are three main tabs in the configuration area - Details | Options | Menu assignment. JProIntroTicker installs with the most common parameters set as default, but if you want and/or need to customize the module, the options and their meanings are described below, as well as you hover on the labels next to the fields.

In the Details tab you have, basically, the standard Joomla!™ module options:

  • Updates information - On the right side, the extension version and available updates are displayed. The system automatically searches for new releases, and if found, a button with the Download link appears.
  • On the top navigation bar, you'll find the "Help" button that opens inside a modal window, the latest version of this document.
  • Title - The module title;
  • Show title - Select if you wish to show the module title. Options are Show and Hide;
  • Position - Very important this option is where you set the module position in your template. Do not forget to set this option or your module will not be visible in the front end;
  • Status - Select the publishing status of your module - Published, Unpublished and Trashed;
  • Access - Select the access level, i.e., which groups can view the module. Default is Public;
  • Ordering - Select the module ordering related to the template position;
  • Start publishing - Very useful option that may allow you to schedule the module to display on a specific day and time;
  • Finish publishing - Very useful option that may allow you to schedule the module to be hidden on a specific day and time;
  • Language - Select the language you wish to use in case you have a translated file;
  • Note - You can add a note to your module for your reference in the administration area;

 

The Options tab is subdivided in three easy usage accordion tabs - Basic Options |  Controls & Styles  | Advanced Options with the main functional and cosmetic configuration settings as described bellow.

Basic Options:

  • Transitions speed - 5000 is the default. The higher the value, the slower the transition (1000 = 1 second). Advisable is to set above 4500 and the minimum optimal is 5000 (5 seconds);
  • Max. articles - Maximum number of articles to show. Default is 5;
  • Intro order - Define the ordering of the articles between normal and random. Default is normal;
  • Order direction - Define the article intros ordering direction. Default is Ascending;
  • Order by - Define the order how the articles should be retrieved from the database - Created, Featured, Hits, Ordering, Article ID. Default is Created;
  • From Category - Select the category or categories from which the articles should be gathered. Field is required!;
  • Exclude articles - Select the article(s) you want to exclude. The list displays the Article title - Category title. Field optional;
  • Pre text - Text or images or both to be displayed before the module body (html allowed);
  • Pos text - Text or images or both to be displayed after the module body (html allowed);
  • Hide link - Allows you to hide the tiny little small link that links to JPro Extensions website. Thank you if you let it be here!;

Controls and Styles:

  • Use swipe - Defines if the swipe functionality (used also in touch screens) is active. Default is Yes;
  • Background style - Allows you to select predefined styles for the ticker background, from Transparent, Black to Blue, Red to Yellow, Purple, Green, Light Grey, Blue Grey, Simple Grey, Darker Grey, Violet and Gold. Default is Black to Blue;
  • Use shadow - Defines if a shadow effect should be applied to the ticker. Default is Yes;
  • Use background pattern - Defines if the predefined background pattern should be applied. Default is Yes;
  • Use rounded corners - Defines if he ticker should have its outer frame with rounded corners. Default is Yes;
  • Show images - Select Yes to use a defined image or articles images. Default is Yes;
  • Hide images on - Define if the images should be hidden in responsive grid on Phones, Tablets, both or none. Default is Phones;
  • Use article images - To use the article image, edit an article and below the editor, find the field Intro Image. This is the image that will be used in the JProIntroTicker;
  • Image links to - Define if and how the image link should be set - Article, Homepage, External link. Default is To Article; 
  • Links target - Define hoe the links behavior should be set. Default is Same Window;
  • External link - Define an external link for the images. Ex: http://www.somesite.com. No default;
  • Promo image file - Select an image from your images directory to be used as the default image. Default (sample) is JProIntroTicker logo;
  • Show Prev/Next controls - Define if the Previous and Next controls should be showed. Default is Yes;
  • Show help tip - Define if the small help tip, for the controls, should be showed. Default is Yes;
  • Show "Read more" - Define if the "Read more"  button or links should be showed. Default is Yes;
  • "Read more" button style - Select the style to be applied to the "Read more button/link - .Simple link (no button), Default button, White, Dark blue, Orange, Green, Light Blue, and Black buttons styles. Default is Default button;
  • Header style - Define the header (article title) style, from h1 to h5. Default is h2;
  • Header color - Define the header (article title) text color. Default is #ffffff (white);
  • Use header shadow - Define if to use shadow text effect in the header (article title) text. Default is Yes;
  • Intro text size - Define the text size to be used in the intro (article text). Default is 14px;
  • Use intro shadow - Define if to use shadow text effect in the intro (article) text. Default is Yes;
  • Intro color - Define the intro (article text) text color. Default is #c9c9c9 (light grey);
  • Links color - Define the color to be applied to the links. Default is #ffffff (white);
  • Links hover color - Define the hover color to be applied to the links. Default is #b1ddf5 (light blue);
  • Show indicators - Define is the small rounded indicators should be displayed. Default is Yes;
  • Indicators normal color - Define the color of the normal (inactive) state of the indicator. Default is #D8D8D8 (lighter grey);
  • Indicator active color - Define the color of the active (active/hover) state of the indicator. Default is #ffffff (white);

 Advanced Options:

  • Limit heading words - Define the word count limit for the heading. On big headlines, if the limit is exceeded, the (...) will be displayed. Default is 10;
  • Limit intro words - Define the word count limit for the intro text. If the limit is exceeded, the (...) will be displayed. Default is 10;
  • Limit category words - Define the word count limit for the Category name. On Categories, if the limit is exceeded, the (...) will be displayed. Default is 10;
  • Use continue string - Define if the continue string "(...)" must be used when breaking the sentences. Default is Yes;
  • Continue string - Define a continue string to be used when breaking the sentences. Default is "(...)";
  • Clean html tags - Define the cleaning/filtering, from No filtering (Not Recommended!), Safer (Joomla!™ output filter method), and Hard (strip all tags), that the system should be applied to the texts. It is important to set it to "Safer" or "Hard" to avoid any html in the article to break the surrounding content. Default is Safer;
  • Min. height Phones - You may override the minimum height, for Smartphones, of the ticker (not advisable) and set the numeric value in pixels for this parameter. Default is auto (empty);
  • Min. height Tablets - You may override the minimum height, for Tablets, of the ticker (not advisable) and set the numeric value in pixels for this parameter. Default is auto (empty);
  • Min. height All - You may override the minimum height, for All devices, of the ticker (not advisable) and set the numeric value in pixels for this parameter. Default is auto (empty);
  • Use minified script - Defines if the system should use the minified and compiled scripts and load faster and safer your page. Default is Yes;
  • Use compiled css - Defines if the system should use the minified and compiled stylesheets and load faster your page or use the normal css or the updates css (compiled version). Default is Yes;
  • Use css updates - Select Yes to use the css update files. When updating the module, your previous original css will be ket untouched. Default is No;
  • Load Joomla!™ bootstrap - Select yes ONLY if your template doesn't use the Joomla!'s bootstrap framework. If you're not sure, and if you don't see the buttons, get back here and set this option to Yes. Default is No;
  • Load full framework - Select Yes if you wish to load the full Joomla!™ bootstrap framework instead of just the needed jQuery scripts.<br>This option is useful if you're having problems displaying some elements on non-bootstrapped templates. Default is No;
  • Module tag - The html tag for the module. This is a Joomla!T default setting;
  • Bootstrap size - Specify how many columns the module will use on your template. This is a Joomla!T default setting;
  • Header tag - The html header tag for the module title. This is a Joomla!T default setting;
  • Header class - The css class for the module header title. This is a Joomla!T default setting;
  • Module style - You can override the default template overall modules styles. This is a Joomla!T default setting. This is not the JProPhotoSlidesPlus module style setting;


In the Menu Assignment tab you have the following module specific options:

  • Module assignment - Select where and which pages/menus the module will be visible (assigned);
  • Menu selection - Select the menus the module will be visible (assigned);

Front-end

Rendering JProIntroTicker in your front-end Joomla!™ site

After configuring the backend options, including the basic menu assignment, position, and publishing it, the JProIntroTicker module will automatically render on the pages and positions selected, so there's no need to do any other configurations. It's ready to use!

Duplicating the JProIntroTicker module

The JProIntroTicker module can be duplicated (cloned) if you need  and want to display more than one ticker module on each page. 

Tips & Tricks

A few simple tips and tricks

Organizing the intros

You may wish to set a specific category for the intros, instead of getting the article intros from the general categories your have published on your site. With this method, you can concentrate your intros in just one category. To do this, go to your Category manager and add a new category (ex: Intros Category). The you can add or assign articles to this new category and you'll always know where to publish/unpublish the Intro articles. This is just a suggestion and you can always use your already published articles.

Using the Article images

To use the article image in your ticker, you need to assign or set the article "Intro image" that is found below the Editor when you're editing an article. Set an image here.

Overriding language tags

To override language tags, you can follow Joomla!™ language overriding instruction or, more easily, just use the new Language Overriding component in your Joomla!™ administration.

Overriding the module

Just in case you want to change the look and feel of the JProIntroTicker module, it is highly recommended that you do an override of the default view to your template, so that in case of any updates, you'll not loose your personal settings/code/markup. To do this, follow the following steps:

 1. create a directory with the module name in your default template html directory (the path should look like the following - yoursite/templates/your_template/html/mod_jprointroticker/.
 2. copy the two files - default.php and index.html, inside the mod_jprointroticker tmpl directory to the directory you've created in your template (you should have now those two files inside the yoursite/templates/your_template/html/mod_jprointroticker/). Don't copy the tmpl directory. This is just to be used by the platform in the modules directory and not inside the templates html!
 3. Now that you have the default.php file, you can do your templating on this file, without affecting the core one.
Notes:
 - any templating might change the module behavior, so test it before you take it live. In case something goes wrong, you can still copy the original file again and start over.  

License

Please read the LICENSE.TXT that ships with the JProIntroTicker module package

Miscellaneous

None

 

Translations

The module ships with the default English (en-GB) translation files that are located in the following directory in your Joomla!™ website:

  • /language/en-GB/

You can check our GitHub page and see if there are already other community translations for the component and the language you want. If not, you can create your own following Joomla!™ translation guidelines that you can read here.
Then, if you wish, you can contribute to the community and fork our translations repository from GitHub and make a pull request.

 

Related Information


Shopping cart

The cart is empty
Extension added to cart! x
Back to Top