How to enhance Joomla! articles with nice effects and attract visitors

  Creating articles that can attract many visitors and turn them into customers is not an easy task.

  Joomla! CMS provides nice means to ease the creation of such stuff and lets administrator concentrate on content. Thanks to Joomla! it allows to use extensions that can help even more. There are many extensions that add cool effects to articles. We will have a look at one of them that contains 3 dozens(!) of user interface solutions that can be embedded in Joomla! pages.

  It's called Art Data. This extension allows to add the following:

  • tables with sorting, scrolling, resizing support
  • charts and graphs of various types
  • translation tools
  • functionality to get data from database and present it in various ways
  • maps
  • bookmarks
  • clocks
  • content from external websites and files
  • images and image effects
  • context menu
  • notifications

  Let's create some examples of how to use Art Data extension. First article will describe working with tables, charts and translation.

   1. Getting data from database

  Let's say we would like to get 7 most popular articles from our Joomla! database and display their titles and hits in a table. We will use Art SQL Table for this.


   Plugin code

{artsqltable query="SELECT TITLE, HITS from #__content ORDER BY HITS DESC LIMIT 0,7"}{/artsqltable}
   Result
TITLEHITS
Art Sexy Lightbox - Joomla! popup for images, galleries, inline content, Flickr and Picasa photos94261
Demos23340
Art Wijmo Menu - Free Menu for Joomla!16789
Art Sexy Lightbox Lite Edition - Free Art Sexy Lightbox14183
Art Feature Carousel12619
Art Universal Lightbox - Free Joomla! Extension with 3 lightboxes10960
How to enhance Joomla! articles with nice effects and attract visitors7418

  It's easy, right?

  Art SQL Table can connect to other MySQL databases and even others - like Oracle, MS SQL, DB2 - all you need it to indicate connectionString attribute. The other database plugin called Art Query can get data from tables and display it as a plain text.

   2. Adding table functinality

  Let's add some nice table functions. Art Table Sorter plugin will help us.


   Plugin code

{arttablesorter class="tablesorter"}{artsqltable attributes="class=tablesorter" query="SELECT TITLE, HITS from #__content ORDER BY HITS DESC LIMIT 0,7"}{/artsqltable}{/arttablesorter}
   Result
TITLEHITS
Art Sexy Lightbox - Joomla! popup for images, galleries, inline content, Flickr and Picasa photos94261
Demos23340
Art Wijmo Menu - Free Menu for Joomla!16789
Art Sexy Lightbox Lite Edition - Free Art Sexy Lightbox14183
Art Feature Carousel12619
Art Universal Lightbox - Free Joomla! Extension with 3 lightboxes10960
How to enhance Joomla! articles with nice effects and attract visitors7418

  Sorting support and cool theme. That's nice, right?

   3. Creating bar and pie chart

  Let's turn this table into bar chart. We will replace Art Table Sorter with Art Visualize plugin.


   Plugin code

{artvisualize type="bar" width="600px" height="500px"}{artsqltable firstHeaderElement="true" query="SELECT TITLE, HITS from #__content ORDER BY HITS DESC LIMIT 0,7"}{/artsqltable}{/artvisualize}
   Result


TITLEHITS
Art Sexy Lightbox - Joomla! popup for images, galleries, inline content, Flickr and Picasa photos94261
Demos23340
Art Wijmo Menu - Free Menu for Joomla!16789
Art Sexy Lightbox Lite Edition - Free Art Sexy Lightbox14183
Art Feature Carousel12619
Art Universal Lightbox - Free Joomla! Extension with 3 lightboxes10960
How to enhance Joomla! articles with nice effects and attract visitors7418

  That's never been so easy! We've got data from database and displayed it in a bar chart with 3 lines of plugin code. Let's create pie chart


   Plugin code

{artvisualize type="pie" width="500px" height="500px" pieMargin="80"}{artsqltable firstHeaderElement="true" query="SELECT TITLE, HITS from #__content ORDER BY HITS DESC LIMIT 0,7"}{/artsqltable}{/artvisualize}
   Result


TITLEHITS
Art Sexy Lightbox - Joomla! popup for images, galleries, inline content, Flickr and Picasa photos94261
Demos23340
Art Wijmo Menu - Free Menu for Joomla!16789
Art Sexy Lightbox Lite Edition - Free Art Sexy Lightbox14183
Art Feature Carousel12619
Art Universal Lightbox - Free Joomla! Extension with 3 lightboxes10960
How to enhance Joomla! articles with nice effects and attract visitors7418


  Art Sparklines plugin will help us displaying this information as a line chart.

   4. Creating inline charts

  We will use combination of Art Query plugin to get data from the database and Art Sparklines to draw the chart.


   Plugin code

{artsparkline type="line" width="400px"}{artquery rowseparator="," query="SELECT HITS from #__content ORDER BY HITS DESC LIMIT 0,10"}{/artquery}{/artsparkline}
   Result
94261,23340,16789,14183,12619,10960,7418,6794,6721,6195
   5. Adding translation support to the whole site

   Plugin code

{arttranslatepage}{/arttranslatepage}
   Result

  It's easier than any other!




  Next time we will describe how to work with images, add nice image effects, like reflection or zoom, create lightboxes, galleries and slideshows. Yes, each of these can be done with couple of plugin code strings as well.

   Stay tuned!