Responsive Grid for Articles is a powerful module that provides beautiful animated filtering and sorting of Joomla articles.
The module is great for managing any categorised and tagged content like portfolios, galleries and blogs. Due to its light-weight and efficient approach, it works beautifully and smoothly on all modern devices including smartphones and tablets.
To install Responsive Grid for Articles
- Login to Joomla administrator control panel
- Click on
Upload Package File
- Select the zip file of the extension and click on
Upload & Install
- Go to
Modulesand search for
Responsive Grid for Articles
- Under the tab
Moduleselect a position for the module and set the Status as
- Under the tab
Menu Assignmentassign the module to the menu items where you want it to display.
If you assign the module to a menu item of type
Categories, the module will still display when you click on an article link. If you don't want the module to be displayed inside an article page, you must not assign it to those menu items.
Under the tab
Data Source you have the option to filter articles by:
- Authors aliases
If you leave the above 4 fields empty then all articles will be selected. Keep in mind that all 4 above filters work in conjunction with each other. That means that if you select a Category called
Category 1 and a tag called
Tag 1 then the module will show articles that belong to the category
Category 1 and at the same time they have the tag
If you also want to retrieve items from the children categories of the selected categories you must enable the field
Child Category Articles and insert a desirable
Category Depth (levels of children categories).
In the field
Items count you can limit the total items shown in the module. Default is 8.
You can also configure the module to hide or show Featured articles or filter articles by date by selecting a specific date range.
Additionaly you can exclude specific articles from the module in the field
Article IDs to Exclude by entering each article id on a new line.
Finally you can change the articles ordering in the module in the field
Article Field to Order By.
Layout mode: The module has 2 layout options;
List. With this parameter you can define which layout will be applied.
Layout toggle buttons: These buttons toggle between the two layout modes (Grid & List).
Theme: Select one of the available themes.
Image type: Select an image type.
Intro Image: To insert an Intro Image to an article, open the article in Article Manager and click on the tab
Images & Links. Then select an image in the field
Fulltext Image: To insert a Fulltext Image to an article, open the article in Article Manager and click on the tab
Images & Links. Then select an image in the field
Full Article Image.
Inline Image: An inline image is an image that you add inside the article text. If you select this type of image, the first image found inside the article text will be used in the module.
Image width: The module will crop the images to this width (in pixels).
Image height: The module will crop the images to this height (in pixels).
The module stores the cropped images to the folder
Title limit: Limits the total count of words in the item title.
Introtext limit: Limits the total count of words in the item introtext.
Date format: Enter a date format. You can learn more here: PHP Date Manual.
Enable animations: Enable or disable animations. If disabled, all operations will happen instantly and synchronously.
Effects: Select one or more effects for all filter operations. The stagger effect adds an incremental transition-delay to each target element in the order it is processed, and is also applied to sort operations.
TranslateX pixels: Starting value (in pixels) for the distance in X axis.
TranslateY pixels: Starting value (in pixels) for the distance in Y axis.
TranslateZ pixels: Starting value (in pixels) for the distance in Z axis.
RotateX degrees: Starting value (in degrees) for the rotation in X axis.
RotateY degrees: Starting value (in degrees) for the rotation in Y axis.
RotateZ degrees: Starting value (in degrees) for the rotation in Z axis.
Animation duration: The duration of the animation in milliseconds (1000 milliseconds = 1 second).
Easing: Animation easing type.
Animate Resize container: Select whether or not to transition the height of the container as elements are filtered in and out. If disabled, the container height will change abruptly.
Animate Change layout: Select whether or not to attempt transitioning of target elements during layout change operations.
Filters & Sortings
Category filter type: Category filters can be displayed in a dropdown list or as inline buttons.
Tag filter type: Tag filters can be displayed in a dropdown list or as inline buttons.
Filter class: The class of the filter buttons. If you have more than one instance of the module on the same page, each module should have a different filter class in this field (eg. filter2, filter3 etc).
Reset button: This button resets the grid filtering to its original state.
Title sorting button: Displays a button that sorts items by title.
Date sorting button: Displays a button that sorts items by date.
Author sorting button: Displays a button that sorts items by author.
Sort class: The class of the sort buttons. If you have more than one instance of the module on the same page, each module should have a different sort class in this field (eg. sort2, sort3 etc).
With the parameters of this section you can configure the number of visible columns per screen size.
LG items per row: Items per row for Large Screens (large desktop).
LG size: Size limit for Large Screens (in pixels). Under this limit, the
MD items per row will be applied.
MD items per row: Items per row for Medium Screens (medium desktop).
MD size: Size limit for Medium Screens (in pixels). Under this limit, the
SM items per row will be applied.
SM items per row: Items per row for Small Screens (tablet).
SM size: Size limit for Small Screens (in pixels). Under this limit, the
XS items per row will be applied.
XS items per row: Items per row for Extra Small Screens (small tablet/landscape phone).
XS size: Size limit for Phone Screens (in pixels). Under this limit, the
Phone items per row will be applied.
Phone items per row: Items per row for Phones.
Load PHP Thumb Factory: The PHP Thumb Factory is responsible for all image cropping operations. Do not disable it unless it is already used by another extension.
Load Fancybox: Enable the Fancybox only if you have also enabled the parameter
Show hover fancybox icon in
Load Font Awesome: If your template uses the Font Awesome library you can safely disable this parameter.