Monthly Archives: May 2011

Loading Template Settings–Mushroom Image

image

Loading Templates

These templates are used for the loading effect in the website while the module loads content. This is only used while the module pulls down source content, and if the source is cached, you will not see the loading template effect.

Images

If you examine the source view of the loading template, you will notice that the effect references a .gif file. This file is a motion .gif and can be swapped out for any loading .gif image you like.

image

Display Template Setting–Mushroom Image

image

Display Templates

This is where you pick how your images will be shown on the page. The display templates define the end user look and feel.

There are several buttons that appear under the Display Templates Tab.

image

Load Template

Used to select a predefined or saved template. If you want a look like the Light Box effect, then you can click on the Light Box template from the available templates:

image

Then select the “Select” button.

This will cause the HTML and CSS for this template to be loaded into the “Display Template”

You can reveal the code for this by clicking the Source View from the HTML Editor.

image

You can edit or improve the source code to match the colours you use on your site.

When you are done editing, you select the Save Tab Changes, or Save & Return to save the template and return to the page.

If you play around and don’t wish to save, the Cancel & Return can be used to exit without saving your selection or changes.

Export Template

Allows a template to be packaged and saved as a .zip file. This file can the be used and imported on other sites using the Mushroom Image module.

This is perfect if you want to modify then export a template that you have customized for your own use.

The package includes a Thumbnail.png file that can be modified to reflect the look of your customized template. A Screen capture for example. Use the same dimensions as the example png file.

Naturally you can save a local copy of your favourite templates for used on sites that you create.

Import Template

Used to import templates that you have exported elsewhere. Selecting the Import, then locating your .zip package that you previously exported. Then uploading into the site for use.

Once imported, your template will become available across all portals on the site.

Save Template

If you modify a template and wish to save directly to the site for use as a custom template, then you can click the Save Template button.

We have included some icons to allow you to associate an eye catching icon with your custom version, or you can upload a screen capture to associated with the saved template.

image

Versions

To assist you in “Undoing a Mistake” we have enabled versions of the templates. This way you can play with a template, and if you make a change that is for the worse, you can easily revert to an earlier version.

image

Great Hey!

Basic Settings–Mushroom Image

Image Source

This is the source that the module will connect to to pull images from. You can use Flickr, RSS, or Local Folder.

Flickr – Will pull images directly from a Flickr Image Set e.g. http://www.flickr.com/photos/45764413@N00/sets/

RSS – Will pull the first image from each unique post in an RSS source. e.g. http://www.interactivewebs.com/blog/index.php/category/dnn-module/feed/

Local Folder – Will use images with a selected folder to display as images. This folder must be part of your DotNetNuke website.

Google Picasa – Will pull images from a Google Picasa source, using the images in the module.

Filter

You can define the image types to be used in the module. For example if you pointed the Image source at a local folder that had a mixture of image types in it, then the Filter can be used to only use one type “.jpg” for example.

Number of Images

Defines the number of images that will be used from a feed source. So for example if your RSS source includes a large number of items, you can limit it to show only the last x number.

Thumb Size

Defines the Pixel Size of the thumb nails to be used. It should be noted that not all templates will use the thumbnail size. For example the “Light Box Effect” does use the thumbnail size, while the “Shutter Effect” does not.

image_thumb[8] Thumbnails used

image_thumb[9] No Thumbnails used

In most cases, the thumbnail feature is only for templates that employ a popup effect.

Image Size

This is the size that the image will be displayed on the page. We have intentionally left this variable to allow you to adjust to fit the images you use. If you use the HTML5 Template for example, then the amount of white space around the displayed image is dependent on how closely the defined image size matched your original images.

Caching Length

To improve page load time, we wanted to ensure that the web server with your dotnetnuke site on it does not need to run off to your image source each time the page is hit and reload the images. If you imagine a slow RSS as the source, then this could cause the page load time to be considerable.

To fix this we allow the module to cache images locally on the server, there by improving page load time.

