Minitek Responsive Grid

Minitek Responsive Grid is a powerful module that provides beautiful animated filtering and sorting of Wordpress posts.

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 Minitek Responsive Grid

  1. Login to Wordpress admin dashboard
  2. Navigate to the Wordpress Plugin Installer and click on "Add New"
    Installation
  3. Click on "Upload Plugin", select the plugin zip file and then click on "Install Now"
    Installation
  4. Navigate to Plugins and activate the plugin Minitek Responsive Grid

The plugin must be authenticated before you can update it. To authenticate and update Minitek Responsive Grid:

  1. Navigate to Minitek Responsive Grid > Settings.
  2. Enter your Download ID in the respective field. You can find your Download ID in the Minitek Dashboard.
  3. That's it! The plugin will now notify you whenever there is a new version released. Please note that you will be able to receive updates only for the duration of your subscription at Minitek.gr.

Shortcode

You can display the plugin anywhere in your website by using this shortcode in a page, post or widget:

[mrg id="responsive_grid_id"]

where responsive_grid_id is the id of a specific Responsive Grid instance.

You can also use the code:

<?php echo do_shortcode("[mrg id='responsive_grid_id']"); ?>

directly inside a php file.

General settings

Grid class: An optional class to be applied to the grid container. You can use this class to add your own custom css to a specific grid.

Layout mode: The grid has 2 possible layouts, Grid and List. With this option you can define which layout will be applied on page load.

Layout toggle buttons: These buttons toggle between the 2 layout modes. The Minimal buttons will only show the icons whereas the Full buttons will show the icons and the layout names.

Load FontAwesome: Loads the necessary icons. If your template uses the FontAwesome library you can safely disable this option.

Configuration

Data Source

The plugin has 2 data source modes: Dynamic source and Specific items. In the Dynamic source mode, the plugin will always show the latest items from the selected Categories, Tags and Authors. In the Specific items mode, the plugin will always show the specified posts.

Configuration

Dynamic source - Categories

Category filtering type: Select whether you want to include or exclude posts from the selected categories.

Categories: Include or exclude posts from the selected categories.

Include children: Select whether to include children categories of the selected categories.

Dynamic source - Tags

Tag filtering type: Select whether you want to include or exclude posts from the selected tags.

Tags: Include or exclude posts from the selected tags.

Dynamic source - Authors

Author filtering type: Select whether you want to include or exclude posts from the selected tags.

Authors: Include or exclude posts from the selected tags.

Configuration

Dynamic source - General

Exclude posts: You can exclude specific posts from the grid by entering the posts id's separated by commas.

Offset: (integer) Number of posts to displace or pass over. This means that the first x posts will be skipped and not shown in the grid.

Keywords: The plugin will only show posts that match these keywords. You must separate multiple keywords with spaces. Prepending a keyword with a hyphen (eg. -lorem) will exclude posts matching that keyword.

Ordering: Orders posts in the grid by selected value.

Ordering direction: Ascending or descending.

Configuration

Specific items

Post IDs: Only the selected posts will be displayed in the grid. Enter the Ids of the posts separated by commas.

Ordering: Orders posts in the grid by selected value.

Ordering direction: Ascending or descending.

Configuration

Pagination

Pagination type: Select whether you want to enable the Load more button that dynamically loads more items in the grid.

Initial items: The amount of items that will be initially loaded in the grid on page load.

Items per page: The amount of items that will be loaded in the grid on each additional page (each time the Load more button is clicked).

Additional pages: The number of additional pages to load after the initial items. Enter -1 if you don't want to limit the number of pages.

Show remaining items: Select whether you want to show the number of remaining items inside the Load more button.

Keep filters active: Maintains filters active when loading more items in the grid. However, this may result in empty pages if the new page does not contain items that are linked to the active filters.

Configuration

Image settings

Show images: Select whether you want to show the items images. Note that you can't disable the images if you have selected the Fancy theme in General settings.

Image type:

  • Featured image: The Featured image of the post. If not found, the inline image will be used instead.
  • Inline image: The first image found inside the post content.

Crop images: If enabled, the plugin will crop the images to the specified dimensions. If disabled, the original images will be used and they will be resized to fit the grid. Aspect ratio of original images will be preserved.

Image width: If image cropping is enabled, the images will be cropped to this width, in pixels.

Image height: If image cropping is enabled, the images will be cropped to this height, in pixels.

List view image width: The images width for the List layout.

Fallback image: An absolute url of the image to be displayed if there is no Featured or Inline image. This parameter is required if you have selected the Fancy theme in General settings.

  The plugin stores the cropped images inside the folder wp-content/plugins/minitek-responsive-grid/public/images/.

Configuration

Item Settings

Show detail box: Select whether to show the box that contains all post data (title, introtext, date, categories, tags, comments count). if disabled, all post data will be hidden.

Show title: Select whether to show the post title.

Title limit: Word limit for title.

Show introtext: Select whether to show the post text.

Introtext limit: Word limit for introtext.

Strip introtext html: Select whether to strip all html from post content and keep only plain text. Warning: If you disable this option and the html inside the post content is not valid, the plugin will not work properly and the grid functionality will break. Also, if this option is disabled, the introtext limit will not work.

Show date: Select whether to show the post publication date.

Date format: See instructions on Formatting Date and Time.

Show author: Select whether to show the post author.

Show category: Select whether to show the post categories.

Show tags: Select whether to show the post tags.

Comments count: Select whether to show the post comments count.

Configuration

Show hover box: Select whether to show the hover box that appears when you hover over the post image.

Show hover title: Select whether to show the post title inside the hover box.

Hover title limit: Word limit for post title inside the hover box.

Show hover link icon: Select whether to show a link icon inside the hover box. Clicking on the link icon will redirect you to the post page.

Show hover zoom icon: Select whether to show a zoom icon inside the hover box. Clicking on the zoom icon will open the post image in a modal window.

Configuration

Item border: Select whether to apply a border around each item in the grid.

Border size: Size of border, in pixels.

Border color: Border color.

Border radius: Radius that will be applied to the item's 4 edges (round edges), in pixels.

Configuration

Effects

Enable animations: Enable or disable animations. If disabled, all operations will happen instantly and synchronously.

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.

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.

Configuration

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.

Configuration

Filters

Category filters: Category filters can be displayed in a dropdown list or as inline buttons.

Tag filters: Tag filters can be displayed in a dropdown list or as inline buttons.

Reset button: This button resets the grid filtering to its original state.

Sortings

Title sorting: Displays buttons that sort items by title.

Date sorting: Displays buttons that sort items by date.

Author sorting: Displays buttons that sort items by author.

Comments count sorting: Displays buttons that sort items by comments count.

Configuration

Responsive levels

  With the parameters of this section you can configure the number of visible columns per screen size.

L: Items per row (columns) for Large screens (large desktop).

L size: Size limit for Large screens (in pixels). Under this limit, the M columns will be applied.

M: Items per row (columns) for Medium screens (medium desktop).

M size: Size limit for Medium screens (in pixels). Under this limit, the S columns will be applied.

S: Items per row for (columns) Small screens (tablet).

S size: Size limit for Small screens (in pixels). Under this limit, the XS columns will be applied.

XS: Items per row (columns) for Extra Small screens (small tablet/landscape phone).

XS size: Size limit for Extra Small screens (in pixels). Under this limit, the XXS columns will be applied.

XXS: Items per row (columns) for Extra Extra Small screens.

Configuration
  • Changed: Item introtext now retrieves the part of the content before the <!-- read more --> tag.
  • Minitek Responsive Grid is released.

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