It is assumed that you have already downloaded and installed the extension (free or pro). If not, you can find more information here on how to do so.
Note There are many options in the extension to give you maximum flexibility in the way you want to design your final output. In this guide, you will be walked through the main parameters that are necessary to create a module instance. You can leave all other parameters to their defaults until you are ready to fine-tune its visual aspect and performance.
You need to have created articles (through the core Joomla content extension) or K2 items, if you have installed the K2 extension and desire to use Latest News Enhanced for showing K2 items.
Step 1 - Create a module instance of Latest News Enhanced
Go to the menu Extensions -> Modules.
Click on New.
Select the module type Latest News Enhanced.
Step 2 - Set the module's general parameters
Set the module's title.
Set the module's position.
Step 3 - Assign the module to specific areas of the site
For testing purposes, it is easier to leave the default settings.
Step 4 - Narrow down the list of items you want to show
Click on the Selection tab.
Choose the proper data source.
Select Articles to show articles, select K2 Items to show K2 items
Select the category or categories the items come from.
All categories are selected by default, therefore retrieving all existing articles or K2 items. To select a specific category, select it from the list.
Once selected, remove the All Categories option.
Narrow down the number of items that will be listed by the module instance. Set Max Count to a reasonable amount while you are in the testing stage.
Step 5 - Design the overall appearance of all items
Click on the Layout tab.
Check the layout related to the data source. Default is the layout used for articles. K2 is the layout used for K2 items.
Set the configuration of the items. Set it to Vertical to show the items in a column fashion, set it to Horizontal to show them in a row fashion.
Set the width of the items.
The default settings will set each and every item to take 100% of the container' space, therefore forcing the items to show in a vertical fashion (or have 1 column).
In order to show 3 items in a row (or have 3 columns), set the percentage width to something like 30%. This will give each item a third of the space allocated by the container to the module instance (plus some space for margins). To limit the downsizing of each item to something visually pleasing and lisible, you can set a minimum width, under which the items will stop resizing down. In a responsive environment, this will have a visual impact. 3 items in a row will resize down until they hit the minimum size. Once that limit is hit, the third item will be forced to show in a second row.
It is possible to force items to be of a specific size. Set the width in pixels in order to do so.
Select the style for each item.
Choose what visual element you want to add to each item. For instance, you may want to show an image found in each article or K2 item.
In the context of the Latest News Enhanced extension, that visual element is called Head
Set the width and height of that visual element. In the event you chose the original style, this can be of any size, but a small image will definitely load faster.
Decide how the title of the article or K2 item will show. It can be restricted to show on one line, no matter how resized the item will be, it can be limited to a fixed amount of letters or show in its full glory on one or several lines.
Decide how the text of the article or K2 item will show.
The default font size will dictate the initial font size for the overall design of each item. All text will be resized according to that font size of reference.
Set the position the text should have compared to the visual element (head) that you have added. If no visual element has been selected, just leave the default setting.
Limit the letter count to a reasonable amount that will comply to your design requirements. If you don't restrict the amount of text, you will end up with over-blown items if your articles or K2 items are lengthy.
Stripping the tags will remove all HTML tags included in the text of the articles or K2 items, therefore removing all formatting. It is preferable to leave this setting to Yes in your initial setup.
Step 6 - Link the items to the original articles or K2 items
You can add a link that will open the associated article or K2 item. You have several options:
- make the title of the item clickable,
- make the head (or visual element you have selected) clickable - calendar representations are not clickable,
- add a read more link (you need to set the label in the Read More section),
- append a read more link at the end of the text (you need to set the label in the Read More section).
Step 7 - Setup the visual element that you have added to the design
In our example with have selected to show an additional image. Therefore, click on the Head: image tab.
Good practice would be to setup the default image that will show if no image has been found in your article or K2 item. It will be useful in the early stages of your setup.
The Crop Pictures option will ensure all your images fit perfectly in the size (head width and head height) you have previously set, resizing and cropping them if necessary.
Step 8 - Add contextual information
You can show relevant information to each item you are showing with the module. For instance, you can show the author of each article or K2 item.
Click on the Information tab.
Set information parameters or each piece of information you need to show.
There are plenty of pieces of information you can choose from. Select Author as an example.
You can show an icon or prepend text to the author. For instance, if you add 'The author is ' (with a space after the 'is') in the Prepend Text field, you will end up with something like:
The author is John Doe
Append New Line will force the following piece of information to show on the next line.
Step 9 - Save the module
That's it! You went through the minimal amount of information you need to know to create your first instance of the Latest News Enhanced module.
Let's see what the module instance looks like on the public site: