Introduction

The “Random Rounded Image” module enables you to define a set of images so that each time a user visits your website a different image is displayed.

You can set the desired number of images, as well as image height, width; insert a hyperlink to a desired page on your website or external website, etc.

Each of the available tasks is described in appropriate sections of this document.

Note: this manual assumes prior experience with DotNetNuke application. For further information about DotNetNuke, please consult the DotNetNuke manual.

Copyright © 2006 Data Springs Inc. All rights reserved.


Installation Procedure

Included in your download are either one (If you only purchased the PA) or two (If you purchased the PA and Source Code) zip files. One zip file is the source code to the application, and the other zip file is the module which you can upload to your site.

When you extract the files, you will notice that it extracts two zip files (note: only one if you just purchased the PA).

  • DataSprings_RandomRoundedImage_Module.zip - file for installing “Random Rounded Image” with your DNN

  • DataSprings_RandomRoundedImage_Source.zip - source zip file you can use in order to make any changes to the application (note: meant for advanced users)

In order to install your “Random Rounded Image” module, login with an account to your DNN site as a host or administrator account. Once logged in, Navigate to the Admin or Host menu item, and click on the “Module Definitions”.

Figure 1: Installation procedure (step 1/7)

The following screen will be displayed.

Figure 2: Installation procedure (step 2/7)

Click on the “Upload New Module” to continue installing “Random Rounded Image” and the following screen will be displayed.

Figure 3: Installation procedure (step 3/7)

Click on the “Browse” button and the dialog window for locating the installation file “DataSprings_RandomRoundedImage_Module.zip” will be displayed.

Figure 4: Installation procedure (step 4/7)

Locate the “DataSprings_RandomRoundedImage_Module.zip” and click on the “Open” button. The following screen will be displayed.

Figure 5: Installation procedure (step 5/7)

Click on the “Add” link inside this screen in order to add the module and it will be added to the list.

Figure 6: Installation (step 6/7)

Select the “DataSprings_RandomRoundedImage_Module.zip” file and click on the “Upload New File” link. The installation will begin and in couple of moments the screen informing you on successful completion will be displayed.

Figure 7: Installation procedure (step 7/7)

Note: please keep track of any errors that appear during the installation. These errors can be helpful if your module has problems.


Adding Random Rounded Image module to a page

In order to add “Random Rounded Image” module to a desired page follow these steps:

1. Select the “Add New Module” radio button

  2. Choose “Random Rounded Image” from the “Module” pull down menu

  3. Click on the “Add” link (or the arrow icon [image]).

Figure 8: Adding a module to a page

The “Random Rounded Image” module will be added to the page. Click on the arrow next to the title of the module in order to open the main menu.

Figure 9: Opening the module main menu

Note: see section Random Rounded Image Main Menu for further information on main menu options.


Random Rounded Image Main Menu

This section of the document will give the definition of the “Random Rounded Image” main menu options. In order to start using the main menu, click on the arrow next to the title “Random Rounded Image”.

Figure 10: Opening the main menu

The following options are available inside this screen:

  • Edit Settings – option for managing “Random Rounded Image” module (see section Editing Settings)

  • Help – option for accessing this manual

  • Online Help - option for accessing this manual

  • Print – option for printing the page

  • Delete – option for deleting a module (see section Deleting Random Rounded Image module)

  • Move – option for placing the module in the desired part of the page:

    • Move Down

    • Move Bottom

    • Move To LeftPane

    • Move To RightPane


Editing Settings

In order to start editing settings for “Random Rounded Image” module, choose option “Edit Settings” from the main menu.

Figure 11: Adding a new testimonial

The following screen will be displayed (note: screen presented with 2 screenshots).

Figure 12: Editing settings (screenshot 1/2)

