Thursday, May 29, 2014

Migrate your DNN gallery to 3.2

Back in March we announced there will be no further releases of the Gallery Server Pro DotNetNuke Module. Since that time a number of you have asked about migrating your DNN gallery to a stand-alone instance of Gallery Server Pro. Some of the data in the DNN gallery is specific to DNN, so we can’t use the built-in migration path. But a few days ago a customer running clockdoc.org hired me to migrate the data, so I was able to dig into the details about what was involved. It’s actually pretty easy so I thought I’d write up the steps so you can migrate your own DNN gallery.

As an alternative, you can hire me to do the migration. See the end for details.

  1. Start by logging in to your DNN gallery and turning off the auto sync feature if enabled (it’s on the Albums page in the site admin area). This prevents a sync from kicking off and deleting records before your new gallery is fully set up.

  2. Go to the Backup/Restore page and make a backup of your gallery data.

    If you aren’t using the user albums feature and your gallery has only a few users, uncheck the option Export user accounts before making the backup file. This option includes DNN roles like Translator (en-US) and Unverified Users, which you really don’t need in your new gallery. However, it also includes user profile data such as the user album assigned to each user, so you’ll need this data if you want to transfer the user albums.

    NOTE: I haven’t tested a DNN migration that includes the user accounts, so there may be unforeseen obstacles or it may not work at all. Let us know what you find.

  3. Install a new instance of the latest version of Gallery Server Pro using either SQL CE or SQL Server and configure an admin account.

  4. Copy the media files from your DNN gallery to the location you want to use in your new gallery. For example, the default media location is the gs\mediaobjects directory of the web application. If you have multiple galleries, you’ll have multiple locations.

  5. Log in to your new gallery and go to the Backup/Restore page. Restore the backup file you made in step 2. Once complete, DO NOT click anything until completing the following steps.

  6. In the database of your new gallery, manually delete all records in the GalleryControlSettings table. If using SQL Server, use a tool like SQL Server Management Studio. For SQL CE, use a tool like SQL Server Compact Toolbox.

  7. Manually delete all records from the GallerySettings table where SettingName=’EnableDotNetNukeSearch’ and SettingName=’PortalId’.

  8. In the GallerySettings table, look for the records where SettingName=’MediaObjectPath’. There will be at least two – one for the template gallery and one for your actual gallery. You can look in the Gallery table to figure out which gallery is the template gallery (it’s the one where IsTemplate=true).

    Update the one for the template gallery to something like ‘gs\mediaobjects’ – this is the default path that is used when you create a new gallery on the Manage galleries page.

    Update the path for your actual gallery to the place where you copied the media files earlier. If you have multiple galleries, update the path for each gallery. If you want, you can skip this step for now and instead do it on the Media Objects – General page, but you will get an application error if the gallery can’t find – or create – the path defined in the setting.

  9. Now navigate to your gallery in the browser. Because we emptied the GalleryControlSettings page, the gallery will assign the first non-template gallery to the default.aspx page. If this is incorrect, use the Manage galleries page to pick the right one. If you have multiple galleries, you can create additional pages and assign them to each gallery as needed.

  10. If you use the auto-sync feature, turn it back on.

That should complete the migration. Enjoy your new gallery and all the cool new features in v3!

If you don’t want to hassle with it yourself, hire me to do the migration. It is priced at four hours of custom work ($320). Contact me if you’re interested.

Wednesday, May 28, 2014

Gallery Server Pro Binary Pack Updated

Today we released an updated version of the Gallery Server Pro Binary Pack. It contains the latest versions of three open source utilities that give you advanced gallery functionality such as audio/video transcoding and video, PDF, TIF and EPS image generation. They are ImageMagick 6.8.9, FFmpeg 2.2.2, and GhostScript 9.14.

To update your gallery, download the Binary Pack, extract the contents from the zip file, and copy convert.exe and ffmpeg.exe over the existing files in the bin directory of your web application. GhostScript is updated by copying gs914w32.exe in the GhostScript directory to your web server and then running it. If you are using a web hosting company, you likely aren’t allowed to run executables on the server. In this case, the best you can do is create a support ticket to ask them to do it.

