Ultra Media Gallery 9

(1)

Ultra Media Gallery 9

User Guide

(2)

Overview

What is Ultra Media Gallery?

Ultra Media Gallery (UMG) is a module/application designed to work on DotNetNuke 6.2+ websites. This documentation assumes that you have prior experience with the DotNetNuke. Visit

www.dotnetnuke.com if you do not know what DotNetNuke is.

Ultra Media Gallery is a complete, full-featured web image and media gallery management solution. With UMG, you can create photo galleries with 20+ customizable Flash and Html players. You can upload video, audio and flash movies from your own computer or even from internet. You can subscribe to Flickr, Google Picasa, or other image sources by RSS so you can use UMG's high quality interface to warp these images. UMG also allows you to sell digital products online so you can benefit from your website.

Why choose Ultra Media Gallery?

Powerful solution: UMG is an "all-in-one" gallery solution, offering many display options for various

business and personal uses. For example, you can configure UMG as a normal image viewer, a media library, an image rotator, social group gallery, and much more. The power built into UMG is much greater than similar products.

20+ media viewers: While other vendors distribute modules with only one player per module, you save

money by investing UMG because you get 20+ unique viewer interfaces built into one product. Most media viewers are developed by our self so they are not available anywhere in the market.

Carefully polished: "...they [Biz Modules] don't take short cuts for their convenience, they do the

difficult programming for you." (from Dwight B.)

Responsive support: "The other major reason I choose this product [UMG] is that the developer is very

active and responsive in supporting this product. This gives me confidence that any issues that arise in the future will be addressed quickly." (from Sean Lee)

Sample Galleries

Check www.bizmodules.net for sample galleries built by Ultra Media Gallery 9.

About this document

Ultra Media Gallery may be used to host images, videos, audios and flash movies, in this document we call them “media”, when we say “Upload a media”, you can actually upload an image or anything else.

(3)

What’s new

Below are major enhancements in UMG 9, for release notes of latest minor upgrades, please visit http://www.bizmodules.net/tabid/97/CategoryId/1/Default.aspx

1. Brand new user interface

The user interface of UMG 9 is fully re-designed to make it more integrated with DNN interface. 2. Responsive / fluid layout

Many UMG 9 presentations (viewers) support responsive layout, which allows you to build responsive media gallery that works on both desktop computers and mobile devices.

3. New upload page

The new media upload page adopts latest features of HTML 5, you can easily browse and choose multiple files to upload, or drag files to upload if supported by your browser.

4. New TileGrid presentation

The latest mobile-friendly TileGrid presentation offers a cool tile effect with deep social integration, it is now possible to see view history of a certain media.

5. Easy permission control

UMG 9 allows you to set album view permission very easily. You just need to choose Private, Public, Friends or Custom.

6. Slider collection

Slider Collection is a bundle of DotNetNuke slider and rotator modules, it is now available for all UMG 9.x users as a free extension.

7. Social group integration

UMG 9 automatically switch to social group integration mode when used in social group profile page, members of each group can manage their own albums and media.

8. Social digger

The new SocialDigger module can be used in user profile or social group profile, UMG is able to display albums and media of current user, or current social group.

9. Journal integration

When integrated with DNN Journal, UMG notifies journal when a new media is uploaded, if current user belongs to any social group, each group is notified.

10. Journal bridge

(4)

System requirements

Ultra Media Gallery 9 is designed to work in ALL DNN 6.2.0 and higher websites, including but not restricted to 6.2.x and 7.0.x.

If you are not able to upgrade your DNN due to some reasons, you can purchase Ultra Media Gallery 8 which works on all DNN 4.5+ websites.

Slider Collection, which is available as a free extension for UMG users, works in ALL DNN 4.5.0 and higher websites.

Ultra Media Gallery does not require any special permission on your server, it even works on websites run in "medium trust" on shared servers. Basically, as long as your DotNetNuke website is configured and working correctly, Ultra Media Gallery will work, too.

(5)

Installation guide

When upgrade from prior versions of UMG, you need to refer to Upgrade guide chapter at first.

You install UMG as you would any normal DNN module PA. In this chapter I will demonstrate how to do that on DNN 6. x.

