This blog has been moved to galleryserverpro.com/blog/

In January 2015 I revamped the website at galleryserverpro.com. This involved migrating the content of this blog to the WordPress blog built in to the site. Therefore, this is the last post on this blog. You can read the latest news on galleryserverpro.com. It has a copy of all the blog posts from this blog, plus the new ones that have been added since.

Thank you Blogger, for hosting this blog these last few years. It's been a pleasure!

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’:

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

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:

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.

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.

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.

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!

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.

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:

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:

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:

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:

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:

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:

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

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:

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

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!

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:

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.

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

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:

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.

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.