In this setting you can define the length of time before the web server will run off and update the feed. The time you define here should be reliant to the type of images you want to feed. If you feed op to the minute news images, and you set this to cache for a week, then visitors to your site will see images that are out of date.

On the other hand, if you expect the feed source not to change, then set a high value here to reduce server load time.

If you reboot the server or restart IIS, then the module will run off and update the source the first time the module is loaded.

Adding the Module –Mushroom Image

image

Getting your site ready for Mushroom Image

Once you have installed the Mushroom Image module, you will need to ensure your site is ready to host jQuery. DotNetNuke makes this easy, but there is one small change we recommend first.

1. Login as Host

2. Go to HOST SETTINGS and locate the jQuery settings:

image

3. Tick the option for “Use Hosted jQuery Version”

4. In the Hosted jQuery URL, type: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Background

DotNetNuke currently runs with jQuery version installed. That is to say that DNN have included some jQuery files that will sit on your web server and ensure that jQuery works on your site. The only problem is that at the time of writing this, the included jQuery version is not up to date enough to take advantage of some of the recent features of jQuery that Mushroom Image takes advantage of.

The Rotate Effect http://www.interactivewebs.com/mushroom-image/Demo/RotateEffect.aspx

uses a later version of jQuery than the one currently included in DNN that is 1.4.2.

Using the hosted jQuery option takes advantage of some open source Google hosted jQuery that is a later version than the 1.4.2. For our module, you currently need 1.4.3 or later.

Adding the module to a page

As with any DotNetNuke module, you need to add the module to the page before you can configure it.

Login to your DotNetNuke website as either a host or admin, and proceed to the module menu at the top of your website page.

image

Select “iwebs – MushroomImage” from the module list and “Add Module To Page”

Then look for the module in it’s configured state.

image

From the dropdown menu, select the Configure Module option:

image

To reveal this:

image

Installing the Module–Mushroom Image

DotNetNuke 5 refers to modules as extensions. There are two types of module extensions:

  1. Pre-installed Modules – modules included in DNN that have not been included in the build.
  2. Third Party Modules – modules built or bought and added to DNN to extend DNN’s core functionality.

We will look at third party installs only here.

Adding third Party Modules

  1. Log into your DNN instances using a Host account.

  2. From the HOST drop down menu select Module Definitions.

  3. On the Module Definitions page, select Install Module from the Module Definitions’ module options drop down.

  4. You will be taken to the Install Package wizard. Browse to the module package you would like to install. Of course, in this example I am installing Open Web Studio. After you have browsed, select Next.

  5. Information about the select module will display. Select Next.

    image

  6. If available, release note information will display. Select Next.

    image

  7. If License information exists for this module you will need to accept the terms of the license.

    image

  8. When the install process is finished you will see a list of actions taken. ‘EndJob Installation successful .’ will display at the bottom when complete.

    image

  9. There is a great video here that explains it:

New DotNetNuke Module–Mushroom Image

imageThis week we are releasing the first of our Integration module suite. The suite called Mushroom is designed to allow integration between WordPress, DotNetNuke, Social Media, and iPhone App.

The first module we are publically releasing is called “Mushroom Image” and is an image rotator style module that allows feeds from WordPress to run images directly into your DotNetNuke website.

Like our other recent module releases, we have designed the backend for easy and fast configuration using JS as the basis of the User Interface.

Templates

With all our recent dnn modules, we have used a template CSS / HTML system to allow the end users interface to be customized.

Here are some examples of the UI:

image

image

image

image

image

image

image

While we are still working on the website to support the sale of the module, you can see some of the demo templates on display here:

http://www.interactivewebs.com/mushroom-image/Demo/LightBoxEffect.aspx

image

http://www.interactivewebs.com/mushroom-image/Demo/ShutterEffect.aspx

image

http://www.interactivewebs.com/mushroom-image/Demo/RotateEffect.aspx

image

http://www.interactivewebs.com/mushroom-image/Demo/HTML5Effect.aspx

image

http://www.interactivewebs.com/mushroom-image/Demo/LightHeadsEffect.aspx