At first, login to your website portal with Host permissions, find and click Host -> Extensions from the top menu:

Then click Intall Extension Wizard from the drop down menu of “Manage”:

In the popup window, choose the PA you downloaded from Bizmodules.net Downloads page, then press Next. Check “Repair Install” if prompted.

(6)

(7)

Un-installation guide

WARNING: Once you uninstall Ultra Media Gallery (UMG), all data entered into UMG is lost forever. There is no way to recover data deleted during the uninstall process. So it’s recommended to make a

reliable backup if you aren’t absolutely sure you do not need UMG data.

To safely uninstall Ultra Media Gallery from your website, logged in as a user with Host level permissions, navigate to Host – Extensions as you did in the installation process, find “Ultra Media Gallery” and all sub modules, click the delete button to uninstall it.

If you just want to reinstall UMG, simply uninstalling the main module, Ultra Media Gallery, is enough. Typical for all DotNetNuke (DNN) un-installations, there is no option for deleting folders and files created by a module in the file system. After un-installing UMG, you may leave these folders/files installed, or delete them manually, if you choose. To delete these folders/files, simply delete the UMG root folder in each portal where UMG was used. This folder will be:

$Portal Root/UltraPhotoGallery $Portal Root/UltraMediaGallery

... which you can delete by using an FTP client, or by using the DNN File Manager, found under the DNN Admin menu.

(8)

Upgrade guide

UMG 9 installation package allows you to upgrade from any previous version of UMG, even old 2.x version.

When upgrade from prior versions of UMG, you shouldn’t uninstall UMG before upgrading, this will cause to permanent lost of all of your data as discussed in Un-installation guide chapter. Simply install UMG 9 to overwrite your current version, check “Repair Install” if prompted.

If possible, make a backup before upgrade, both your database and website files.

Before doing an upgrade, you must upgrade your license first, e.g. upgrade from UMG 8.x to 9.x. After a successful upgrade, you will be required to re-activate UMG with your upgraded serial number.

When upgrade from UMG older than version 5.x, you might find all of your media are broken, because the old versions of UMG save media in a different path. To fix this problem, go to UMG’s Settings page or About page, manually change “ModuleSettings” or “About” to “UpgradeGuide” in your browser address bar.

(9)

Obtaining technical support

As a licensed user of a Biz Modules product, we offer you long-term technical support, for the life of the product, should you require technical support at any time.

Priority support is provided in the Biz Modules technical support forum. In the forum you can browse topics submitted by other users, or post a new topic if you find that your issue has not yet been discussed in the forum.

You can reach the support forum at: http://www.bizmodules.net/Forums/tabid/55/Default.aspx

For brief questions about Ultra Media Gallery and for all other matters regarding Biz Modules, email:

(10)

Getting started

To setup your fist gallery, add Ultra Media Gallery module to a DNN page. You will be prompted to choose a viewer for this gallery:

All 20+ viewers are grouped to 2 categories, if you wish to build a photo or media gallery, choose Image

& Media Gallery group, if you wish to build a image slider, choose Sliders & Rotators.

Use mouse wheel to scroll and find a viewer that best meet your requirements, click Choose to continue, if you are not sure, UMGClassicNG will be selected if you click Skip.

Each UMG module instance is called a gallery, each gallery may have unlimited media but UMG require media to be placed into Albums, so you will be prompted to create your first album before being able to upload:

(11)

Upload media

You will be navigated to the upload page once finished creation of first album, you also can click Upload in UMG’s top menu bar to enter the upload page:

The Select Files area is a tiny Flash application, you can click it to easily choose multiple files, if Flash plugin is not available on your computer, it automatically downgrade to traditional file upload control. In above screenshot you can see the drop section, for most users of modern browsers, you can use HTML 5 drag & drop feature to upload media. Visit this page to see which browsers support HTML 5 drag & drop:

http://www.w3schools.com/html/html5_draganddrop.asp

Import Media

If you wish to import media files that is already on your server directory, click Import from server

(12)

On this page you can select multiple files and import all of them to an existing album.

The Show UMG Folders option allows you to import media files from folders managed by other instances of UMG.

