Archive for November, 2011

Stylish Image Wall module can show images, logos or sponsors in an interactive grid. You can upload images along with the heading, description and the link URL.

Instead of showing images, logos or sponsors in a simple grid, this module will show them in an interactive grid. Once mouse is moved over an image in the grid, image view will be flipped using different styles and description view will be shown.

This module relies on CSS3 – full transition & rotation effects can only be seen on modern browsers with CSS 3 support.

This blog post will describe the simple steps on how to use Stylish Image Wall module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded Stylish Image Wall, 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 this module (DZ_StylishImageWall) 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 “Stylish Image Wall Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Randomize Items Select this check-box, if you want a random image order on each page load.
Logos Area Width Specify the width for the logos area
Dimensions Specify the width and height of the grid items
Alignment Choose the alignment for the grid in the container

Step-4: Manage Images

Now you are ready to add images to the slider. 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, background color for hover effect and the URL. See following screens for reference.

Manage Items

Manage Items

Add Grid Item

Add Grid Image

Step-5: Stylish Image Wall View

You are all set – now you can go back to the page where you added the module and now you can see the Stylish Image Wall in action.

Stylish Image Wall

Stylish Image Wall


Read Full Post »