Jump to content

Invision Community Blog


Our take on managing successful online communities


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.


Comments



Recommended Comments

There are some really great changes there.

Users on my forums often get confused by file upload size limits - it's my main barrier to users using the gallery. Are there any improvements to either make it clearer what those limits are or to dynamically reduce the file size through compression as it's uploaded?

Share this comment


Link to comment
Share on other sites

1. Storage of copies -- will that be a retroactive process to existing images or can we run the rebuild tool? 

2. How do we batch apply tags? I didnt see anything in the screenshots.

Share this comment


Link to comment
Share on other sites
15 minutes ago, Joel R said:

1. Storage of copies -- will that be a retroactive process to existing images or can we run the rebuild tool? 

2. How do we batch apply tags? I didnt see anything in the screenshots.

1) We clean up the files no longer used on upgrade automatically.

2) The option shows up right next to the 'Set credit on all' button, but Matt must have had tagging disabled/been submitting as a user without permission when taking the screenshot.

Share this comment


Link to comment
Share on other sites

Is there really any reason people still need to be shown the file name prominently with extension and everything?

It's really the only part of the lightbox I dislike. Mostly due to the fact people tend not to cleanly name photos in the galleries I visit, so it's just a long string of stuff (usually generated off facebook or some other tool which seemingly auto generates a name). I don't see a problem in showing it somewhere, but it just gets so much (and in my humble but totally subjective opinion, over weighted) prominence in that top left position. From a UX/UI perspective, I actually don't think file names have much relevance at all now that you've got drag and drop working for image ordering - there is very little (if any) additional info conveyed by the file name.

I'd prefer (speaking as a consumer of galleries) that the caption stay blank unless a user completes it vs filling it with the filename.

Edited by Morgin

Share this comment


Link to comment
Share on other sites
8 minutes ago, Morgin said:

Is there really any reason people still need to be shown the file name prominently with extension and everything?

It's really the only part of the lightbox I dislike. Mostly due to the fact people tend not to cleanly name photos in the galleries I visit, so it's just a long string of stuff (usually generated off facebook or some other tool which seemingly auto generates a name). I don't see a problem in showing it somewhere, but it just gets so much (and in my humble but totally subjective opinion, over weighted) prominence in that top left position. From a UX perspective, I actually don't think file names have much relevance at all now that you've got drag and drop working for image ordering - there is very little (if any) additional info conveyed by the file name.

I'd prefer (speaking as a consumer of galleries) that the caption stay blank unless a user completes it vs filling it with the filename.

I agree with this, would be nice to see this change.

Share this comment


Link to comment
Share on other sites
2 hours ago, Adriano Faria said:

Ok for the file name but extension really not necessary. At least add a setting to admin decide if wants this or not.

I believe (although am happy to be corrected) that it's not really the extension being shown per-say - its just that the caption appears to be auto-filled with the file name including extension, and if the user doesn't change it to something else, it defaults to showing that. I suppose they could add an admin setting to determine if it grabs the filename without extension for the default, but there are also cases where that might not work either.

I think we are trending towards more obscurification with file names (mobile devices especially make a point of keeping them relatively hidden) so from a user facing perspective with the lightbox (and generally with gallery overall, as there are other examples where the filename defaulted caption shows up - page title, etc) I can't imaging many instances where defaulting to the file names for the caption is going to be an improvement over leaving it blank.

Edited by Morgin

Share this comment


Link to comment
Share on other sites
3 minutes ago, Morgin said:

I believe (although am happy to be corrected) that it's not really the extension being shown per-say

It’s the file name: image001.jpg. Really not necessary this .jpg. That’s what I’m talking about. 

Share this comment


Link to comment
Share on other sites

For me the most valuable would be flexible sorting option as mentioned from the early days of IPB 4. My board uses gallery for events and it must be sorted by date ascendent. Manual sorting by drag&drop for more than 100 imagrs is not a point.

Share this comment


Link to comment
Share on other sites
2 hours ago, Morgin said:

I believe (although am happy to be corrected) that it's not really the extension being shown per-say - its just that the caption appears to be auto-filled with the file name including extension, and if the user doesn't change it to something else, it defaults to showing that.

Yes you are correct.

Share this comment


Link to comment
Share on other sites
2 hours ago, Morgin said:

I'd prefer (speaking as a consumer of galleries) that the caption stay blank unless a user completes it vs filling it with the filename.

Also, to clarify, I mean as someone who visits forums that use galleries, not as an owner myself (my own community does not use it).

Share this comment


Link to comment
Share on other sites
3 hours ago, Morgin said:

I'd prefer (speaking as a consumer of galleries) that the caption stay blank unless a user completes it vs filling it with the filename.

I had posted about this back in 2016 and think we need to be able to force people to put in a title for SEO reasons. 

 

Share this comment


Link to comment
Share on other sites
12 minutes ago, sobrenome said:

Where is the most important feature: metadata geolocation?

Do you mean fetching the location from EXIF data and showing a map? If so, we've supported that for a long time :) 

Share this comment


Link to comment
Share on other sites

Of course everybody knows that it defaults to imagename.jpg or whatever. I’m not sure how to say it more clear: there’s no need to show .jpg there! Use only imagename

Edited by Adriano Faria

Share this comment


Link to comment
Share on other sites
18 minutes ago, Adriano Faria said:

Of course everybody knows that it defaults to imagename.jpg or whatever. I’m not sure how to say it more clear: there’s no need to show .jpg there! Use only imagename

Right. My broader point was that “imagename” is more often than not completely useless, long, sometimes machine generated in the first place, or taken from the default file name format of various camera manufacturers (IMG-4758.jpg becomes IMG-4758 which is pointless to have as a name). 

Appearance wise, having no caption IMO is better than a bad default caption. 

Share this comment


Link to comment
Share on other sites
20 minutes ago, Adriano Faria said:

No caption isn’t an option since title is required in content items.

Which goes back to my first post re seeing it as one of the more prominent viewport items in the lightbox view :D

3 hours ago, Morgin said:

I don't see a problem in showing it somewhere, but it just gets so much (and in my humble but totally subjective opinion, over weighted) prominence in that top left position

As far as the use of the caption in other areas like the title, @AlexWebsites suggestion above seems to be an improvement although this is obviously a tricky thing. You want as few barriers to upload as possible and forcing users to pick a title for each image is extra work. The bad default caption from a terrible filename (like I said, more often than not in the communities I visit its just a random jumble of numbers and letters) is also just downright bad to look at. I'm not the expert, but wanted to raise why I thought having the caption in the top left view of the lightbox when the caption defaults to the filename is something I don't think works well.

Even if it means the title stays as "filename" without the .jpg, and the lightbox hides it unless the user inputs something specific, that might be an improvement.

Edited by Morgin

Share this comment


Link to comment
Share on other sites
34 minutes ago, Morgin said:

Which goes back to my first post :D

 

 

As far as the use of the caption in other areas like the title, @AlexWebsites suggestion above seems to be an improvement although this is obviously a tricky thing. You want as few barriers to upload as possible and forcing users to pick a title for each image is extra work. The bad default caption from a terrible filename (like I said, more often than not in the communities I visit its just a random jumbled of numbers and letters) is also just downright bad to look at. I'm not the expert, but wanted to raise why I thought having the caption in the top left view of the lightbox when the caption defaults to the filename is something I don't think works well.

To be honest the easiest thing here I think would be to just strip the names from the uploaded Image. That would force the user to rename the Caption on it, since the caption is required.

Share this comment


Link to comment
Share on other sites
5 minutes ago, liquidfractal said:

Instead of going right to "X,Y,Z still need to be done" as others here have replied, let me commend the Invision crew on some truly outstanding improvements to Gallery.  Well done! :thumbsup:

Oh yes, absolutely! It does look fantastic (as I stated earlier).

Share this comment


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  Ask A Question ×