You want to show category wise portfolio items on your DNN portal, this module is the solution. Filterable Portfolio Grid module can show portfolio items in the form of filterable and interactive grid. You can upload images along with caption, link and tags for each of the portfolio item.
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. This module will help you to show the filterable portfolio items in a little more interesting and interactive way.
Filterable Portfolio Grid module can show portfolio items in the form of filterable and interactive grid. You can upload images along with caption, link and tags for each of the portfolio item.
This module is built using HTML, CSS and Java-script only. No Flash is used.
This blog post will describe the simple steps on how to use DNN Filterable Portfolio Grid module in DotNetNuke portals.
Step-1: Install DNN Filterable Portfolio Grid
Once you have downloaded DNN Portfolio Grid, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:
- How to Install a Module in DotNetNuke 5
- Forum: How to Install a Module in DotNetNuke 5
- Video: Installing DotNetNuke Modules
Step-2: Add DNN Filterable Portfolio Grid to a Page
Once the module is installed, it will be available in the Module drop-down. You can add DNN Filterable Portfolio Grid (DNN_FilterablePortfolioGrid) to your desired pane.
Add DNN Filterable Portfolio Grid to a Page
Step-3: DNN Filterable Portfolio Grid Settings
After adding the Filterable Portfolio Grid, you can go to module settings page and scroll to bottom section “DNN_FilterablePortfolioGrid Settings”. This section contains settings specific to this module. See following screen for setting details.
Module Settings
Following table describes the available settings.
| Setting | Description |
|---|---|
| Image Dimension | Specify the width and height for each of the portfolio image. |
| Randomize Images | Select this check-box, if you want a random item order on each page load. |
| Show Tag Icon | Select this check-box, if you want to show a tag icon with the tag list on module view page. |
| Include jQuery | Select this check-box, if you your portal does not already have jQuery. |
Step-4: Manage Portfolio Items
Now you are ready to add portfolio items to this interactive grid. You can click the “Add Content (Pencil Icon)” link on the newly added module. This will show you listing of the portfolio items, you can upload images and can specify order of display for items in this section. See following screens for reference.
Portfolio Items Listing
Add Portfolio Items
Step-5: Manage Tags
You can define tags that can be linked to each of the portfolio items. The same tags will be used to show filter items.
Manage Tags
Step-6: DNN Filterable Portfolio Grid View
You are all set – now you can go back to the page where you added the module and now you can see the interactive filterable grid in action.
Filterable Portfolio Grid
Possible Issues and Quick Resolution:
Grid not working:
Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.
DnnZone 
Leave a Reply