Friday, May 23, 2014

Tree bug fixed in latest build of 3.2.0

This afternoon we noticed an issue with using the jQuery jsTree widget in 3.2.0. This widget is used in several places in Gallery Server Pro – basically anywhere we need to display a tree of data we use jsTree.

The issue is that when you select all the children of a node, the parents are automatically selected as well. For example, you might want to create a role with all edit permissions but no admin privileges. This bug caused the Admin gallery and Admin site nodes to be selected when all the children were selected, with no way to de-select them:

treebug2

This is actually the intended behavior of the jsTree widget, as I suppose it is the behavior you want in most cases. But not us. You need to select the children while leaving the parent unchecked if you so choose. If you want to select the parent, fine, but it should be optional.

A couple months ago I tweaked the jsTree library to change this behavior to what we need in Gallery Server Pro. And all was well until I updated to the latest version of jsTree just before releasing 3.2.0. And I didn’t re-apply my changes. Thus a regression was born.

It was easy enough to fix, as I just had to put the changes back in the jsTree library. Tonight I updated the 3.2.0 builds to include this fix. To apply the fix to your own gallery, download the install or upgrade package and copy gs\script\lib.min.js and gs\script\debug\lib.js over your existing versions of those files. Once the fix is in place, you are able to select child nodes while leaving the parent unchecked:

treebug1

This bug actually justifies a point release of 3.2.1 which I will probably get out in the next week or two, but today is the start of a holiday weekend and I wanted to get the fix out as quickly as possible so you wouldn’t have to wait.

To sum up – if you are installing or upgrading, the fix is already in the download packages and you can ignore this post. If you updated to 3.2.0 on or before May 23, you should update the script files or apply 3.2.1 as soon as it is released.

Monday, May 19, 2014

Missing UI template update in 3.2.0 upgrade

Oops! Earlier today we noticed that the left pane template didn’t get updated when upgrading a gallery from one of the 3.X versions. Because of this, the left pane appears empty when viewed on a touchscreen device larger than 750 pixels, as seen here on a Nexus 7:

32fix0

This only affects users who upgraded their gallery to 3.2.0 in the last four days. In addition, regular monitors (non-touchscreen) don’t have an issue, and neither do mobile devices smaller than 750 pixels. But those of you using an iPad, Nexus 7/10, Surface, touchscreen laptops and similar devices will see an empty left pane.

What happened is that we forgot to tell the 3.2.0 migration code to update the JavaScript portion of the left pane template to use the new, improved touchscreen features we added in 3.2. The end result is that the script continues to use the 3.0/3.1 behavior of not rendering the album treeview when a touchscreen is detected.

The fix was easy enough, and the download files have already been updated, so any upgrades you perform from this point on include the latest templates. If you already migrated your gallery to 3.2, there is a quick edit you need to fix your UI template. Follow these steps:

  1. In the UI Templates screen in the site admin area, select the LeftPane gallery item. Then click the JavaScript tab. Delete the script as shown here:

    32fix1

  2. In its place paste the following text:

    // Render the left pane if it exists
    var $lp = $('#{{:Settings.LeftPaneClientId}}');

    if ($lp.length > 0) {
    $lp.html( $.render [ '{{:Settings.LeftPaneTmplName}}' ]( window.{{:Settings.ClientId}}.gspData ));

    It will look like this when you are done:

    32fix2

  3. Save your changes. Repeat the process for any custom left pane templates you’ve created, if any.

We will include this fix in the next update as well, so those of you who already upgraded to 3.2 but don’t apply the fix described here will still get the fixed template in the next release after 3.2.0.

Sorry about any inconvenience.

Thursday, May 15, 2014

Gallery Server Pro 3.2 Released

Today we released 3.2, containing a number of new features and bug fixes.

  • New UI templates for tag/people trees and tag/people clouds (Enterprise edition)
  • View recently added/top rated media (Enterprise edition)
  • RSS/Atom support (Enterprise edition)
  • Drag and drop sorting
  • Faster loading of large albums
  • Improved touchscreen support
  • Metadata editing in virtual albums
  • Improved upload page includes new thumbnail preview
  • Latest version of libraries: Entity Framework 6.1, Plupload, jQuery, jQuery UI, jsTree, jsRender, Web.API, and more

This release is a free upgrade to 3.X license holders. To upgrade, copy the files from the upgrade package over your existing web application and merge any web.config changes into the updated web.config file. More details, including help for new installations and upgrades for other scenarios are in the Administrator’s Guide.

The demos have been updated to 3.2, so check out the new features.

New UI templates (Enterprise edition)

Enterprise license holders get a lot of love in this release. Let’s start with the new UI templates that give you a high-level view of your tags and people metadata. Two new left pane templates are automatically added when your gallery is running the Enterprise edition. One displays popular tags and people in a cloud; the other displays them in a tree.

32_01

32_02

These templates are not activated by default. To start using one of them, go to the UI Templates page, select the LeftPane gallery item, then choose one of the new templates from the dropdown list:

32_03

Select the root album in the Target Albums tab and save. Then choose the Default template, de-select the root album, and save. Now the tags and people should appear in the left pane.

There are a number of ways to customize the appearance of the tree and cloud widgets. Take a look at this section on the JavaScript tab of the tag and people trees template:

32_04

These widgets work by sending an ajax request to the server, then displaying the results. Notice the query sting parameters:

top – Returns the top X items.

sortBy – Specify ‘count’ to sort by the frequency and ‘value’ to sort by the tag value.

sortAscending – Indicates the sort direction; true for ascending and false for descending.

expanded – Indicates whether the tree is expanded by default. true or false

Feel free to edit these values to suit your taste.

View recently added/top rated media (Enterprise edition)

This has long been a popular request. There is now support for viewing recently added and top rated media items. All left pane templates are updated to include two new links:

32_05

These links take you to a virtual album you can treat as if it were a physical album. That is, you can view a slide show, sort, edit the properties, or download the media files. As with the tags, the URL can be edited to give you the exact behavior you want. For example, the recently added link looks like this: default.aspx?latest=50. Change the number to increase or decrease the quantity of media items.

The top rated link looks like this: default.aspx?rating=highest&top=50. Edit the top parameter to change the number of matching items. The rating parameter can be any of these values: lowest, none, or a number from 0 to 5. For example, to see the first 25 items that have no rating, use this URL: default.aspx?rating=none&top=25. You can change the URL in the left pane UI template.

RSS/Atom support (Enterprise edition)

I’ve become a big fan of RSS feeds the last few years. I use Feedly to aggregate a number of RSS feeds into one convenient location that I check each day to see what’s new. Now Gallery Server Pro offers RSS and atom feeds for any album, including virtual ones.

Every album now shows a feed link to the left of the title:

32_06

You can subscribe to the feed using any reader you like. One practical use case for this feature is to easily keep an eye on items being uploaded to the gallery by your users. Any new items appear as unread in your feed reader, giving you a chance to review the media.

Drag and drop sorting

Version 3.0 introduced an improved sort architecture that lets you sort an album by any property such as title, date added, date picture taken, etc. Unfortunately, this replaced the previous sort feature where one can drag and drop thumbnails into the desired location. We heard from many of you that you missed this feature, so 3.2 adds it back as a new sort option.

When you are logged in under an account with edit album permissions, a new custom sort option is available:

32_07

When an album has the custom sort option enabled, the thumbnails become draggable:

32_08

You can even drag thumbnails on a touchscreen device. When you drop the thumbnail, its new position is instantly saved to the server.

Note that custom sorting is not available for virtual albums such as search results and recently added items, since the contents are retrieved dynamically and are constantly changing.

Faster loading of large albums

One of the pain points for some users has been waiting for the web page to render when an album contains hundreds or thousands of media items. It takes a lot of JavaScript horsepower to build the DOM for very large albums. It’s most noticeable in browsers with slow JavaScript engines such as older versions of IE. Even when you use the paging feature to display a small number of items, that first rendering still can take a long time.

This has been dramatically improved in 3.2. Previously, the thumbnails for the entire album were constructed in the DOM, then hidden from view except for those on the current page. Now, when album paging is turned on, only the current page is rendered in the DOM.

Look at these test results for an album with 2000 images and page size set to 25. The time shows how long it takes from the initial page request until the page is fully rendered. They were all done on a PC running Windows 8.1.

Browser GSP 3.1 GSP 3.2 % improvement
IE 11 36 sec. 3 sec. 92%
Firefox 27 110 sec. 2.5 sec. 98%
Chrome 33 12 sec. 2 sec. 84%
Safari 1020 sec. 2 sec. 99.8%
Opera 26 sec. 4 sec. 85%

Improved touchscreen support

Version 3 introduced the 3-pane layout, where each pane is separated by a splitter bar that can be resized or docked. Unfortunately, the splitter jQuery widget was not touch-compatible, meaning one couldn’t use a finger to move the splitter pane. Therefore, we made the decision to render the page using a single pane on all touchscreen devices.

For 3.2, we revisited this issue and figured out a way to use touchscreen events for moving the splitter bar. That meant we could restore the 3-pane view to touchscreen devices. But 3 panes are not appropriate on small devices such as mobile phones, so the logic goes like this:

  • When the device width is less than 750 pixels, hide the left pane, show the center pane full width and float the right pane to the bottom of the screen.
  • When the device width is between 750 px and 1500 px, show the three panes. To make it easier to grab the splitter bar with a finger, double it’s width to 12 pixels.
  • Treat touchscreens larger than 1500 px wide the same as regular monitors. That is, show the 3 panes and render the splitter bar at its normal 6 px width.

We also worked hard to support the ability to select album thumbnails and the drag and drop sorting function with your finger.

Metadata editing in virtual albums

A virtual album is one which shows media items collected from one or more albums. For example, a virtual album is shown whenever one performs a search or looks at the recently added or highest rated items. Since permissions can be applied to individual albums, a virtual album can theoretically show some media the current user has permission to edit along with others the user can’t. Versions prior to 3.2 played it safe and didn’t let one edit the properties of any item when the user was in a virtual album.

Version 3.2 now checks the security permission of the logged on user for each selected media object. If the user has permission to edit that item, she can edit the properties just as if she were viewing the item within its physical album.

32_09

Improved upload page includes new thumbnail preview

The add objects page incorporates an updated version of Plupload that shows thumbnails of image files you select for uploading. In addition, Plupload has been re-architected from the ground up for improved reliability and performance.

32_10

If you prefer the older-style list view, select the button near the top right.

Updated libraries

Gallery Server Pro uses a number of third party libraries. Each one was updated to the latest available version. We already mentioned Plupload. Another notable update was jsTree, which went from a pre-release 1.0 version to 3.0.0. This was a major rewrite by its creator Ivan Bozhanov, who dramatically improved the API and performance of the tree, especially when there are a lot of nodes. His changes required substantial work on our part to get compatible with the new API, but it was worth it. We love jsTree so much that we donated another $100 to Ivan for doing such a great job.

Below is a list of the upgraded components.

Name Version in 3.1 Now updated to
Json.Net 5.0.6 6.0.3
EntityFramework 5.0.0 6.1.0
Microsoft HTTP Client Libraries  2.2.13 2.2.18
Microsoft ASP.NET Web API 2.1 Client Libraries 4.0.30506.0 5.1.2
Microsoft ASP.NET Web API 2.1 Core Libraries 4.0.30506.0 5.1.2
Microsoft ASP.NET Web API 2.1 Web Host 4.0.30506.0 5.1.2
Microsoft ASP.NET Web API 2.1 4.0.30506.0 5.1.2
Microsoft BCL Build Components 1.0.10 1.0.13
Microsoft BCL Portability Pack 1.1.3 1.1.6
Microsoft ASP.NET Universal Providers Core Libraries 1.2 2.0.1
Microsoft ASP.NET Universal Providers for SQL Compact Edition 1.1 2.0.0
EntityFramwork.SqlServerCompact 4.3.6 6.1.0
MSBuildTasks 1.4.0.61 1.4.0.65
ErikEJ.SqlCeBulkCopy 2.1.6.3 2.1.6.4
Plupload 1.5.7 2.1.2
jsRender 1.0.0-beta pre v1.0 commit counter 53
jsTree 1.0-rc3 3.0.0