News Guide
Table of Contents
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.
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]
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]
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]
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]
The second options allows you to display a linked list of categories that coincides with the current articles being displayed. [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]
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]
Part 4 Read More
<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
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]
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]
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]
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]
Part 4 Columns
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]
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
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]
Part 2 Widths
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]
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
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
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
Part 2 Alignment
The last option in this section controls the alignment of the images within their allocated space. [Figure-9e]
To make this more clear I will give you an example of left, center and right.
Left [Figure-9f]
Center [Figure-9g]
Right [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]
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]
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]
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]
The second options allows you to display a linked list of categories that coincides with the current articles being displayed. [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]
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]
Part 4 Read More
<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
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]
Part 2 Auto Play
If you want to the slides to automatically start playing on page load set this option to Yes. [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]
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]
Part 5 Slides
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]
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
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]
Part 2 Widths
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]
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]
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]