image

There is more to come, so stay tuned.

Changing the Look and Feel

Main Menu
1. From the module Main Menu, select MODIFY LOOK AND FEEL

2. Use the Text HTML editor to Modify the Introduction text that appears at the top of the public side of the Feedback module. This is uses standard DNN Text HTML editing.

Form Item Layout Text/HTML

3. Here you will find the html code that lays out the form items in the public view. Using the HTML editor, select HTML view mode, and edit the HTML code directly to get the best results.

The most common change it to edit the width of the table that displays all the form items to the public.


To make the form wide and prevent items from spanning two lines. Modify the HTML code in the top line: " ". Change the 250 to something wider like 500

Remember though that your web page, width of the site and container will effect this.

Message Sent HTML

4. This text HTML box can be edited to display a message to the user of your form. When a usre submits a form, the text here will be displayed in the module space.

Form Item Height Width

5. Enter the width that the form Item in this box.

Example.

Gives this result

And a width of 100 gives this result. Note the small width of each item.

Changing the email address the form is sent to

From the module menu (see the above help selection for installing the module to a page).

1. Select MODIFY EMAIL SETTINGS

2. Select CLICK HERE TO MODIFY THE SEND TO EMAIL ADDRESS

3. Select EDIT (just after the arrows) to edit the email address and name of the form.

4. Change the form name and email address as desired. Click UPDATE when done.

5. Select BACK TO FORM ITEMS

6. Select BACK TO MAIN MENU

Adding a Feedback Designer module to the page

Having installed the Module to your DNN site.

1. Login to your site with Host or Admin permissions.

2. Navigate to the page you wish to add a form to.

3. From the DNN module menu select FEEDBACK DESIGNER and the Pane Location.

4. Select ADD to add the module to the seelcted pane.

5. You will see a warning message advising that the module has yet to be configured. This message will only be seen one time.

6. From the Complete Feedback Designer menu on the module, select CONFIGURE MODULE.

7. You are now presented with the Module Menu. From her select the options you wish to edit by clicking the corresponding CLICK HERE.

A Common SMTP Error in DotNetNuke

We get help requests, and we really do love to help you! Really! but please make sure you have a DNN host SMTP server configured that works before you ask us for help!
This module requires the SMTP server settings to be configure in DNN. This is because it uses the DNN SMTP server settings to send email. To configure…

1) Login as host user
2) Under "Host" menu select "Host Settings"
3) Scroll down and expand "Advanced Settings"
4) Expand "SMTP Server Settings"
5) In the SMTP Server text box type in mail.your_domain.com where your_domain.com is the actual domain name of your site (this same exact host name for smtp, pop3, imap4, and web mail)

You can use authentication for the SMTP server if required. The DNN site will require Relay permissions that are often set to require authentication.

An example of the error you see when you do not have this configured correctly is.

Error: Email Enquiry is currently unavailable.
DotNetNuke.Services.Exceptions.ModuleLoadException: Object reference not set to an instance of an object. —> System.NullReferenceException: Object reference not set to an instance of an object. at DotNetNuke.Services.Mail.Mail.SendMail(String MailFrom, String MailTo, String Cc, String Bcc, MailPriority Priority, String Subject, MailFormat BodyFormat, Encoding BodyEncoding, String Body, String Attachment, String SMTPServer, String SMTPAuthentication, String SMTPUsername, String SMTPPassword, Boolean SMTPEnableSSL) at DotNetNuke.Services.Mail.Mail.SendMail(String MailFrom, String MailTo, String Cc, String Bcc, MailPriority Priority, String Subject, MailFormat BodyFormat, Encoding BodyEncoding, String Body, String Attachment, String SMTPServer, String SMTPAuthentication, String SMTPUsername, String SMTPPassword) at iwebs.Modules.CFD.CFD.doSend() — End of inner exception stack trace —

We have created a movie file here to assist: http://demo.interactivewebs.com.au/dnn_smtpsetup/dnn_smtpsetup_demo.htm

1 2 3