New Year 2018 present from CoalaWeb! Get 20% off for the entire month of January. More Info

News Guide

This guide will help you set up CoalaWeb News quickly and easily taking full advantage of all its features. When you install a CoalaWeb extension all the parts of the system will be installed at the same time making installing, upgrading and uninstalling a breeze.

Table of Contents

  1. Overview
  2. Updates
  3. Module News
  4. Module News Set
  5. Need More Help?

Overview

CoalaWeb News gives you the power to display your Joomla articles in variety of different ways with completely responsive layouts covering desktops, tablets, and mobile devices plus a tonne of other options. There are two versions available a Core (Free) and Pro (Paid Subscription) version that comes with extend functionality.

When installing all the parts of the system will be installed at the same time making installing, upgrading and uninstalling a breeze.
All CoalaWeb extensions have descriptions added to each input field which provide informative tooltips explaining it's purpose and use. To see one just hover over the form field label. [Figure-Tooltip]

Figure-Tooltip

Updates

The CoalaWeb News extension integrates with the inbuilt Joomla Update system so both Core and Pro users can keep their extension up to date. For Core users when you see updates listed in the Joomla update manager feel free to select it and update.

For Pro subscribers you will need to make sure you still have a valid subscription and that you have entered your Download ID into the System - CW Gears plugin. [Figure-1]

Not sure where to find your Download ID? Click HERE for more info.

Figure-1

Inside the CW Gears plugin options your will find a tab titled Updates and under it a Download ID input field. I recommend you copy and paste your Download ID into this field to reduce the risk of a typo and also to check for no spaces at the end. [Figure-1a]

Figure-1a

The CW Gears plugin will take care of the Download ID for any CoalaWeb extensions that doesn't come with a component.

Where can I find my Download ID?

To see your Download ID you will need to log into coalaweb.com and then go to:

Members -> My Subscriptions

You will then see the ID displayed in the module titled Download ID. [Figure-1b]

Figure-1b

TIP: To stop any typos I recommend copying and pasting the download ID and also to check for no spaces at the end.

News Module

The CoalaWeb News module has a huge list of options so we have broken them up into several sections which are explained in detail below.

General Options

To make it easy to explain I have broken this section up into several parts.

Part 1 Categories

The first option you have in this section allows you to choose which categories you want to use as the source for your articles. [Figure-2a]

Figure-2a

The second options allows you to display a linked list of categories that coincides with the current articles being displayed. [Figure-2b]

Figure-2b

Part 2 Articles

The first options allows you to turn on or off the display of an article title. Next you have the option of making the title a link to the associated article or not. With the next option you can select a style for the article title.

In the next input field you can enter a number to control the maximum amount of articles you wish to be displayed. The next option allows you to control the maximum amount of characters that will be displayed for each article. The next two options affect the ordering of the articles. [Figure-3]

Figure-3

Part 4 Exclusions

The first option in this section is for excluding articles by ID from being displayed, just enter their article ID's separated by a comma to have them excluded. Next is exclusion by date, you can exclude all article before or after a given date or only display articles from between two dates. The calculations can be done by using either the article's Published or Created date. [Figure-3a]

Figure-3a

Part 4 Read More

Note: The Read More code used in your articles will need to be in the following format.
<hr id="system-readmore" />

In this section we have some options to control if and how a read more link or button will be displayed. The first option is to turn on or off the display of a read more link. The second option control what text will be used for the link or button.

The next couple of options depends on what version you are using, for the Core users you only have a link option available. For the Pro users you have the following options:

  • Button Primary
  • Button Success
  • Button Danger
  • Just Link
  • Custom

The button options above are controlled by UIkit but if you are a Pro user and would like to use your own CSS class then choose Custom for the Type and then enter the CSS class in the next field labeled Custom Button. [Figure-4]

Below is an example CSS class.

btn btn-primary

Figure-4

Part 5 Links

CoalaWeb News also gives you the option to display links to more articles. The first option in this section turns on or off the links section. The second option allows you to enter a number for the amount of links you want displayed.

Next you can chose to display a heading for this section and also select a style for it from the drop down list. The last option allows you to turn on or off the display of a creation date next to each link. [Figure-5]

Figure-5

Module Layout Options

To make it easy to explain I have broken this section up into 4 parts.

Part 1 General

The first option in this section allows you to choose a layout for the module. If you are a Core user you get to use the default layout which is very flexible and for Pro subscribers you will get several options to choose from including the default. The next option controls the style of the panel used to contain your individual articles. If you are a Core user you get to use the default panel and for Pro subscribers you will get several options to choose from including the default.

The next two options affect the margins used by the module. The first option affects the spacing around and between panels and the second affects the spacing within each individual panel. [Figure-6]

Figure-6

