Friday, December 5, 2014

Use dropdowns for easier data entry, better searching, and increased data integrity

Gallery Server Pro supports 75 pre-defined properties for your media assets, such as title, caption, and more. There are also 20 custom properties you can use for any purpose you desire. You can make any of these editable on the Metadata page in the site admin area. When you do, Gallery Server gives you a text box where you can edit the property. For example, here I’ve given one of the custom properties the name ‘Color’:

dd1

When I am logged in as a user with edit permission, I can edit the value by clicking on it:

dd2

This works well for many situations, but wouldn’t it be nice to restrict the entry to a list of pre-defined choices? For example, what if the only colors you want to allow are black, gray, brown, red, green, and blue? A dropdown would be perfect:

dd3

We can achieve this effect with a little editing of the right pane UI template. No changes to the source code are required, and your customization is preserved during upgrades to newer versions of Gallery Server. The only required skills are HTML and JavaScript. Let’s look at how to do it.

Start by logging in to your gallery as an admin and going to the Metadata page in the site admin area. Scroll down to the custom properties section, pick one and give it a name. In this example I’m calling it ‘Color’. I enabled it for media objects but not albums, gave it a blank default value, and made it editable. Save your changes, then hit the rebuild button. Gallery Server will add the property for every media asset in your gallery, which behind the scenes means a new record is added to the Metadata table for each item. It can take a while for large galleries, so look in the event log for an entry to indicate it’s finished.

dd4

When it’s done, you’ll see the new property when you view a media asset. As we saw earlier, the default behavior is to edit the value in a free-form text field.

dd5

Now we’d like to turn this into a dropdown list to enforce a set of color choices. We’ll do this by modifying the right pane template to include the new HTML dropdown. We’ll also add custom JavaScript so that when a new choice is made, the changes are automatically persisted to the server.

Go to the UI templates page in the site admin area and select the right pane template. Beginning in 3.2.1 changes are not allowed to the default template, so if you haven’t done so yet, copy it, give it a name and save it. To make this template the active one, go back to the default template and uncheck the albums, thus making the copy the only one with active albums selected.

On the HTML tab, find this line:

{{else MTypeId == 26}}

Insert this HTML just before it:

{{else MTypeId == 2005}}
<tr class='gsp_m2Row' data-id='{{:Id}}' data-iseditable='{{:IsEditable}}'>
  <td class='gsp_k'>{{:Desc}}:</td>
  <td class='gsp_dd'>
{{if ~root.Album.Permissions.EditMediaObject}}
   <select>
    <option value='Black' {{if Value=='Black'}}selected='selected'{{/if}}>Black</option>
    <option value='Gray' {{if Value=='Gray'}}selected='selected'{{/if}}>Gray</option>
    <option value='Brown' {{if Value=='Brown'}}selected='selected'{{/if}}>Brown</option>
    <option value='Red' {{if Value=='Red'}}selected='selected'{{/if}}>Red</option>
    <option value='Green' {{if Value=='Green'}}selected='selected'{{/if}}>Green</option>
    <option value='Blue' {{if Value=='Blue'}}selected='selected'{{/if}}>Blue</option>
   </select>
{{else}}
  {{:Value}}
{{/if}}
  </td></tr>

Change the ‘2005’ in the first line to the ID of your property. The IDs are shown on the Metadata page. And modify the option tags in the HTML to match the choices you want to display.

Then, on the JavaScript tab, add this script after the existing script:

var configDropDown = function() {
var data = {{:Settings.ClientId}}.gspData;

var getMetaItem = function (id) {
// Find the meta item with the specified ID.
return $.grep(data.ActiveMetaItems, function (mi) { return mi.Id === id; })[0];
};

// When this code runs the right pane may not yet be built, so we use the overload of on() that takes a selector
$('#{{:Settings.RightPaneClientId}}').on('change', '.gsp_meta tr[data-iseditable=true] td.gsp_dd select', function (e) {
$('#{{:Settings.RightPaneClientId}}').addClass('gsp_wait');
var metaTypeId = getMetaItem($(e.target).closest('.gsp_m2Row').data('id')).MTypeId;
var galleryItemMeta = { GalleryItems: data.ActiveGalleryItems, MetaItem: { MTypeId: metaTypeId, Value: $(this).val() } };

Gsp.DataService.saveMeta(galleryItemMeta,
  function () { $('#{{:Settings.RightPaneClientId}}').removeClass('gsp_wait'); },
  function (gim) {
   // Data is updated on the server, so now update the local data
   for (var i = 0; i < gim.GalleryItems.length; i++) {
    var gNew = gim.GalleryItems[i];
    var gCurrent = Gsp.findGalleryItem(data, gNew.Id, gNew.ItemType);

    if (gCurrent == null)
     gCurrent = Gsp.findMediaItem(data, gNew.Id, gNew.ItemType);

    if (gCurrent.MetaItems != null) {
     var mi = Gsp.findMetaItem(gCurrent.MetaItems, gim.MetaItem.MTypeId);
     if (mi != null) mi.Value = gim.MetaItem.Value;
    }
   }
  },
   function (response) { $.gspShowMsg("Cannot Save Changes", response.responseText, { msgType: 'error', autoCloseDelay: 0 }); }
);
});
};

