Grid Portfolios Module


Portfolio grid is a powerful module with jQuery plugin that provides beautiful animated filtering, custom captions. It plays nice with CSS, making it a great choice for dynamic and responsive layouts.

This module is auto generated a .html file for each item Or you can link to URL link or load from .html file .It is easy for custom CSS. Allow to show or hide the filter



How to install

1. Download and extract file from trial or pruchase module DNNStore. There are two install files one for DNN 7 version and one for DNN 8 and 9 version. Choosing the correct version your DNN website.

2. Login to website with administrator account. Go to Settings -> Extensions. Then choose the correct version for your DNN website.

Install extension

3. Then choose the correct version for your DNN website.

Choose correct DNN version

Click Next, and it goes to module information.

Module information

Click Next ... the install show completed.

Installation successfull

3. To add module to page. Click icon "Add module" as the image below.

Add module to page

An dialog will show. Search module and drag and drop module to pane that you want to

Add module to page

When the module added to page. Drag mouse to pencil icon, it will show three options: Manage gallery, Manage category, Manage Module settings

Module options

Manage Module Settings

1. To Manage module settings drag mouse to pencil icon and click on the link "Module Settings". It is redirect to module settings page. There are many options list image below

Manage module settings

2. Options list

Name Values Default Description
Animation type Fade Out, Quick Sand, Bounce Left, Bounce Top, Bounce Bottom, Move Left, Slide Left, Fade Out Top, Sequentially, Skew, Slide Delay, 3D, Rotate Sides, Flip Out Delay, Flip Out, Unfold, Fold Left, Scale Down, Scale Sides, Front Row, Flip Bottom, Rotate Room. Rotate Sides Defines which animation to use for items
Grid adjustment Default, AlignCenter, Responsive Responsive Adjust the layout grid.
Gap Horiziontal 10,11,12,20, ... 1000 10 Horizontal gap among items
Gap Vertical 10,11,12,20, ... 1000 10 Vertical gap among items
Caption Animation Push Top, Push Down, Reveal Bottom, Reveal Top, Move Right, Overlay Bottom Push, Overlay Bottom, Overlay Bottom Reveal, Overlay Bottom Along, Overlay Right Along, Minimal, Fade In, Zoom, Opacity Zoom Caption - the overlay shown when you put the mouse over an item.
Display type Default, Fade In, Lazy Loading, Fade In To Top, Sequentially, Bottom To Top Lazy Loading The plugin will display his content based on the following values.
Display type speed 400,500,600,601.... 10000 400 Defines the speed of displaying the items
Hide category Cheched or Uncheck Uncheck Show or Hide category
Media queries Width[1366,800,600,300] = Items[5,4,3,1] Width[1116,800,500,300] = Items[5,4,2,1] Media queries ( set item for seperate screen)
Filter Align Left, Right, Center Left Set Align for category
Caption Align Left, Center Left Select caption align
Single Page Inline Position Top, Bottom, Above, Below Bottom The possition of page when item clicked on
Show category on grid Cheched or Uncheck Uncheck Show or hide category on grid
Show name on grid Cheched or Uncheck Uncheck Show or Hide name on grid
Category Order Field Order by Category Name, Category Position Category Position Set order for Category
Category Order Type ASC, DESC DESC Set order type for category
Image Order Field Order by Lightbox Name, Image Position Image Position Set order for Image
Image Order Type ASC, DESC DESC Set order type for Image
Change text All All, Alless,..... All Change text "All" when image popup
Change text Off Off, Offess,..... of Change text "Off" when image popup
Image thumb width 400,450,... 400 Image thumbnail width to resize when uploaded
Image thumb height 300,350,... 400 Image thumbnail height to resize when uploaded
Load original size Checked and uncheck Uncheck Load originail image size
Link target Blank, Self Blank Using when iten has external link

Manage Category

To Manage category drag mouse to pencil icon and click on the link "Manage Category". Then it goes to manage category page as the image below

In the form, you can add new, edit, update, move up, move down category

Manage category

Manage Portfolios

To Manage Portfolios drag mouse to pencil icon and click on the link "Manage Portfolios".

You can manage image on this form. In this form, you can upload, update, deleted selected items. You can manage item properties on each row.

Manage Portfolios

Some of screen shoot

Portfolios Grid Module

Portfolios Grid Module

Portfolios Grid Module

Portfolios Grid Module


Standard license The standard license allows the activation and use on 1 DNN portal. Not permitted Redistribution. Free update within 90 days
Enterprise license Unlimited DotNetNuke® Installation. Not permitted Redistribution. Free update


If you have any questions that are beyond the scope of this documentation file, please feel free to email via my email

Created by CoolDNN