Thursday, March 28, 2024

Useful Joomla! Extensions for Web Developers

One of the best things about Joomla! CMS is that there are so many extensions that can be added to enhance a website. In this article we’re going to have a look at some useful Joomla! extensions for web developers. As with all the extensions in this series, you can find them by visiting the Joomla! Extensions page.

Using the Random Anything Joomla! Extension

The first extension we’re going to look at is Random Anything. This is a module that you can set as a standalone on a page and add content to it which will display a new message each time the page is loaded. It’s reminiscent of the JavaScript Tip of the Day that used to run over at WebReference.com

Install it by going to Extensions: Install/Uninstall, locating the plugin, then clicking on the Upload File & Install button.

This module is really easy to use. To make it work, you’ll need to add text into the text area of the module. You can set this up using Notepad or an HTML editor. You can also use CSS to format the text.

Select Type

To use this module, go to Extensions: Module Manager. If the extension isn’t readily visible on the page, go to the Select Type drop down list and choose mod_randomanything. That will bring it up quickly.

Module Edit

To activate the module and to add parameters, click on the Random Anything link.

Below is a sampling of some text that’s included in the README file, along with some sample CSS, as well.

<div class="question">What gets wetter and wetter the more it dries?</div><div class="answer"><div class="header">Answer</div>Towel</div>
<div class="question">You throw away the outside and cook the inside. Then you eat the outside and throw away the inside. What did you eat?</div><div class="answer"><div class="header">Answer</div>Chicken</div>

----css----
div.answer{margin:5px 0px;background:#fff;color:#fff;font-weight:bold;}
div.answer:hover{background:#900;color:#fff;}
div.answer .header{background:#fff;color:#999;float:left;margin-right:5px;padding:0px 3px;}

I pasted in the entire text area as well as the CSS to see what this module can do.

Frontend

To see what this looks like, refresh the frontend. Each time you refresh the frontend, a different message will appear. As you can see, it’s quite decent and a great idea if you have a tip of the day message that you’d like to display.

Using the Googlemaps Plugin Joomla! Extension

The next extension we’ll look at is the Googlemaps Plugin.

Plugin Manager

Once you install the plugin, you’l see the following screen (above), which gives you instructions for how to install the plugin and activate it. Among other things, you’ll need to get an API key from Google in order to enable the plugin.

Google Info

On this page you need to read the docmentation, agree to the terms and conditions, enter your URL and generate an API key.

API Key

This generates the API key, which you’ll need to highlight and copy.

Enter API

Next, go Extensions: Plugin Manager. To find the Google Maps plugin, type Google into the Filter parameters box and click Go. When the Google Maps plugin appears, click on the link to open it, then paste your API key in the Googlemaps API Key paramters box. Set Enabled to Yes and save your changes.

Content Article Manage

Now you’re ready to use Googlemap in an article. Go to Content: Article Manager. Click on the New button to create a new article. In this case, it’s going to be an article that will only display the map.

Article

Here are the settings I used:

Title: Googlemap Test
Section: About Joomla!
Text Area: {mosmap}
Published: Yes
Front Page: Yes

Save your changes.

Frontend 2

Refresh the frontend. Note the awesome Googlemap in the center of the page.

And this is only the beginning. You can also check out the documentation.

Plugin Parameters

To configure the look and feel, go back to the Plugin Manager (Extensions: Plugin Manager). Find the Google Maps plugin and open the page. As you scroll down the page, you’l find a variety of configuration settings.

Note that when you use the code ({mosmap}), this is for one line, though you can use it multiple times on a page to bring up different maps.

On this page are some configuration settings, which I’ve pasted in here for your reference:

{mosmap width='500'|height='400'|lat='52.052312'|lon='4.447141'|
zoom='3'|zoomType='Large'|zoomNew='0'|mapType='Satellite'|showMaptype='1'|
overview='0'|text='sv DWO'|tooltip='DWO'|marker='1'|
align='center'}

Note that you need to remove any returns to create one line. Also note that you can change any of the paramaters to suit your web pages.

For other information on what you can do with this plugin, visit the developer’s website. When you get there, go to the Googlemaps plugin tab and check out some of the demos.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured