Mushroom Image Support

DNN Image Module Template Modifications

With our DotNetNuke Image Module, the module comes with several templates. It is possible to modify any of the templates and create images and looks to suite your needs. The original lightheads template that we use the following html for the thumbnail:      <div class="iwebs-pic " style="background: url(‘$item.image’) no-repeat scroll 50% 50% transparent;">      That means the raw image will be used as background image for the thumbnail rectangle. Since the background image will not be cropped or resized, you can only see part of the whole pic. I You can change the template <div class="iwebs-pic " style="background: url(‘$item.imageresize‘) no-repeat scroll 50% 50% transparent;"> However, in order to keep the proportion, there will be some… Read More »DNN Image Module Template Modifications

Description Field Templates for Picasa–Desc

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. 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… Read More »Description Field Templates for Picasa–Desc

Loading Template Settings–Mushroom 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.

Display Template Setting–Mushroom 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. 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: 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. You can edit or improve the source… Read More »Display Template Setting–Mushroom Image

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… Read More »Basic Settings–Mushroom Image

Adding the Module –Mushroom 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: 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… Read More »Adding the Module –Mushroom Image

Installing the Module–Mushroom Image

DotNetNuke 5 refers to modules as extensions. There are two types of module extensions: Pre-installed Modules – modules included in DNN that have not been included in the build. 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 Log into your DNN instances using a Host account. From the HOST drop down menu select Module Definitions. On the Module Definitions page, select Install Module from the Module Definitions’ module options drop down. You will be taken to the Install Package wizard. Browse to the module package you would like to install. Of course, in… Read More »Installing the Module–Mushroom Image