News Show Pro GK4 article-showcase Joomla module

Last Updated:
For Joomla! 2.5

News Show Pro GK4 is a complex module for presenting content. Thanks to extended options, it allows to adjust content look very easily.

Basic module settings are in “Basic Settings” tab:


Except specifying module suffix and ID, we can specify module width in per cents and define font size to Basic size.

The next group of settings are parameters connected with the choice of data source and its filtering:

Data source can be Joomla! categories or articles chosen by a user. In the case of categories, it is enough to choose categories from multiple choice list whereas when we want to present articles chosen, a list of their IDs separated with a coma has to be given, e.g. 233, 25, 122, 145.

“News order” and “News sort order” options are for specifying the way of sorting articles. Thanks to “Show article created after” option, it is possible to specify the oldest article to be presented. “Show frontpage items” option allows to display or hide articles which are marked as “Featured” and thanks to “Frontpage items only” option, it is possible to present those articles only. When “Show unauthorized items” option is on , we can display articles to which normally a user does not have access because of permissions and then, after clicking links to these articles he/she will be asked for log in.

“First news number” option allows to specify from which article in a given articles collection data will be presented. It is useful when we have more than one module operating on the same articles collection but we want  to divide this collection in two between two modules – then, the first module displays articles from the first one to X number and the second displays articles from X number to the end.

The greatest options group are article layout options:

In the first part of these settings we can specify the amount of pages with articles and amount of columns and rows on one page. So the total amount of articles loaded is:

amount of pages with articles * amount of columns * amount of rows

In “Pagination” option, it is possible to choose one out of four pagination interface style with articles.

Next options are connected with particular articles elements:

Options seen above allow to define articles headers look: amount of text, header link, text layout and its float.

Images options allow to define whether it includes a link to article and its positioning.

Similarly as it is with a header, in text articles options it is possible to  specify text positioning, switch on/off a link to article and specify the amount of text displayed.

Each article can display two information blocks. For each, we can specify displayed data format. It is enough to give one of the following sequences:

  • %AUTHOR – displays author name (we choose exact name source in “Author name” option) and avatar from service (if “Show author avatar” option is on; we specify avatar size in “Avatar size” option)
  • %CATEGORY – displays category name (we can switch on a link to a category in „Category link” option)
  • %DATE – displays article’s creation or modification date (according to “Used date” option), date format is specified in “Date format” option
  • %HITS – displays article amount of visits
  • %RATE – displays article rate

At the end of this group of options, there are options connected with elements order:


It is possible to specify in each element its order or switch it off completely. Additionally, it is possible to add spaces between articles in “Article block padding” option.

The next group of settings are links parameters which are the complement of article content displayed:

Similarly, as it is with articles, it is possible to specify the amount of pages with links, the amount of lines (in this case “Amount of links’)and the amount of columns with links. It looks the same in the case of links pagination.

Additionally, we can specify blocks margins with links and their position towards articles (“Links position”). In each link, it is possible to show article’s short description (“Show links description”) and specify title text limit and its description.

Thumbnails configuration presented in a module is a separate group of options:

News Show Pro GK4 Thumbnails Settings

„Create thumbnails” option allows to switch on a system of generating thumbnails. The way of generating them are defined by the remaining options. Thanks to “Keep aspect ratio” we will always have images adjusted best to “Thumbnail width” and “Thumbnail height” sizes. “Thumbnail background” option specifies background color displayed in images when the image does not cover fully an area given (and “Thumbnail stretch” option which stretches images to sizes given is off). “Thumbnail quality” option specifies a compression level. “Cache time” is a very important option – it prevents from generating thumbnails in every page request.

„Thumbnail Image Type” determines the source of images for generating thumbnails. Users can choose between three options: Joomla! images, K2 Images, First article image. Option Joomla! Images is available since Joomla! 2.5 release because when user select this type of source images for thumbnails are getting from Article Standarized Layout options and proper images need to be set in single article settings. To use as a thumbnail image configured in K2 item you need to choose ‘K2 Images’. In ‘First article image’ option thumbnails is generated from first image which occur in article content and works with all Joomla! versions.

All thumbnails are stored in a module cache/ catalog. Additionally, if a given article does not have images, default images defaultMOD_ID.png from default/ catalog can be loaded, where MOD_ID is an ID of our module, e.g. newsprol.

The next to the last group of settings are additional settings:

The first five options are connected with pages with data animation. “Autoanimation” option allows to switch on auto animation and its speed and transitions are defined by “Animation speed”, “Animation interval” and “Animation transition” options. Thanks to “Hover animation” option, it is possible to switch on animation activation after moving a cursor on a pagination button (normally, it requires clicking on this button).

