Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review

Information
Print

Latest News Enhanced Quickstart Guide

Information
Latest News Enhanced

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.

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.

Pre-requisites

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.

Modules page

Click on New.

New module

Select the module type Latest News Enhanced.

Select the module type

Step 2 - Set the module's general parameters

Set the module's title.

Edit the title

Set the template's position and publish the module.

Select the position

Step 3 - Assign the module to specific areas of the site

Assign the module to areas

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 Item selection tab.

Click the item selection tab

Choose the desired data source.
Select Articles to show articles, select K2 Items to show K2 items, if you are using K2 rather than the Joomla Content component.

Select the data source type

Select the category or categories the articles come from.

Select the categories

All categories are selected by default, therefore retrieving all existing articles or K2 items. To select a specific category, select it from the list.

Select a category

Once selected, remove the All Categories option.

Remove the option all categories

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.

Set the max count

Step 5 - Design the overall layout of all items

Click on the Layout tab.

Click the layout tab

Check the module layout related to the data source. Default is the layout used for articles. K2 is the layout used for K2 items.

Select the layout

Select the layout the items will follow. Set it to Column (or vertical) to show the items in a single column fashion, set it to Row (or horizontal) to show them in a row fashion.

Set the configuration

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).

Set the item width

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.

Set the width in percentages

It is possible to force items to be of a specific size. Set the width in pixels in order to do so.

Set the width in pixel

Choose what visual element you want to show for each item. For instance, you may want to add an image found in each article or K2 item.
In the context of the Latest News Enhanced extension, that visual element is called the Head of the item.

Choose a 'head' element

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.

Set the visual element size

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.

Set the title parameters

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.

Set the title parameters

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).

Link the item

Step 7 - Set the overall style for each item

Click on the Theming tab.

Click the theming tab

Choose the style that it is closest to what you are looking to achieve.

Choose a style

In that section, you can tweak the look of each item and add your own CSS properties.

Step 8 - Setup the visual element (head) that you have added to your design

In our example, we have decided to show an image, if one is found in the content. Therefore, click on the Head: image tab.

Click 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 particularly useful in the early stages of your setup.

Set the default image

The extension creates thumbnails of the images by default. It is wise to create thumbnails rather than using original, especially if the original images are rather large.

Create thumbnail of images

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.

Crop images

Step 9 - 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.

Click the information tab

Click on the '+' icon to add pieces of information before or after the title, before or after the text.

Click the + symbol

Set information parameters or each piece of information you want to show.

Set information blocks

There are plenty of pieces of information you can choose from. Select Author as an example.

Choose author

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 10 - 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:

Related tutorials and topics