Main Menu
 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:
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
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
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
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
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
5. Adding translation support to table
Let's imaging that your Joomla! site is visited by people of various countries. Let's help them understand what you are writing about. Art Translate will do this. Double click on any article title to translate the word! Plugin code
{arttranslate trigger="lftclick" destination="{fr:'French',it:'Italian',de:'Deutsch'}" type="bubble"}{arttablesorter class="tablesorter"}{artsqltable attributes="class=tablesorter" query="SELECT TITLE, HITS from #__content ORDER BY HITS DESC LIMIT 0,10"}{/artsqltable}{/arttablesorter}{/arttranslate} Result
Double click on any article title to translate the word! Any text can be translated in the same way. If you would like to add translation functionality to the whole page you can use Art Translate Page plugin. 6. 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!
|