Responsive Grid for Jomsocial

Responsive Grid for Jomsocial is a powerful module that provides beautiful animated filtering and sorting of Jomsocial content.

The module is great for displaying Users, Groups, Events, Photos, Albums or Videos. 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 Jomsocial

  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 Jomsocial
  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

Data Source

Under the tab Data Source you have the option to select one of the following content types:

  1. Users
  2. Groups
  3. Events
  4. Photos
  5. Albums
  6. Videos

You can limit the number of total items in the field Items count. Default is 8.

Users:

In the field Specific Users you can enter the id's of the users that you want to display, separated by commas. If you leave the field empty then all users will be selected.

In the field Exclude Users you can enter the id's of the users that you want to exclude, separated by commas. If you have defined Specific Users in the above field, this field will be ignored.

You can also select to exclude Users without avatar, show or hide Featured Users and Respect Users Permissions.

Finally you can change the ordering in the field Users Ordering.

Configuration

Groups:

In the field Groups categories you can select to display groups only from the specified groups categories. If left empty all categories will be selected.

In the field Specific Groups you can enter the id's of the extra groups that you want to include, separated by commas.

In the field Exclude Groups you can enter the id's of the groups that you want to exclude, separated by commas. If you have defined Specific Groups in the above field, this field will be ignored.

You can also select to exclude Groups without avatar, show or hide Featured Groups and hide Private Groups.

Finally you can change the ordering in the field Groups Ordering.

Configuration

Events:

In the field Events categories you can select to display events only from the specified events categories. If left empty all categories will be selected.

In the field Specific Events you can enter the id's of the extra events that you want to include, separated by commas.

In the field Exclude Events you can enter the id's of the events that you want to exclude, separated by commas. If you have defined Specific Events in the above field, this field will be ignored.

You can also select to exclude Events without avatar, show or hide Featured Events and hide Private Events.

Finally you can change the ordering in the field Events Ordering.

Configuration

Photos:

In the field Photos albums you can select to display photos only from the specified albums. If left empty all albums will be selected.

In the field Specific Photos you can enter the id's of the extra photos that you want to include, separated by commas.

In the field Exclude Photos you can enter the id's of the photos that you want to exclude, separated by commas. If you have defined Specific Photos in the above field, this field will be ignored.

You can also select to exclude photos from Cover albums, show or hide Featured Photos and select to Respect Photos Permissions.

Finally you can change the ordering in the field Photos Ordering.

Configuration

Albums:

In the field Specific albums you can select to display only the specified albums. If left empty all albums will be selected.

In the field Exclude albums you can enter the id's of the albums that you want to exclude, separated by commas. If you have defined Specific albums in the above field, this field will be ignored.

You can also select to exclude Cover albums, show or hide Featured Albums and select to Respect Albums Permissions.

Finally you can change the ordering in the field Albums Ordering.

Configuration

Videos:

In the field Videos categories you can select to display videos only from the specified videos categories. If left empty all categories will be selected.

In the field Specific videos you can enter the id's of the extra videos that you want to include, separated by commas.

In the field Exclude videos you can enter the id's of the videos that you want to exclude, separated by commas. If you have defined Specific videos in the above field, this field will be ignored.

You can also select to show or hide Featured videos and Respect videos permissions.

Finally you can change the ordering in the field Videos Ordering.

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.

Crop images: If enabled, the images will be cropped the dimensions below. The images will be cropped starting from the center of the image.

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 root/images/regridjs/.

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 (available for Groups, Events, Photos and Videos).

Location filter type: Location filters can be displayed in a dropdown list or as inline buttons (available for Users, Events).

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.

Hits sorting button: Displays a button that sorts items by hits.

Count sorting button: Displays a button that sorts items by count (available for Users, Groups and Events).

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
Frequently Asked Questions
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