Fitness - A Latest News Enhanced Pro module instance

There are a few key settings that need to be properly set in order to get a responsive, mobile-ready module instance.

Step 1

Selecting the items

In this example, a few features are demoed:

• once clicked, the article disappears from the list of items in the module instance (Exclude current item),
• all articles are shown, even the ones that are only visible to registered users (Unauthorized items).

Finally, it is necessary to order the items by category to properly show category labels on the first item for each new category.

Step 2

Setting the configuration/layout

The module instance is shown in a position of the template that is taking most of the template's width, therefore the best suitable configuration is horizontal (in older versions) or row in the layout tab.

Step 3

Preparing individual elements

To show images above the text, the best starting layout style is full width.

Each element has a width of 300px, a reasonable size when it comes to show the module on mobile devices.
It is important to keep the width in pixels in order to let the animation script handle the resizing and ensure the instance will show properly, no matter the size of the browser window.

The head of each item is an image, which is fetched from the image intro parameter of each article.
The width is required to be the same as the size of the item when using the full width style.
Note that a white border has also been added to the images to add extra space between items (so it does not look as cramped).

Step 4

Linking items

It was chosen to append the read more links to the text for this particular example.
Since registered content is previewed in this instance, the Unauthorized link label has to be filled up.

Step 5

Setting the categories

Categories are visible over the image, with the default styling.
They are consolidated (showing only once instead of showing on each item). This is why categories need to be ordered (in step 1).

Step 6

Setting the detailed information

Showing the tags and the social media icons is as simple as selecting the right types from the body tab.

Step 7

Styling the tags and share icons

Go to the Information tab and the Tags section.
Set the tag order desired and set Distinct to yes. Here, we set Use tag classes to yes. It takes the classes that are set up in the Tags component, at the tag item level.

Go to the Share icons section.
Set the color to Background, the Radius to 3 and select the social services you want to show. Here, we selected LinkedIn, Twitter, Facebook and Pinterest.

Step 8

Choosing the number of visible items

This is a major decision to make: it will serve as a base for animation and pagination to determine how many elements can show on the page.
As a rule, it is best to put the number of items that can be visible at once in the template, at its full size (assuming the template position can not expand indefinitely).
Here, the template can handle 4 items when fully extended, therefore the number of visible items is 4.

Step 9

Setting the animation

The items need to scroll horizontally, but only with user interaction. That is why auto start is disabled.
Having an animation will allow for smooth scrolling and proper resizing on any device.

Step 10

Setting the pagination

The pagination is limited to arrows positioned around the items, opposed to having the pagination show above or below the items. It does not take any extra real estate. The styling is handled by Bootstrap and an offset of 50px is added for the arrows to show 50 pixels below the upper side of the module instance.

Step 11

Making it look better

A couple of improvements have been made over the default style in order to render the category labels 'see-through'.

/* make the category 'see-through' */
#lnee_164 .newshead .picture .catlink {
    opacity: .8;
}

Note 164 in #lnee_164 needs to be replaced with your module id.