In options from “Article content” group, it is possible to specify symbols displayed at the end of “End of text” short text and switch on cleaning (X)HTML tags (we recommend to use this option in order to avoid problems with page validation). Additionally, it is possible to specify whether plugins from article content be parsed (“Parse plugins”) or whether plugins tags are removed automatically (“Clean plugins”).

The last group presents options connected with external files:

We can enforce to use default module CSS style thanks to “Use default CSS” option – it has to be remembered that in the case of templates which support News Show Pro GK4 module, this option has to be switched off.

In  “Using JS module” option, it is possible to specify the way of adding module scripts. In the case of greater amount of module instances on the page, the safest option to use will be “Automatic” mode.


Image Cropping

Starting from 3.0 version of News Show Pro, it includes a complex mechanism of images cropping which will fulfill the most requiring users’ needs.

While generating images cropped, we can specify three main groups of images:

1) images with _noscale and _cropped suffixes,
2) images cropped according to rules specified by a user,
3) images cropped according to a general rule.

The order of these groups is not accidental; if an image is categorized to a group given, it cannot belong to another group.

Images with _noscale and _cropped suffixes is a group of images to articles for which a user himself/herself created and placed (in the same catalog) other versions of an image having in the name a suffix given.

_noscale suffix gives the effect that an image given it will be displayed in a non modified form in the module. When it comes to _cropped suffix, it means an image version cropped by a user which additionally will be scaled such as a normal image based on module settings.

Generally, image versions with suffixes in the name can be treated as other types of an image describing an article given. The basic advantage of this solution is the fact that it is possible to match totally different thumbnail for an article, not necessarily connected with an image in the article.

The second group are images cropped according to rules specified by a user. A user may define two basic rule types, namely:

– rules connected with images size to crop (CLASS_NAME=TOP:RIGHT:BOTTOM:LEFT),

– rules cropping images depending on CSS class which a given image includes (WIDTH:HEIGHT=TOP:RIGHT:BOTTOM:LEFT)

All cropping rules in this group work with pixels use as a unit.

Exemplary rules:


An above rule will make each image including small_image class cropped 10pixels from each side.


This rule, however, will make each image with 640 : 480 pixels cropped 20pixels at the top and at the bottom and 40pixels on left and right side.

In the case of the third group which are images cropped according to a general rule – used for other images, cropping sizes are defined in per cents.

Additionally, if it is important for us to have image’s sizes saved and we want to avoid stretching our image or some blank spaces around an image (in the case of switching off stretching an image), we can use automatic scaling option. Then, “Keep aspect ratio” and “Thumbnail stretch” options have to be switched off and “Image auto-scale” option has to be switched on.

Automatic scaling causes that an image is adjusted (scaled) to sizes specified by a user so as to avoid blank spaces and save the central part of an image. Blank spaces at the top and at the bottom or from the two sides can be cropped depending o proportions of the original image and the thumbnail sizes.

e.g. if we set 160:120 pixels as a thumbnail size where an original image has 640:360 pixels, then a thumbnail will have an image with 480:360 pixels miniaturized three times. So, there will be blank spaces cropped from the two sides; 80pixels width each.

Portal Mode

Portal Mode styles make possible the entire reorganization of the content presented in a module. There are few default styles available.

Depending on a style chosen, some options are inactive. E.g. Options connected with content layout in an article are redundant in an articles gallery because there is a date and an article title presented only.

The aim of Portal Mode styles is to offer more flexibility for users very often needed while creating more complex portals with updates based on Joomla!. It is worth mentioning here that it is possible to create your own Portal Mode styles quite easily; it is good to create them basing on already existing styles.

Each Portal Mode style consists of a few elements (name fragments depending on a style name were marked with a star):

  • Classes in gk_classes/portal_modes/ catalog which is the basis for a style given. It has an init method initiating the style work, output method which is responsible for content display of a style given and a method *_getData which is used for modification of the way of loading data by a style given (it overwrites the way of loading data from the base with News Show Pro GK4 module).
  • There are two files in tmpl catalog, namely: content.* and default.*. The first one includes XHTML code generated by a style whereas the second one includes additional elements such as: style configuration in the form of JavaScript object.
  • There are additional style files in interface/css and interface/js catalogs such as: CSS file responsible for style look (together with some images in interface/images catalog and JavaScript file responsible for animations and other functionalities of a style given.

Basing on existing styles, it is possible to create your own styles. You cannot forget about adding appropriate parameters in XML file of a module and load parameters value of a style given with module helper.php file use.

News Show Pro GK4 article-showcase Joomla module 4.715 (94.29%) 7 votes

This article was first published

Villa Belluci - View our NEW theme

Tutorials & tips delivered regularly

Expand your purchase with regular tutorials and tips to making your site better, direct to your email.