$('#{{:Settings.ThumbnailClientId}}').on('select.{{:Settings.ClientId}}', function() {
configDropDown();
});

$('#{{:Settings.MediaClientId}}').on('next.{{:Settings.ClientId}} previous.{{:Settings.ClientId}}', function() {
configDropDown();
});

configDropDown();

It’s kind of a lot to absorb, but all it really does is detect the change event of the dropdown, persist the changes to the server, and update the client data model. There is also code to reconfigure the dropdown each time the right pane is rendered, which happens when the user navigates forward and backward in an album and when selecting a thumbnail on the album view page.

Save your changes, then take a look at one of your media assets in the gallery. You should see a dropdown for the property, just like one of the earlier screenshots. Users without edit permission see plain text, just like with the other properties.

Notice it also works on the thumbnail view in an album. You can use drag-select or CTRL-select several thumbnails, then select a color from the dropdown to update all of them at once. Super efficient.

This is a pretty slick feature that is usually available only in high-end digital asset management systems. Feel free to adapt this sample code to your own requirements. For example, you may want to get a list of choices from a web service or use a datetime picker for a date property. You have full control over the rendering through the power of the UI templates.

Wednesday, October 1, 2014

Congrats to gallery contest winner Joe Hakooz!

Last month I invited you to submit your gallery for a new Gallery Showcase we’re building that highlights the diverse ways people use Gallery Server Pro for managing digital assets. Thanks for all your great entries!

The winner, chosen at random, is Joe Hakooz from Innovah, a custom web app company in North Carolina. His client is Lacour Fruits, an international fruit and vegetable distributor based in France. They needed a secure way to store a large number of photos and videos in high resolution formats, primarily for use in their marketing and print collateral. They considered building a custom app but when they found Gallery Server Pro they knew they found their solution.

Here’s what Joe had to say:

“Gallery Server was incredibly simple to install and converting to an SQL database was painless. The automatic installation is tough to beat, but my favorite thing is how easy it is to use. We gave the client a quick demo and they haven't needed additional training since we deployed!”

Joe and his team branded the gallery with their client’s logo and other graphic elements using the UI template feature and a bit of CSS editing.

The gallery is for internal company use so you can’t browse to it, but Joe shared a few screen shots. Take a look. Nice job, Joe!

lacour-1

lacour-2

lacour-3

lacour-4

Tuesday, September 9, 2014

Show off your gallery and win $50

Got a great gallery you'd like to show off? Tell us about it and it might appear in the new Gallery Showcase we're adding to our site.

Any gallery built with Gallery Server Pro is eligible. If selected, we'll post a screenshot and a little blurb about how you're using the gallery. We'll even provide a link to help with your SEO.

Use the contact form to provide:

  • An URL to your gallery. If it's password protected and you don't want to share a login account, give us a screenshot.
  • A few sentences that describes how you're using the gallery. What problem does it solve? If you're happy with GSP, say so.
  • Your name, title, email and - ideally - a photo of your face. We'll select positive comments for a separate "What our customers are saying" section.

All entries received by September 30 are entered into a drawing for a $50 Amazon gift card.

Tip: The easiest way to send files (like your screenshot and personal photo) is to reply to the auto-generated email you receive from the contact form.

Tuesday, September 2, 2014

Secure your media files in a read-only gallery

People who want to share their media assets with the world through a website typically have one of two views:

  • I want to fully manage my media files through the website, including adding and deleting media. That is, I want a Digital Asset Management System (DAMS).
  • I already have a process for managing my files; I just want to expose a read only gallery on my website. That is, I want a Web Gallery.

Both of these are valid and supported in Gallery Server Pro. In this post I’ll focus on the second approach – exposing a collection of files in a read-only gallery.

Who would want to do this?

I would, for one. Like a lot of people, I have accumulated thousands of photos and videos over the years. My master collection of media files is stored on a desktop PC in my home. No matter how I acquire a media asset – whether it’s through my cell phone, tablet, video camera, or sent to me from someone else – they all end up on my PC. I want 24/7 availability to these files, but I don’t want to keep my PC running all the time nor do I want to run a web server from home. It would be great if I could copy these files to a web server and set that up as a read-only gallery.

Who else would want to do this?

  • You run a business and have all your media files on a shared drive. You want to expose them internally or on a public website but want to guarantee no one can delete your assets through the website.
  • You run a web server from your home and want to expose your media collection, but am worried about the security risks. You don’t want to trust that a web gallery is truly secure; you need to keep things locked down for your own peace of mind.
  • You have a system in place for adding, editing and deleting your files. It works but you want to make it easier for those who just want to browse the files.

Setting up the read-only gallery

Configuring a gallery to be read-only is easy. It all takes place on the Media Objects – General page in the site admin area:

rog1

Select the option Media files are read-only and then save. That’s it. From now on, Gallery Server Pro won’t modify any of your original media files. It also won’t let users or even admins make any changes to files, as seen here in this screenshot of the Actions menu:

rog2

When a gallery is read-only, users cannot create albums or upload files, nor can they move, copy or delete albums and media objects. That is, they cannot perform any action that modifies the original media files. However, users can synchronize, download, sort, edit titles, captions and tags, and administrators can change settings in the Site admin area, including managing users and roles.

Prerequisites

There are a few requirements that must be met before a gallery can be made read only:

  • User albums must be disabled
  • The directory for the thumbnail and compressed images must be different than the original media objects directory
  • The option Synchronize directory names with album titles must be disabled

This should come as no surprise since these options have the potential to modify files, so they must be configured such that this isn’t possible. If any settings have the wrong value, your gallery will notify you when you try to enable the read-only option.

How do I manage files in a read-only gallery?

To add or remove media files to or from your gallery, use a tool like Windows Explorer or an FTP program to add or delete the files from the media file directory. Then run the synchronize function to have the gallery auto-detect the file changes. You can turn on the auto-sync function on the Albums – General page so you don’t have to manually run a sync.

In very large galleries, a sync can take a long time even when there aren’t any changes. That’s because the application has to iterate through every file in the gallery. If this becomes an issue, instead of auto-syncing you can create a script to periodically run a sync on one or more down-level albums. You’ll find this option below the auto-sync settings:

rog3

You can use Windows Task Scheduler to start a sync on any schedule you choose. Do a Google-Bing search on task scheduler http request for more info.

As mentioned earlier, management tasks that don’t affect the original media file as still available. That means you can still assign album thumbnails, sort albums, and edit titles, captions and tags.

One more piece for bullet-proof security

The previous steps will give you a read-only gallery, but one should acknowledge the security risks that are still present:

  • If a hacker gets your administrator credentials, they can log in, turn off the read-only setting, and then proceed to wreak havoc in your gallery.
  • A hacker can exploit an unpatched security hole in Gallery Server Pro to damage your gallery. (None are known at this time, however.)

You can eliminate these risks by configuring the IIS application pool identity to have read-only access to the media directory. When you do this, the OS’s file security system will prevent IIS and the gallery from making any changes to the file system, thus giving you an extra layer of protection.

Start by identifying the application pool identity your website is using. In IIS Manager, right click the web application and choose Manage Application – Advanced Settings. You’ll see the application pool identity in the dialog window:

rog4

Now figure out the identity the application pool is running under. Click the Application Pools node in the left pane of IIS Manager, find the app pool name in the center pane and notice the value in the Identity column. Here we see it’s running under ApplicationPoolIdentity:

rog5

This next part is confusing and trips up a lot of people, including me the first few times I did it. The term ApplicationPoolIdentity is not the actual name of the user account in Windows. Instead, it is telling you the identity is the name of the application pool concatenated to IIS APPPOOL. In our case, since the pool is named DefaultAppPool, the user account is IIS APPPOOL\DefaultAppPool.

If the identity was something other than ApplicationPoolIdentity, like LocalService, NetworkService, or an AD account, then you don’t need to do any of this dancing around. The identity is simply what it says.

Open Windows Explorer and navigate to the directory containing your media files. Right click the folder and choose Properties. Click the Security tab and choose Edit, then click Add on the Permissions window:

rog6

Type in the pool identity. In our case we enter IIS APPPOOL\DefaultAppPool:

rog7

Verify that the OS recognizes the name by clicking Check Names. When valid, the name becomes underlined. In our case Windows decides to drop the IIS APPPOOL prefix, although oddly it wouldn’t have worked to just type in DefaultAppPool:

rog8

Click OK and then assign read-only permission for the account:

rog9

Click OK a couple times to close all the windows. That should be it, although I should note a few things:

  • Your system might already be giving the user account write or modify permission through one of the other permissions. If this is the case you’ll need to revoke those permissions or change them to read-only. A good way to test that you truly have read-only permission on your app pool is to disable the read-only option in your gallery and then try to make a change that modifies a file (uploading a file, rotation, or deletion). If it succeeds then you still have work to do with your permissions.
  • Your app pool identity needs modify permission to the directories where your thumbnails and web-optimized images are stored. Adjust as needed.
  • These screenshots were made on Win 8.1. Other OS’s may look slightly different.
  • If using a hosting provider, you may not be able to adjust settings to the detail shown here. Poke around their control panel to find out what settings they expose.

When finished, you’ll have a bullet-proof gallery you can share with customers, friends and relatives. Cheers!

Thursday, July 17, 2014

Did you know you can change your file names?

This is one of those hidden gems in Gallery Server Pro that is not widely known but can be really handy. You can modify the underlying file name of any media object through the gallery UI.

You already know you can edit several attributes of your media assets in the right pane. The common ones are title, caption, and tags, but any property can be editable. In a default gallery, the file name is visible and read only:

fn_metadata1

To make the file name editable, go to the Metadata page in the site admin area. Find the row for the FileName property and check the box to make it editable. Note that there is a quirk in the jQuery grid widget that requires you to tab *out* of the cell before saving, so be sure it has the green check mark when you save.

fn_metadata2

That’s it. Notice you can now edit the file name for any asset:

fn_metadata3

Changing the file name updates it in two places – the Metadata table in the database and the file system on the server’s hard drive. This can be handy for cleaning up those ridiculous names that come out of your camera.

A few things to note. If you pick a name that is already used by another file in the directory, Gallery Server Pro will automatically tweak it until it is unique. For example, the name MyPhoto.jpg may become MyPhoto(1).jpg.

The names of the thumbnail and web-optimized versions are not updated. Not a big deal for the thumbnail version but the optimized file name is used when you are downloading the image:

fn_metadata4

This might be a bit of a nuisance, so I plan to correct this in a future version.

Another thing is when you are running a gallery in read-only mode (i.e. the option ‘Media files are read only’ is selected on the Media Objects – General page), the file name is not changed on the hard drive. The meta property, however, is updated, since that is just a database value. This might cause some confusion, so I’m guessing those of you with read only galleries will want to leave this property read only.

Lastly, this trick applies only to the FileName metadata property. A related one – FileNameWithoutExtension – does not persist changes back to the server’s hard drive. It only updates the database value, just like the vast majority of the other properties.

Thursday, June 19, 2014

WPI version of Gallery Server Pro released

Microsoft has completed their testing of 3.2.1 and published the new version to their web application gallery. A link to install it is on the download page.

Monday, June 2, 2014

Gallery Server Pro 3.2.1 Released

Today we released 3.2.1, which contains a small set of bug fixes and a couple minor behavior changes. There are no changes to web.config or the skins, so upgrading from 3.2.0 is as easy as copying the files from the upgrade package over the existing files in your gallery. Instructions for upgrading other versions are in the Admin Guide.

Bug fixes

  • Left pane UI template partially updated during upgrade
  • Parent nodes in the tree cannot be unchecked in certain cases
  • Quotation marks in user and role names cause trouble
  • Page scrolls to top when dialog auto-closes

The first two bug fixes were added to the 3.2.0 packages as soon as they were identified (May 19 and May 23, respectively), so they may already be fixed in your installation of Gallery Server Pro.

More details about the bug fixes are in this report.

Behavior changes

Remove confirmation message after drag and drop sorting

Drag and drop sorting was added in 3.2.0. When you finish dragging the thumbnail, the new position is sent to the server and a confirmation message is displayed. Some users found the confirmation message annoyingly repetitive, especially when you factor in the bug where the screen auto-scrolled to the top when the message disappeared. Although we fixed that bug in this release, we agree that the message is unnecessary, so we removed it.

Prevent UI template changes to the default template

This is a behavior change that might catch some of you by surprise. Starting with 3.2.1, you can no longer save changes to any UI template with the name ‘Default’, except for selecting which albums the template applies to. If you want to edit a template, first make a copy and apply your changes to that. There are two reasons for this change:

  1. Allow reverting to the default template – By forcing you to make your changes to copies, you always have a default template to revert to.
  2. Allow template upgrades – Newer versions of Gallery Server Pro routinely require modifications to one or more UI templates. This is typically done through a search and replace on a particular string. However, if a user has modified the template, the search may not find a match, causing the template to not be upgraded. This can leave the user with a broken gallery and no easy way to fix things. By preserving the integrity of the default templates, we can be assured they upgrade correctly during an upgrade. And if you are using a modified template, you can refer to the default template to identify changes and merge them with your custom template.

View the official feature change report for 3.2.1.

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

Thursday, April 10, 2014

Show high-resolution image during slideshow

You can view a slideshow in an album by clicking the Play slideshow button that appears above an image:

slideshow_start

By default, the slideshow scales to use the entire browser window to show the web-optimized version of the image, as seen below.

slideshow_opt

For most people, the web-optimized version is preferred over the original. It’s a much smaller amount of data sent to the browser (around 50 KB instead of 3,000-20,000 KB). This results in faster loading pages, less bandwidth requirements, and greater ability to scale.

But some of you may prefer to see the high resolution originals. You want to see the full detail in your photographs and aren’t concerned about the larger size travelling across the wire. Well, here’s an easy edit to make it happen.

  1. Open gs\script\gallery.min.js in a text editor.
  2. Look for this text: Gsp.getView(j, Gsp.Constants.ViewSize_Optimized)
  3. Change it to this: Gsp.getView(j, Gsp.Constants.ViewSize_Original)
  4. Save and close the file.

Hit F5 to refresh the script file in your browser and take a look at the slideshow. Notice the increased detail you can see in this example (click for a larger version):

slideshow_original

Keep in mind that if your original images are in a format that can’t be rendered in a browser (RAW, TIF, WMF, etc), this obviously won’t work. And if you have a slow internet connection or your files are particularly big, the slideshow may not work very well.

Cheers!

Gallery Server Pro not vulnerable to Heartbleed bug

A vulnerability in OpenSSL (CVE-2014-0160) was disclosed a few days ago. It has been named the Heartbleed bug. There is a lot of concern due to its seriousness, widespread impact, and difficulty in fixing.

I just wanted to confirm that Gallery Server Pro is not vulnerable because it cannot run on the platforms where it exists. Gallery Server Pro is based on .NET and must run on IIS on a Windows Server. A blog post from Microsoft employee Ben Ari confirms that default configurations of Windows do not include OpenSSL. He writes that one *could* use OpenSSL on Windows by running the Windows version of Apache, but GSP cannot run under Apache, so this is not applicable to us.

So, no worries about the Heartbleed bug with Gallery Server Pro.

Monday, March 31, 2014

Gallery Server Pro DotNetNuke Module History and Roadmap

Gallery Server Pro has been available as a DotNetNuke module since 2.4.0 was released in 2010. Subsequent releases of Gallery Server Pro have always had a corresponding DNN module release…until 3.0 was released in June 2013. Version 3 was a significant release, introducing—among other things—a new data layer built on Entity Framework Code First Migrations 5.0. Using EF CF Migrations greatly simplified data access, as we no longer had to maintain separate code bases for each database technology (that is, SQL Server and SQL CE).

However, EF CF Migrations had a limitation that was incompatible with DNN—one could have only one migration model per database. Since the GSP module shared its data access with a variety of other modules as well as the DNN core, it would be asking for trouble for the module to assume it could have the only allowed migration model in the database.

But there was hope, as the EF team recognized this issue and promised to support multiple models in 6.0. And so we put the 3.0 version of the GSP DNN Module on hold until EF 6 was released. Indeed, they delivered on their promise in October 2013. We eagerly upgraded to this version as we prepared to hunker down on the DNN module. Unfortunately, we immediately hit a snag. The ASP.NET Universal Provider library, which is used to provide membership and role services, didn’t work with EF6. Microsoft recognized this and resolved the issue when they released Microsoft ASP.NET Universal Providers Core 2.0 in December 2013.

Finally, the pieces were in place to proceed with the GSP DNN module.

Unfortunately, more roadblocks…

In the last few weeks we’ve been sitting down and taking a serious look at what it’ll take to merge the GSP 3.0 code with the GSP DNN module 2.6 source code. Despite resolving the initial roadblocks, significant hurdles remained.

Lack of DNN support for EF CF Migrations

DNN assumes that a module builder follows a specific data architecture that involves generating the required data structure as SQL script files that are executed by the DNN module installer. Then all data access is performed by executing manually-generated SQL statements against the database or invoking stored procedures.

But EF CF Migrations generates and executes the SQL for us, making integration with the DNN architecture problematic. We tried to find out if and how others were building DNN modules using EF CF Migrations but couldn’t find anyone who is doing this. At this point it is not clear to us whether it is even possible. We don’t mind being trailblazers when appropriate, but we’d rather not take on a huge amount of risk when dealing with something as mundane as accessing the database.

JavaScript and jQuery widget issues

Version 3 dramatically increased the number of jQuery widgets. These widgets provide a lot of flexibility and work well with the jsRender-based UI template architecture. But jQuery widgets are tricky to use in an environment where others may be using the same—or similar—widgets. For example, how does one handle the situation where two modules are on the page, and each module uses a different version of jsTree? In reality, you can’t make it work unless you jump through hoops like building a forked version of jsTree with a custom name.

There are other risks as well. The increased use of JavaScript everywhere (the GSP DNN module, other 3rd party modules, and the DNN core) has increased the risk of conflict and hard to find bugs. For example, GSP adds a trim() method to the String object when it’s missing:

if (!String.prototype.trim) {
   // Add trim() function for browsers that don't implement it (IE 1-8).
   String.prototype.trim = function () {
     return this.replace(/^\s+|\s+$/g, '');
   };
}

What if another module beats us to it and defines its own implementation? We get unexpected behavior and you think there’s a bug in GSP. As you can imagine, this type of issue is pretty much impossible to test for or prevent with any degree of certainty.

web.config changes

All ASP.NET applications share a web.config file in the root that defines certain behaviors. GSP has this as well, where we define things such as the EF version, the membership provider, and Web.API configuration. The DNN module version of GSP also requires most of these things in the web.config file. But since this file affects the entire application, including other modules, there is a substantial risk that the configuration required for GSP conflicts with someone else’s configuration requirements.

Furthermore, Web.API requires setting up routes so that ajax requests get sent to the correct controller. GSP defines what it needs, but these may conflict with routes defined in other modules or the DNN core.

Object qualifier and database owner

DNN recommends that tables be created with support for a custom object qualifier and database owner. That means the SQL scripts that create the tables look something like this:

CREATE TABLE {databaseOwner}[{objectQualifier}gs_Album](...)

Since EF CF Migrations generates tables by reverse engineering the code first model, support for this kind of customization is difficult or possibly impossible. Skipping support for this leads to the possibility of a module installation damaging the database if a user attempts to install the module on two different installations hosted inside the same database. Not cool.

Decline of DNN

Perhaps the most significant issue for us is the signs that the DNN ecosystem is dying. Take a look at this chart generated from Google Trends:

dnn_trend

Searches for the term DotNetNuke peaked in 2006 and have dropped to almost nothing since then. Much of this, of course, is the name change from DotNetNuke to DNN. But even the term DNN peaked between 2006 and 2009 and is down by about 50% since then.

There are other signs, too. Go to any job site and compare the jobs for DNN with those of other CMS’s. DNN is dwarfed by jobs for WordPress, Drupal and Joomla. Even among .NET CMS’s, Umbraco has overtaken DNN as the go-to CMS.

Sales of the GSP DNN module have never been great. We have yet to recover the resources we have put into it over the years.

The unknown

Developing the GSP DNN module in 2010 took far longer than we expected due to surprises we encountered along the way. For example, DNN disables the native .NET localization services GSP used to provide language support. We spent a ridiculous amount of time trying to figure out how to get DNN to serve text from GSP’s resx file. We fear more such issues as we ponder the 3.0 migration.

Moving forward

The issues described above have been heavily weighing on our minds, and we had to make a decision about how to move forward. If we poured resources into supporting DNN, it takes away from adding cool new features to the core GSP product. More importantly, we're not sure it's even possible for GSP 3 to run as a DNN module. At the very least, it would be significant undertaking.

Ultimately, we have decided to no longer support DNN. That’s a painful sentence to write, as it’s like abandoning one of our children. Plus, we know there are many of you who have been looking forward to continued DNN support. But we need to do what serves the greatest good for the most customers, while allowing us to keep paying the bills.

If you currently use GSP DNN Module 2.6, be assured it will continue to work indefinitely. And remember that you can always install the latest version of GSP as a stand-alone instance and link to it from your DNN site.

As for us, we are putting the finishing touches on a 3.2 release. This will be a free update to all 3.X license holders. Details will be shared soon. After that, we’ll be hunkering down on version 4.0, where we plan several significant features you’re just going to love.

The future of GSP is bright, and we love that you’re coming along with us for the ride. Great things to come!

Wednesday, January 15, 2014

Eliminate startup delay in your galleries using Application Initialization

It is well known that ASP.NET applications have a startup delay after they’ve been idle for a while. Every once in a while someone posts in the forum that the gallery is slow to load at first and then is quite fast. That’s because IIS is doing a lot of stuff when that first HTTP request comes in:

  • Spins up an application pool
  • JIT-compiles the code
  • Performs view generation of the EF model
  • Loads HTTP modules
  • Runs initialization code in GSP, which connects to the database and loads application settings and other lookup data.

All that takes a few seconds, which isn’t terrible, but first impressions are important. Wouldn’t it be better if IIS handled this before that first HTTP request comes in?

Well, it can. It’s called Application Initialization and is available in Windows Server 2008 R2 and higher. Once configured, the gallery application is always warmed up and ready to instantly serve HTTP requests, even after periods of inactivity that would normally shut down the application pool. Sweet!

It’s a little tricky to set up, so let’s run through the details.

 

Application Initialization in Windows Server 2008 R2 (IIS 7.5)

In Windows Server 2008 R2, use the Microsoft Web Platform Installer to install Application Initialization. Once installed, configure it by editing applicationHost.config, which is at %WINDIR%\system32\inetsrv\config.

  1. Open applicationHost.config in Notepad, being sure to run it with the "Run as Administrator" option.
  2. Find the <applicationPools> configuration section, and then look for the application pool running your gallery. If you don’t know the pool name, look it up in IIS Manager by right-clicking the application node in the left pane and choosing Manage Application > Advanced Settings. Add startMode="AlwaysRunning" so that it looks like this:

    <add name=".NET v4.5" startMode="AlwaysRunning" managedRuntimeVersion="v4.0" />

  3. Scroll down a little more in applicationHost.config to the <sites> configuration element. Find the entry for the gallery application and add preloadEnabled="true", like this:

    <application path="/gallery" preloadEnabled="true" applicationPool=".NET v4.5">

  4. Restart IIS by executing iisreset in a command prompt running as an administrator.

That’s it. Your gallery is now always running in a warmed up state and ready to instantly serve users. You can test it out by temporarily changing the application pool timeout to one minute, then waiting a couple minutes and browsing to your gallery.

 

Application Initialization in Windows Server 2012 and higher (IIS 8+)

In Windows Server 2012 and higher, Application Initialization is included in the OS but it must be enabled in the Add Roles and Feature Wizard:

app_init

One installed, you can now configure it with IIS Manager – no need to edit applicationHost.config.

  1. Open IIS Manager and navigate to the application pool the gallery is running under. Right click it and choose Advanced Settings. Verify the Start Automatically setting is set to True and the Start Mode is set to AlwaysRunning. Click OK.

    app_init2

  2. In the left pane of IIS Manager, navigate to the gallery web application. Right click the application node and select Manage Application > Advanced Settings. Set Preload Enabled to True.

    app_init3

  3. Restart IIS by executing iisreset in a command prompt running as an administrator.

That’s it. Your gallery is now in an always-on state.

 

Common mistakes

The web is filled with people talking about how they can’t get this feature to work. I’m guessing it’s because they missed one or more of the four critical steps. If you’re having trouble getting things going, make sure you did these steps:

  1. Installed Application Initialization (either through Web PI for IIS 7.5 or through the Add Roles and Features Wizard for IIS 8+).
  2. Application pool has Start Automatically = True.
  3. Application pool has Start Mode = AlwaysRunning.
  4. Application has Preload Enabled = True.