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 blank area for each thumbnail. If you do not care about distortion of the thumbnail and want to fill the blank area any way he can use <div class="iwebs-pic " style="background: url(‘$item.thumbnail’) no-repeat scroll 50%… 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 simplify the process.

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 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… Read More »Display Template Setting–Mushroom Image