Portfolio Grid module can show portfolio items, images, logos or sponsors in an interactive grid. You can upload images along with the title, client and the link URL.
This module will show an interactive grid for your items. In default view, images will be shown using the opacity factor set in module settings. On moving mouse over an item, the image will be made brighten and item text info will be displayed.
This blog post will describe the simple steps on how to use DNN Portfolio Grid module in DotNetNuke portals.
Step-1: Install Module
Once you have downloaded 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:
Step-2: Add Module to a Page
Once the module is installed, it will be available in the Module drop-down. You can add Portfolio Grid (DZ_PortfolioGrid) to your desired pane.
Add Module to a Page
Step-3: Module Settings
After adding the module, you can go to module settings page and scroll to bottom section “Portfolio Grid 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 |
|---|---|
| Grid Width | Specify the width for the grid |
| Grid Item Spacing | Specify the spacing between grid items |
| Image Opacity | Specify the image opacity for default view |
| Image Dimension | Specify the width and height for the grid items. |
| Randomize Images | Select this check-box, if you want a random image order on each page load. |
| Border Thickness | Specify the image border for hover view |
| Border Color | Choose the color of the image border for hover view |
| Hover Background Color | Choose the color of the image background for hover view |
| Title Text Color | Choose the color for the item title text |
| Client Text Color | Choose the color for the item client text |
| Container HTML | You can write your custom HTML. It can serve as wrapper around the grid. Use [DNN_PORTFOLIO_GRID] in a place where you want to show the actual grid. |
| Include jQuery | Select this check-box, if jQuery is not already available in the portal |
| Resolve jQuery Conflict | Select this check-box, if you are also using other java-script frameworks. |
Step-4: Manage Grid Items
Now you are ready to add items to your grid. You can click the “Manage Items (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify title, client, link and order of display for items in this section. See following screens for reference.
Manage Grid Items
Add Grid Item
Step-5: 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 Portfolio Grid in action.
Portfolio Grid Default View
Portfolio Grid Hover View
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.
Conflict with other java-script frame-works:
This module relies on jQuery, if your portal is also using other java-script frameworks (like moo-tools or prototype etc.), you should select the check box “Resolve Conflict” in module settings.
On DNN 04.xx.xx, please always select the “Resolve Conflict” settings.