Part 2 Dynamic Filter

Pro subscribers get the option to display a menu at the top of the module made up of Categories or Months based on the currently displayed articles. If Months is chosen the calculations can be done by using either the article's Published or Created date. Once one of these menu items is selected the articles will dynamically rearranged to only display the articles that belong to that particular group. [Figure-12] and [Figure-12a]

Figure-12

Figure-12a

Part 3 Alignment

Depending on what settings you choose and how you want your individual panels to look you might want to tweak the alignment of different elements. This next section will help you get the panels looking just how you want by allowing you to align the Title, Details, Article Text and the Read More link. [Figure-7]

Figure-7

Part 4 Columns

Width Guide: Desktop = 960px, Tablet = 768px and Mobile = 480px

The first option in this section is to turn on or off the matching of Column Heights. This will make all the displayed columns the height of the largest one making them balanced and symmetrical.

You can also choose how many columns you want to use with the added power to choose based on the size of the screen being used. You can for example have three columns on a nice big desktop screen and then one column on a small mobile device.

These settings are fully responsive which you can test by minimizing your browser screen on your desktop to simulate different screen sizes and see the changes live. [Figure-8]

Figure-8

Image Options

This section is dedicated to the display of images with your article content and contains some powerful features to get your content looking just how you want it.

To make it easy to explain I have broken this section up into 3 parts.

Part 1 General

All the options below with affect the default layout but may only partially affect certain other layouts. This is to preserve their intended look and feel.

The first option option is an easy one it allows you to turn on or off the display of images. The next option can make each image a link to the article or not. The next option allows you to choose which type of article image to use either the Intro or Full article image. The next option is to turn on the display of any Captions you have added to your article images. [Figure-9]

Figure-9

Part 2 Widths

Width Guide: Desktop = 960px, Tablet = 768px and Mobile = 480px

In this section you can choose how much space you want your images to use within the panel with the added power to choose based on the size of the screen being used. These settings are fully responsive which you can test by minimizing your browser screen on your desktop to simulate different screen sizes and see the changes live. [Figure-9a]

Figure-9a

Example Scenarios

Desktop: When viewing the module on a desktop I want one item per column with the image to the side of the panel. [Figure-9b]

Settings - Image: Yes - Caption: Yes - Width on Desktop: 30% - Columns on Desktop: 1 - Layout: Compact Square - Panel Style: Secondary

Figure-9b

Tablet: When viewing the module on a tablet I want two items per column with the image at the top of the panel. [Figure-9c]

Settings - Image: Yes - Caption: Yes - Width on Tablet: 100% - Columns on Tablet: 2 - Layout: Compact Square - Panel Style: Secondary

Figure-9c

Mobile: When viewing the module on a tablet I want one item per column with the image at the top of the panel. [Figure-9d]

Settings - Image: Yes - Caption: Yes - Width on Mobile: 100% - Columns on Mobile: 1 - Layout: Compact Square - Panel Style: Secondary

Figure-9d

Part 2 Alignment

The last option in this section controls the alignment of the images within their allocated space. [Figure-9e]

Figure-9e

To make this more clear I will give you an example of left, center and right.

Left [Figure-9f]

Figure-9f

Center [Figure-9g]

Figure-9g

Right [Figure-9h]

Figure-9h

This setting becomes more useful when using a multi column layout and you have small images being display at the top of their panels. [Figure-9i]

Figure-9i

Details Options

In this section you have the ability to turn on or off a variety of article details for example the Author, Category, Creation Date and or it's amount of Hits. You can also display an accompanying Title or turn on or off the section completely. [Figure-10]

Note: The location of the article details will be affected by the Layout you have chosen.

Figure-10

Advanced Options

The CoalaWeb News module also has a few of what I consider Advanced Options such as the UIkit prefix option for when you are using a YooTheme template you can set it to UK otherwise I recommend leaving it with the default CW. In this section you can also choose to not have HTML stripped out of the articles text as well as the option to assign a Module Class Suffix and choose whether to use Cache including the Cache Time. [Figure-11]

If you have chosen to leave HTML in your articles you will need to have PHP Tidy installed to ensure it's correct functionality.

Figure-11

News Set Module

The CoalaWeb News Set module has a huge list of options so we have broken them up into several sections which are explained in detail below.

General Options

To make it easy to explain I have broken this section up into several parts.

Part 1 Categories

The first option you have in this section allows you to choose which categories you want to use as the source for your articles. [Figure-2a]

Figure-2a

The second options allows you to display a linked list of categories that coincides with the current articles being displayed. [Figure-2b]

Figure-2b

Part 2 Articles

The first options allows you to turn on or off the display of an article title. Next you have the option of making the title a link to the associated article or not. With the next option you can select a style for the article title.