Add From Internet

Another link on upload media page is Add from internet, which brings you to a page like this:

When choose to add from Video or Audio URL, you should enter a video or audio URL with .mp4, .flv or .mp3 extension; when choose Youtube URL, you should enter a URL of Youtube video; when choose

Media Embed Code, you should enter the embed code offered by Youtube, DailyMotion or any other

(13)

Manage media

If you have add permission in a gallery, you can click My Work in top menu bar to manage media you added.

If you have manage permission in at least one album, you can click Mange to see all contents added to an album.

The My Work page and Manage page does not make great difference, below is a screenshot of Manage page:

You can adjust media sort orders by mouse drag & drop, but this feature is not available in My Work page.

On the right side you can see Actions column, the Basic Edit link allows you to quickly edit basic information of a media in Lightbox window:

(14)

There is a checkbox in Actions column, once you check it, some new buttons will appear in the bottom of the media list, which allows you to move media to top, transfer to another album, or unapproved them. To edit a media with full options, click Edit link in Actions column:

On above screenshot you can find fields to modify title, description and tags of a media, our tag picker allows you to easily add new tags or choose existing tags from auto completion list.

(15)

In the bottom of above screenshot, you can find links to delete or rotate current photo, or use current media thumbnail as album thumbnail.

Expand “Advanced” section on edit media page, you can see more fields to modify:

The Date Taken and Date Added field can be changed if you wish, to do that simply click on the date text.

Many digital cameras and smart phones record GPS coordinates of a photo when you take it, UMG is able to read this information and further use it. If GPS information is not presented, you can click the GPS field to manually choose it, which looks like this:

(16)

In this Lightbox window, you can manually add a marker, drag & drop the marker to make it accurate, and finally click “It was taken here” button to confirm this location. You can also use top search box to search a nearby place.

The Copy Coordinates link on edit media page might be a useful feature if most media of current album are taken in similar places, you just need to manually mark the GPS coordinates of 1st_{media, then you can}

click Copy Coordinates to apply this coordinates to other media of this album, please be aware the GPS data will not be applied to media that already have GPS information.

(17)

Manage albums

Users will be able to manage albums if they have one of 2 permissions: 1. DNN Edit Module permission

2. Belongs to Manage Roles, which is set in UMG’s Settings page:

(18)

In the bottom of Albums page, you can find links to add a normal album or RSS album, here is a screenshot of add normal album page:

The first field allows you to choose a parent album for current album. This feature is not available if you choose a slider presentation.

The Server Folder field dictates the folder of this album, in most case you do not need to change it, however, in certain circumstances you might need to change it, for example, you have a folder with many photos under your portal root folder, you wish to automatically synchronize these photos to UMG, in this case you can use this folder as Server Folder for this new created album, and enable Auto Sync in

(19)

UMG’s Settings page.

By default, the Auto Resize option is enabled. UMG automatically resizes uploaded files if the photo resolution exceeds the Max Resolution specified here. If you wish to allow for uploading larger, higher resolution photos, you may disable Auto Resize or set it to a larger value.

The Add Roles and Manage Roles option allows you to control which users can contribute and manage this album, refer to Permission set chapter for further details..

(20)

Permission set

Login as host or portal administrator, navigate to a UMG module, and choose Settings from module drop down menu to see the DNN module permission grid:

If you grant Edit Module permission to a DNN role, such as Managers, all members of Managers are granted full access to this UMG gallery, the UMG top menu bar will be fully displayed like this:

The Edit Module permission grants full access to a DNN role, however, in most cases you will use UMG’s own permission management feature.

(21)

If you grant manage permission to a DNN role, these users can access most part of UMG feature but not

Settings & About:

The last kind of permission is album-level permission, find an album to edit it, you will find Add Roles and Manage Roles option which dictates add permission and manage permission of this album:

(22)

Ultra Media Gallery 9 If Add permission is granted, these users can upload media and manage their own works like this:

If you set a DNN user as Album Owner rather than the original creator, the owner gets manage permission in this album.

Without above kinds of permissions, the top menu bar will not be displayed at all.

