Jump to content
bfarber

4.3: Modernizing our Gallery

A picture says a thousand words, they say. If getting those pictures online is troublesome, some of those words might be a little choice.

Gallery has been an integral part of our community suite for just about as long as T1 Tech Mark Higgins can remember (and he has many years of memories). It has seen many interfaces changes as the years have rolled by. The most recent version received a fair amount to feedback on usability.

We've listened. We've re-engineered most of Gallery's key interfaces to make uploading new images to your community frictionless.

Lets take a look through the major changes.

Improved submission process
Submitting images has to be simple or else users will give up and your gallery will be underutilized. We have spent a lot of time simplifying and speeding up the submissions process for your users. The first thing that will be noticed is that the submission process is not presented as a wizard anymore, and the choice to submit to a category or album has been significantly cleaned up and simplified.

5a6f5079f17a1_AlbumSelector.thumb.jpg.3eec89dd3fb7740542f66d24e090f083.jpg

 

Choosing a container

Here, I have chosen the category I wish to submit to, so now I am asked if I want to submit directly to the category, if I want to create a new album, or if I want to submit to an existing album.  Choosing one of those last two options will load the appropriate forms to create an album or select an existing album, respectively.

Afterwards, the modal expands to full screen and you will naturally select your images next, and there's a lot to talk about here.

 

UploadInterface.thumb.jpg.324cf9e298d140a18f0dfb583ea0d5eb.jpg

Overhauled submission interface

First and foremost, the interface has changed significantly to both simplify the UI and to make actually using the interface easier. When you click on an image, the form is loaded to the right immediately without an AJAX request needed to fetch the form.

In addition to quickly setting the credit and copyright information for all images at once, you can now set the tags for all images quickly and easily without having to edit each image individually.

Images support drag n drop reordering in the uploader here, which means that you can drag n drop images to different positions to control their order. Many users previously would name images "Image 1", "Image 2", and so on, and then set their albums to order images by name in order to control the order the images were displayed in. This is no longer necessary now that you can manually reposition the images.

The default description editor is a pared down textarea box, but you can still use the rich text editor if you wish. The ability to enable maps for geo-encoded images and to upload thumbnails for videos is still supported as well, and those options will show up when appropriate in the right hand panel.

The 100 image per submission limit has also been lifted. You can now upload many more images in one go with no hard limit imposed.

Upon clicking submit images, you will see the typical multiredirector to store all of your images, however you will notice that it processes much faster than it did in 4.2 and below.

Better submission control
Administrators can now configure categories such that can accept only images, only albums, or both. This means you can now create categories that cannot be submitted to directly, and you can create categories that albums cannot be used with. This is a feature that has been oft-requested since the release of 4.0, and we are happy to report that it will be available in our next release.

Additionally, album creators (if permitted) can also now create shared albums.  When you create a new album, you can now specify (under the Privacy menu) who can submit to the album, with your available options being:

  • Only me
  • Anyone
  • Only the users I specify
  • Only the groups I specify

Prior to 4.3, albums have always been owned by one user and only that user could submit to them. Invision Community 4.3 will open up albums so that anyone can submit to them, dependent upon the album creator's preferences and needs.

create album - Google Chrome 2018-01-26 11.30.22.png

The choice is yours as to who can submit to your albums

New image navigation
Another major change with Gallery 4.3 is that clicking an image now launches that image in a lightbox to view it and interact with it. This lightbox is context-aware, allowing you to visit the next and previous images in the listing, whether that is a category or album listing, or the featured images or new images listings on the Gallery homepage, for example.

 

Lightbox.thumb.jpg.5cf27d666691ef655f754f5de64d9e8e.jpg

The new image lightbox

Firstly, I will note that you are seeing the image here with my mouse cursor over the image area, exposing the title, tags, and some various buttons. When you mouse away from the image those overlays fade away to highlight the image itself better.

As you can see, you can navigate left and right here to view the next and previous image in this context, and you can otherwise interact with the image as you would have if you had visited the older-style image view page (including the ability to rate, review and comment).

The new Gallery release will introduce a new advertisement location in the right hand column to allow you to show advertisements, even in the lightbox.

If you follow a link to a full image view page, the lightbox will automatically launch when the page loads, still allowing you to interact in a familiar manner. Additionally, if you move through enough images in the lightbox to reach a new page (for example, if you click on the last image in the album listing and then click on the next image button), the listing itself behind the lightbox will update for easier usability if the user closes the lightbox.

One final thing to note is that the interface has been made more mobile friendly, particularly through the introduction of swiping support. You can swipe left and right in the lightbox, and in image carousels, to see the next and previous images.

Notable performance improvements
As we mentioned at the beginning, we recognize there is a balance between performance, usability, and attractiveness, particularly with regards to an image Gallery. For that reason, we have made Gallery's performance a major focus in 4.3, and have implemented some changes that bring with them a noticeable performance improvement.

Firstly, we have adjusted the software to only store two copies of an image (in addition to the original), instead of four. In previous versions, we stored a thumbnail, a small copy, a medium copy and a large copy of an image, all of which arbitrarily sized and designed to best meet our layout needs without showing an image too large or too small in a given space. We have simplified this vastly by storing a slightly larger "small" image, and storing a large copy. Diskspace usage is reduced dramatically as a result, and bandwidth usage is actually lowered as well since only two copies of an image need to be delivered to the browser instead of four.

Next, we have implemented prefetching of the 'next' and 'previous' pages when you launch the lightbox image view. This means that when a user navigates to the next image in the lightbox, it loads immediately instead of waiting for the content to be fetched from the server. From a UX perspective, this provides a much snappier and responsive interface, making users more apt to interact with the site.

We have additionally sped up the submission process as previously mentioned. The order of execution for certain events that must happen during submission has been moved around a bit, resulting in a faster experience for the end user actually submitting the images.

Because we know the details matter, we have implemented other smaller improvements as well. For example, the link to rebuild images in the AdminCP previously resulted in a redirect process that rebuilt the images while you waited, but now a background task is launched so that you can continue with what you were doing while the images get rebuilt in the background.

From start to finish, the Gallery UI and UX has been touched on and improved, and we hope you enjoy these improvements when you start using the new version.


×
×
  • Create New...