Joomla: using {loadposition} and {loadmodule} in articles

There are two features in Joomla that allow you to easily place modules directly inside articles:

• loadposition allows you to publish all the modules in a particular position.
• loadmodule allows you to publish just one particular module.

One of our students was using these features to create a layout but wasn't happy with how it looked inside his article. He wanted more control.

 

This tutorial will show you how to place modules inside your article with more style. Here's what we're going to do:

• We're going to take two standard modules: Login Form and Who's Online.
• We'll combine them inside one article.
• We'll rearrange them on the page using divs so that they are side-by-side.
• We'll use inline styles to give the modules some color.

This should get you started with this technique and from there you can take it to limit of your styling ability. Be sure to check out our online HTML and CSS courses for more help.

Step 1. Make Sure the Plugin is Enabled

• Go to Extensions > Plugin Manager
• Use the filter to find Content - Load Modules.
• Check that Status shows a green check. If it's a red circle, click it and it will turn green.

Step 2: Create an Article

• Create an article.
• Load the login module by typing {loadmodule mod_login}. You can use this syntax to load any module by name.
• Load the Who's online module by position by typing {loadpostition whoonline}

There is no actual template postilion called whoonline. You can make up your own module position names and use them for this technique. We'll show you how it gets created as we go. For now, just create an article.
I'm supposing this scenario. It's a membership drive, we want you to be able to sign up. If there is somebody online right now, we want you to click their name and get in touch. If it was real, I'd use something more powerful like a contact form module or a list of contacts. For this demonstration we just need some modules we all have access to so we can practice.

 

Step 3. View the page

This is what the page looks like. You don't have the Who's Online module showing yet. Let's learn how to put that in there. We already wrote the shot line of code. Let's create the module for it.

Step 4. Publish the Who's Online module

• Go to Extensions > Module Manager > New
• Choose the Who's Online Module and configure it.
• Give it a title.
• Create a position name. This is where we'll use that one we called whoonline. You can use any name you want as long as it is unique.
• Save your changes.

• View the article. Our newly published module now shows inside the article. So far we have loaded a module by name and by position. We invented a position, but you can also use a template postilion if you want a published module from another page to show here.

 

Step 5: Create divs for placement and styling

• Both our modules are inside the article but they don't look very good yet.. Let's put the two modules side by side.
• Edit your article and turn your editor to code view. If you have any problems at this point, please consult this tutorial.

• One of the best ways to put these side by side is to use div tags. Create a wrapper, and float two more divs inside of it. Put your loadpostion/loadmodule code inside the divs.

1.</div>

2.<div id="div2" style="float: right; width: 350px; background-color: #00ff00;">

3.{loadpostition whoonline}

4.</div>

5.</div>

• This is what the article looks like in the editor view.

• It looks better on the front of the site:

If you know how to style with CSS you can use inline styles or get classes from your style sheet and create any look you want. You can position them color them, add additional text and pictures and much, much more.