General speaking, permissions are set by DNN Roles, if you wish to set permission by directly entering user names, check User Permission in Settings page:

(23)

Subscribe to RSS

UMG allows you to create albums from a media RSS (MRSS) feed, which is an RSS extension designed by Yahoo!, for further information about media RSS, check wikipedia. Many websites are offering media RSS feed today, such as Flickr and Google Picasa.

Generally, a media RSS feed that UMG accepts must meet at least 2 requirements: 1, xmlns:media=http://search.yahoo.com/mrss/ can be seen in the RSS header.

2, The URL of the larger photo and thumbnail are published in the RSS by media:content and

media:thumbnail node.

Simply search the xml source of the RSS to see if you can find these keywords, if you can find then it will likely be accepted by UMG.

In UMG’s Albums page, click Add album from RSS, you will be navigated to this page:

Simply enter the RSS feed URL in this page and click Update, the album will be created and all images will be loaded if the URL passed validation.

UMG refresh RSS albums on a daily basis, if you want to change the refresh interval, make direct changes

to the value of AutoSyncInterval_Rss node in

(24)

Change colors and appearance

UMG 9 comes with 20+ presentations (viewers), each viewer allows to customize its colors and appearances in its own manner. Click Appearance in top menu bar to do this customization, below is a screenshot of the Appearance settings for UMGClassicNG presentation:

Each presentation has its unique appearance options, but many of them offers these 3 options:

1. Responsive Layout, this option allows you to make your gallery/slider responsive, please be aware a responsive gallery/slider must work together with a responsive skin.

2. Auto Play, toggle this option to enable auto play, then you will be able to set a pause time for each slide.

3. Sort Order, UMG sort media in specific criteria, which can be customized in Settings page, however, you can force the final viewer to display media in random order if you wish.

(25)

Publish your gallery

A UMG gallery can be used elsewhere in many ways, go to UMG’s Settings page and find this section:

The RSS Feed field allows you to display a RSS subscription link for this gallery on your website.

The Embed Code field allows you to embed this gallery to somewhere, such as a news article, a blog post, a DNN HTML module…

(26)

Upload from iPhone

UMG Uploader is the 1st_{iPhone app for DotNetNuke gallery products, if you have an iPhone with iOS}

4.1+, you can download it for free from Apple AppStore, all you have to do is searching with keyword “UMGUploader”.

Install UMGUploader and run it, you will be prompted to register your first UMG gallery:

(27)

You can register multiple galleries in UMG Uploader, click a gallery to open it, your DNN login credential will be validated before an album list is displayed like below screenshot:

(28)

Ultra Media Gallery 9 If you wish, you can enter title, description and tags for each photo before upload, then finally press

Upload button to proceed, your photos will be encoded and uploaded to UMG, once uploaded, it appears

(29)

Advanced topics

Sorting criteria

By default, UMG sorts media by Created Date | Descending Order, which means latest media always appear on top, however, if you would rather use another order, you may choose an alternate sorting order in UMG’s Settings page:

UMG allows you to sort photos by many methods: 1. File name

2. Digits in file name 3. Created date 4. Taken date

(30)

View permission control

In Permission set chapter we discussed UMG’s permission system, which concerns who can contribute to a gallery, besides, there is a dedicated View Permission option in UMG’s Settings page:

This option is turned off by default, which means as long as a user can view this gallery, he/she can see all contents of this gallery.

If you turn on this option, you can set view permission on each album so it is possible to let role A to see an album but not role B.

Turn on this option, then go to Albums page to see new view permission option:

As you can see in above screenshot, you can hover on Private - or anything else - to quickly configure the view permission of this album.

When set to Private, only album owner can see this album, when set to Public, all gallery visitors can see this album, when set to Friends, only friends of album owner can see this album, click Custom to set

(31)

customized view permission for this album:

With nested parent/child albums, if a user has view permission for a child album but not for a parent album, the he/she will still not be able to see the child album.

Please refer to Permission set chapter if you would like to set view permission by DNN user name rather than DNN security roles.

(32)

Attach a file to an image

