Responsive Grid for K2

Responsive Grid for K2 is a powerful module that provides beautiful animated filtering and sorting of Κ2 articles.

The module is great for managing any categorised 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 K2

  1. Login to Joomla administrator control panel
  2. Go to Extensions > Manage
  3. Click on Upload Package File
  4. Select the zip file of the extension and click on Upload & Install
    Installation
  5. Go to Extensions > Modules and search for Responsive Grid for K2
  6. Under the tab Module select a position for the module and set the Status as Published
    Installation
  7. Under the tab Menu Assignment assign the module to the menu items where you want it to display.

      Important:

    If you assign the module to a menu item of type K2 Items or K2 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.

Data Source

Under the tab Data Source you have the option to select Custom Filtering or Specific Items.

Custom Filtering:

With the Custom Filtering you can filter articles by:

  1. Categories
  2. Tags

If you leave the above 2 fields empty then all articles will be selected. Keep in mind that the 2 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 Tag 1.

If you also want to retrieve items from the children categories of the selected categories you must enable the field Child Category Articles.

In the field Items count you can limit the total items shown in the module. Default is 8.

Configuration

You can also configure the module to hide or show Featured articles, filter articles by date by selecting a time range or fetch only items with videos.

Additionaly you can exclude specific articles from the module in the field Exclude Items by entering the articles id's separated by commas.

Finally you can change the articles ordering in the module in the field Items Ordering.

Configuration

Specific Items:

If you want to display specific items in the module you must select the option Specific Items in the field Source.

Then add the items of your choice in the field Add Items. If you want to change the items ordering just drag the items to re-order them.

Configuration

Basic Settings

Layout mode: The module has 2 layout options; Grid or 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.

K2 Image size: The module will use this K2 image when cropping images.

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).

  Important

The module stores the cropped images to the folder root/images/regridk2/. When you change the images of the K2 items, the changes are not immediately reflected to the module because the module is using the cropped images stored at root/images/regridk2/. In this case, you must download, install and publish the plugin Minitek K2 Tools. This plugin will automatically update the images in the cache folder everytime an image is changed in a K2 item.

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.

Effects Settings

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.

Configuration

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).

Configuration

Responsive levels

  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.

Configuration

Advanced settings

Load jQuery library: Enable this parameter only if you experience javascript conflicts on the page. It is disabled by default.

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 Basic settings.

Load Font Awesome: If your template uses the Font Awesome library you can safely disable this parameter.

Configuration

The module does not create links for the items. The extension will only use the existing links that are found in your website. Therefore, if the links in the extension are not correct, this means that you have not properly configured your menu items.

You must create a menu item for each one of the items categories. For example, if the extension displays Joomla articles, you must create a menu item for each Joomla category. If the extension displays K2 items, you must create a menu item for each one of the K2 categories, etc.

Disclaimer

Your website page must be completely javascript error-free before you enable our extensions. None of our extensions will work on a page with javascript errors. We don't offer support if your page has existing javascript errors. An existing javascript error is an error that existed before enabling any of our extensions. You must first fix all existing javascript errors before asking for support.

How do I know if my website has existing javascript errors?

Do the following to see if your website has existing javascript errors:

  1. Unpublish all Minitek extensions.

  2. Disable cache in your website and then purge all the cached pages.

  3. Open your website with Chrome Web Browser.

  4. Go to the page in question (all Minitek extensions must be disabled).

  5. Hit F12 on the keyboard. The DevTools window will open at the bottom of the browser window.

  6. When the DevTools window opens, click on the tab 'Console'.

  7. Now hit F5 so that the browser reloads the page.

  8. If everything is normal and there are no javascript errors present, you will not see any error messages in the console window.

  9. If there are javascript errors in your page, you will see those errors in the console window:

What to do now?

Unfortunately there is not much we can do to help you if your page has existing javascript errors caused by 3rd party extensions or templates. You must fix all the errors before enabling our extensions. If you still have problems with the layout after you have fixed all existing javascript errors, please open a ticket and we'll look into it.

View Changelog

This website uses cookies so that we can provide you with the best user experience. By clicking "continue" you agree to cookies being used in accordance with our Cookies Policy.

Search