Description Field Templates for Picasa–Desc

image

Google Picasa has the ability to enter a description for an image. That description text is usually an explanation of what the image is about.

We have the ability to access this description text of images using the token: ${item.description} within the template.

To make this easy, we have added a second template to the templates within this module, using the same name but with “Desc” in the name.

image

Where The – Dec versions of the templates like the Light box-Desc will display the description text.

The templates remain editable as usual, to those of you who are skilled with HTML, CSS etc. We just thought it would be best to include these templates to simplify the process.

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