You can attach a file as raw file to a media so that your visitors can download it or purchase it. In most case the raw file is the original file imported from your camera, but we do not limit the file type so actually you can upload anything as long as the file extension is supported in Host Settings > Advanced Settings > Other Settings > File Upload Extensions. For example, if you use UMG as a product catalog, you might wish to attach a product specification sheet to a media.

At first please enable these options in UMG’s Settings page:

The Allow Raw File option tells UMG raw files can be attached to media, the Keep Original option tells UMG to automatically attach the original file as raw file when UMG resize an image, if image resize does not happen due to some reasons, it will not be attached as raw file.

Many UMG presentations (viewers) allow you to download the raw file when watch a media, here is a screenshot of the download button in TagGroupedGrid presentation:

(33)

Sell digital products

UMG has a built-in PayPal payment gateway so you can sell your digital products with PayPal. Go to UMG’s Settings page, locate this section:

Here you can enter a positive value as price of raw files in this gallery, however, you might see this warning message when work with specific presentations:

This is because the purchase button is not available in all UMG presentations, to utilize this feature you must choose another presentation which supports purchase button.

Then you need to use UMG-ShoppingCart module together with Ultra Media Gallery module, find it from module list and add it to your gallery page.

(34)

Your visitors can purchase multiple items at same time, after payment they can download purchase items in Purchased tab of UMG-ShoppingCart module.

(35)

Work with disk quota

UMG allows you to limit the maximum number of media a user can upload. Go to UMG Settings screen, locate the Disk Quota option:

Select the maximum number of photos a user can upload, or select unlimited to disable it.

In default this limitation applies to all users, but you can remove this limitation for specific DNN roles, which can be configured in Disk Quota Waiver section.

(36)

Localization guide

UMG can be language localized like other DNN modules. To do so, simply add the appropriate locale resource file to App_LocalResource folder, for example. If you wish to localize UMG’s Upload page to German, make a copy of Upload.ascx.resx in \DesktopModules\UltraMediaGallery\App_LocalResources folder, rename it to Upload.ascx.de-DE.resx, then open it in a text editor, find all data node, and modify its value to German version.

For more information about language localization, please refer to the DotNetNuke manual which covers this topic in detail.

We still offer 3 Flash presentations in UMG 9, which have locale specific text strings inside the flash player that you may customize too. To language localize the Flash player, make a copy of

UMGProfessional.swf.xml and WidescreenShowroom.swf.xml in /DesktopModules/UltraMediaGallery/Swf_Resource folder, add locale names to the xml file name. For

example, if your locale is fr-FR, name it UMGProfessional.swf.fr-FR.xml. Open the XML with a text or XML editor, and you will see many key=value elements. Simply change the language values to the language of your choice, then Save your changes.

(37)

Upload media by FTP

The Auto Sync option in UMG’s Settings page allows you to upload media by FTP:

When auto sync is enabled, you can upload media to Server Folder of an album by FTP, UMG automatically add new-uploaded files to corresponding album.

(38)

DNN Journal integration

In UMG’s Settings page you can find an option to enable Journal integration.

When enabled, UMG notifies DNN Journal when a new media is uploaded, if current user belongs to one or more DNN Social Groups, each group will be notified.

By default, DNN Journal does not offer a link for images displayed in the journal list, however, you can use UMG-JournalBridge module on the same page of DNN Journal to dynamically attach the link, which point to corresponding media in your gallery.

(39)

Profile integration

In DNN Journal Integration chapter we discussed the possibility to notify DNN Journal when a new media is uploaded, moreover, our UMG-SocialDigger module allows you to display a complete list of media uploaded by current user or social group.

When use UMG-SocialDigger module in(or under) user profile page, it displays media uploaded by current user.

When use UMG-SocialDigger module in(or under) social group profile page, it displays media uploaded by all members of current group.

To see how it works, go to your user profile page, or a child page of user profile page, add UMG-SocialDigger module, you will be required to do some basic configuration:

You can choose Map, UMGClassicNG and TileGrid as the presentation of this gallery. As you can see in the warning area, this module retrieves data from galleries with DNN Journal Integration enabled.

Click Update to continue, you will see all media from galleries that enabled DNN Journal integration, it even respects the album structure of these galleries.