In the next input field you can enter a number to control the maximum amount of articles you wish to be displayed. The next option allows you to control the maximum amount of characters that will be displayed for each article. The next two options affect the ordering of the articles. [Figure-3]

Figure-3

Part 4 Exclusions

The first option in this section is for excluding articles by ID from being displayed, just enter their article ID's separated by a comma to have them excluded. Next is exclusion by date, you can exclude all article before or after a given date or only display articles from between two dates. The calculations can be done by using either the article's Published or Created date. [Figure-3a]

Figure-3a

Part 4 Read More

Note: The Read More code used in your articles will need to be in the following format.
<hr id="system-readmore" />

In this section we have some options to control if and how a read more link or button will be displayed. The first option is to turn on or off the display of a read more link. The second option control what text will be used for the link or button.

For the button you have the following options:

  • Button Primary
  • Button Success
  • Button Danger
  • Just Link
  • Custom

The button options above are controlled by UIkit but if you would like to use your own CSS class then choose Custom for the Type and then enter the CSS class in the next field labeled Custom Button. [Figure-4]

Below is an example CSS class.

btn btn-primary

Figure-4

Module Layout Options

To make it easy to explain I have broken this section up into 4 parts.

Part 1 General

The first option in this section allows you to choose a layout for the module. The next option controls the style of the panel used to contain your individual articles. For the panel you get several options to choose from.

The next two options affect the margins used by the module. The first option affects the spacing around and between panels and the second affects the spacing within each individual panel. [Figure-13]

Figure-13

Part 2 Auto Play

If you want to the slides to automatically start playing on page load set this option to Yes. [Figure-13b]

Figure-13b

Part 3 Dynamic Filter

This option will display a menu at the top of the module made up of Categories or Months based on the currently displayed articles. If Months is chosen the calculations can be done by using either the article's Published or Created date. Once one of these menu items is selected the articles will dynamically rearranged to only display the articles that belong to that particular group. [Figure-12] and [Figure-12a]

Figure-12

Figure-12a

Part 4 Alignment

Depending on what settings you choose and how you want your individual panels to look you might want to tweak the alignment of different elements. This next section will help you get the panels looking just how you want by allowing you to align the Title, Details, Article Text and the Read More link. [Figure-7]

Figure-7

Part 5 Slides

Width Guide: Desktop = 960px, Tablet = 768px and Mobile = 480px

The first option in this section is to turn on or off the matching of Slide Heights. This will make all the displayed slides the height of the largest one making them balanced and symmetrical.

You can also choose how many slides you want to use with the added power to choose based on the size of the screen being used. You can for example have three slides on a nice big desktop screen and then one slide on a small mobile device.

These settings are fully responsive which you can test by minimizing your browser screen on your desktop to simulate different screen sizes and see the changes live. [Figure-13c]

Figure-13c

Image Options

This section is dedicated to the display of images with your article content and contains some powerful features to get your content looking just how you want it.

To make it easy to explain I have broken this section up into 3 parts.

Part 1 General

All the options below with affect the default layout but may only partially affect certain other layouts. This is to preserve their intended look and feel.

The first option option is an easy one it allows you to turn on or off the display of images. The next option can make each image a link to the article or not. The next option allows you to choose which type of article image to use either the Intro or Full article image. The next option is to turn on the display of any Captions you have added to your article images. [Figure-9]

Figure-9

Part 2 Widths

Width Guide: Desktop = 960px, Tablet = 768px and Mobile = 480px

In this section you can choose how much space you want your images to use within the panel with the added power to choose based on the size of the screen being used. These settings are fully responsive which you can test by minimizing your browser screen on your desktop to simulate different screen sizes and see the changes live. [Figure-9a]

Figure-9a

Example Scenario

To see some examples click here

Details Options

In this section you have the ability to turn on or off a variety of article details for example the Author, Category, Creation Date and or it's amount of Hits. You can also display an accompanying Title or turn on or off the section completely. [Figure-10]

Note: The location of the article details will be affected by the Layout you have chosen.

Figure-10

Advanced Options

The CoalaWeb News module also has a few of what I consider Advanced Options such as the UIkit prefix option for when you are using a YooTheme template you can set it to UK otherwise I recommend leaving it with the default CW. In this section you can also choose to not have HTML stripped out of the articles text as well as the option to assign a Module Class Suffix and choose whether to use Cache including the Cache Time. [Figure-11]

If you have chosen to leave HTML in your articles you will need to have PHP Tidy installed to ensure it's correct functionality.

Figure-11

Need More Help

Do you have a question that wasn't covered by this GUIDE? Then it's time to drop by the Forum
Written by Steven Palmer Thursday, 25 June 2015 Posted in Extensions, News

GET IN TOUCH

We will be glad to help you with any general or technical questions.