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.