(40)

Social Group integration

When add UMG to your social group profile page, or a child page of your social group profile page, it automatically activates Social Group integration mode.

When work in this mode, albums/media uploaded in different group is distinguished, assume View

Permission is not enabled in a social group gallery, there are 3 kinds of situations:

1. You are the creator of this group, UMG gives you gallery manage permission which allows you to add new albums and manage existing albums.

2. You are the member of this group, UMG gives you add permission to upload new media. 3. You are not the member of this group, you can see albums/media of this group only.

When view permission is enabled however, group creators can control whether non-members can see an album, see below screenshot:

When choose Private, this album will be available to group members only, when choose Public, it will be available to all visitors, when choose Friends, it will be available to all group members and friends of album owner, you can also click the Custom link to set view permission by DNN roles.

(41)

Geotag & Google maps

As discussed in Edit media chapter, you can manually mark GPS coordinates if not presented in EXIF header.

UMG-Map module can be used to display your media with GPS coordinates on Google Maps

When you hover on a marker UMG opens a popup window displaying media took in this place and

(42)

Integrate with Amazon S3

Amazon S3 (Simple Storage Service) is an online storage service offered by Amazon Web Services. For further information about Amazon Web Services and S3, go to Amazon.com.

In UMG’s Settings page, find the configure link for Amazon S3 to start the configuration wizard:

In this step you should enter your access key. If you do not yet have an access key, login to Amazon.com

and sign up for Simple Storage Service.

In the next step you will be required to create/select a bucket to store your files:

Note that a bucket name must be unique across all of Amazon S3, so you may not be able to use common words for an Amazon S3 bucket.

In the next step of wizard you can set batch quantity, which dictates the number of media to be transferred each time:

In the last step of the wizard, you will be prompted to install the s3 transfer scheduler if not installed before.

To see how many images have been successfully transferred to Amazon S3, you can run this query in Host > SQL:

(43)

Select count(*) from {databaseOwner}{objectQualifier}UMG_Photo where AWS_PhotoKey<>''

UMG should start to transfer your files to Amazon S3 instantly after installing the scheduler, if the transfer does not happen, check AWSOperationScheduler_UMG.txt in your site root folder for logs.

(44)

Integrate with Ultra Video Gallery

Ultra Video Gallery is the most ideal choice when build professional video galleries on DotNetNuke websites, UVG allows you to upload videos in any format and automatically encode uploaded files to flv/mp4 format for internet usage.

In default, UMG supports videos in .flv and .mp4 format only, if you have UVG 4.0+ installed on same website, it is possible to use UVG ‘s video encoding in UMG so UMG accepts videos in any format.

To do this, properly configure UVG first and manage to pass the permission check. For further information about this step please refer to UVG user guide.

Once UVG is ready, simply toggle UVG Integration option in UMG’s Settings page:

When integrated, uploaded videos will be added to UVG first, then UMG makes a copy of the video file and thumbnail so it will not be affected even this video is deleted on UVG side.

The file size of videos used to be much larger than images, your web.config must be properly configured to accept large files.

Assume your video files are less than 100MB, the upload process might take up to 20 minutes. You should configure web.config in this way:

1. Set configuration -> system.web -> httpRuntime -> maxRequestLength to 102400 2. Set configuration -> system.web -> httpRuntime -> executionTimeout to 1200 3. If you use IIS 7, ensure below section is presented in system.webServer node:

(45)

Media thumbnail

UMG generates thumbnails for every uploaded images, when enabled UVG integration it even generates thumbnails for videos, but it’s impossible to generate thumbnails for other kind of media, you will notice these kinds of thumbnails for your videos, audios and flash movies:

On Edit media page, you can upload a new thumbnail to manually replace it.

Default thumbnails are saved as 4 png images in /Desktopmodules/UltraMediaGallery/Images folder: Video.png

Audio.png Flash.png Embeded.png

You can replace them with your own images.

Besides the default thumbnail, UMG create a red flag in upper left corner of the thumbnail, all flags are saved in /Desktopmodules/UltraMediaGallery/Images/Fileflag folder, you can either delete this folder or replace with your own images.