The following parameters are available inside the first part of the screen:

  • Image

    • Link Type – choose the type of the link that will be associated to the image; i.e. where the user will go after clicking on the image

      • URL (A Link to an External Resource) – select this option if you want the user to visit an external link (website) after clicking on the image

      • File (A File On Your Site) - select this option if you want the user to download a file from your site after clicking on the image

    • File Location – pull down menu for choosing the location of the image file (image gallery)

    • File Name – pull down menu for choosing the desired image from the gallery

    • Add File – once you choose the image from the gallery, click on this link in order to add it to the “Random Rounded Image” module (see section Adding a new Image)

    • Upload New File – choose this option if you want to upload an image from your PC

  • Files – list of currently added files; when you add a new image it will be displayed here

  • Remove File – option for removing an image from the “Random Rounded Image” module (see section Uploading a File from your PC)

Figure 13: Editing settings (screenshot 1/2)

The following parameters are available inside the second part of the screen:

  • Display Rounded Corners – check this option if you want the image to have rounded corners (see Figure 17)

  • Navigation URL – options for defining the URL user will visit after clicking on the image

    • Link Type (A Link To An External Resource) – select this option if you want the user to visit an external link after clicking on the image

    • Page (A Page On Your Site) – select this option if you want the user to visit a page on your website after clicking on the image

    • Location (Enter The Address of the Link) – input field for entering the URL, the user will visit after clicking on the image (e.g. http://www.address.com)

    • Select An Existing URL – click on this button to select the URL and enable it

  • Alternate Text – input field for entering the text user will see when placing a mouse over the image (alt text)

  • Width – input field for setting the width of the image (note: required parameter)

  • Height - input field for setting the height of the image (note: required parameter)

  • Click to Preview – use this option to preview the module settings/images while in the edit mode (note: preview is useful for deciding about proper width/height of the image, etc.)

  • Update – button for saving the changes

After setting the desired parameters, click on the "Update” button and a new image will be added to the “Random Rounded Image” module.

Note:

  • Repeat this procedure to add a desired number of images that will be randomly displayed each time the user visits your website

  • At least two images should be added in order to have the proper effect


Adding a new Image

In order to add a new image to the “Random Rounded Image” module, choose option “Edit Settings” from the main menu.

Figure 14: Adding an image (step 1/3)

The screen for setting the image parameters will be displayed.

Figure 15: Adding an image (step 2/3)

Select the desired image from the “File Name” and click on the “Add File” link. The new image will be added to the “File” list.

Figure 16: Adding an image (step 3/3)

After clicking on the “Add File” and adding the image, set the rest of the parameters (note: see section Editing Settings for details on parameters) and click on the “Update” button.

This will complete the procedure of adding a new image. The following screenshots demonstrate images added to “Random Rounded Image” module (note: variants with and without rounded corners).

Figure 17: Example of the added image with rounded corners

Figure 18: Example of the added image without rounded corners


Uploading a File from your PC

In order to upload an image from your PC, choose option “Edit Settings” from the main menu. The screen for editing settings will be displayed.

Figure 19: Uploading an image from your PC (step 1/4)

Click on the “Upload New File” link and the page will be refreshed with further options for uploading the file.

Figure 20: Uploading an image from your PC (step 2/4)

Click on the “Browse” button and the dialog window for choosing the desired file from your PC will be displayed.

Figure 21: Uploading an image from your PC (step 3/4)

Choose the desired file and click on the “Open” button. The following screen will be displayed.

Figure 22: Uploading an image from your PC (step 4/4)

Click on the “Upload Selected File” and the page will be refreshed.

Note: “Select an existing file” is displayed if you have already chosen to upload a new file and maybe changed your mind and want to select from the list of files again.

Figure 23: Uploading an image from your PC (step 5/5)

Click on the “Add File” link to add the image to the “Random Rounded Module” and then click on the “Update” button in order to save the changes.


Removing an Image

In order to remove an image from “Random Rounded Image” module, choose option “Edit Settings” from the main menu. The screen for editing settings will be displayed.

Figure 24: Removing an image

Choose the image you want to remove from the “Files” menu and click on the “Remove File”. The chosen image will be removed from the “Random Rounded Image” module.


Deleting Random Rounded Image module

In order to delete “Random Rounded Image” module, choose option “Delete” from the main menu.

Figure 25: Deleting a module (step 1/2)

The dialog for confirming deletion of the module will be displayed.

Figure 26: Deleting a module (step 2/2)

Click on the “Ok” button and the module will be deleted.