From My Desk

UI/UX Part 2 – Or why my gallery plugin sucks!

11 Mar, 2018 @ 22:32

The last time I was here to discuss UI/UX and relating to my gallery plugin I wasn’t sure how I wanted to proceed, how the flow should be to give myself more direction on how to proceed.  I’ve been using my gallery a lot lately, mostly for model kits I’ve been building but I’m very quickly finding some limitations and thing that I knew would end up being a problem later that are now starting to pop up as needing to be addressed.

Issue #1 – Breadcrumbs

At first I wasn’t sure I needed to add such a thing, but very quickly I realized that I have no way of navigating back up to the gallery level without just clicking the top level gallery button on the navigation bar, scrolling back to said gallery and entering again…. not very efficient or user friendly.  Being the clever person I am and knowing that images can belong to multiple galleries I tapped into WordPress code and found the function wp_get_referer().

Great I thought to myself, I’ll just get the page the user came from last as the parent as that will be the gallery.  Using that and another function url_to_postid() I was able to retrieve the post ID of the parent to get the name of that post and display that all pretty and fancy.  Heres what that looks like in case you wondered:

$referer = wp_get_referer();
$parentID = url_to_postid($referer);
$title = get_post($parentID)->post_title;
...
<a href="<?php echo wp_get_referer(); ?>"><?= $title ?></a>

Sounds great right?

Wrong!!!!

If you come from a top-level gallery it works great, but what if you landed on an image page from say being linked to it, then what?  Well go ahead and try, as of this time I’ve not fixed it as that’s why I’m here discussing with you and possibly figure out a solution to this.  If you’re linked in from elsewhere that basically sends you back because that’s what referer does!  Bummer.

Solution:

Sadly I’m not sure yet as the biggest key is, of course, the fact that images can belong to multiple galleries.  Do I ditch the current breadcrumb system instead and implement something else that contains maybe the tags, categories, and galleries the image belongs in?  Revising the layout of the single image page entirely to do so would go hand in hand with that and honestly is something I think needs to happen anyways but that will be discussed in another issue.

Issue #2 – Single Image Layout

So continuing from above brings us to the single gallery image layout itself.  I’m not happy with the layout basically.  I love the polaroid look of the albums and top level but I think once drilled down to the single image-level it just doesn’t work.  Why?  Well, metadata basically.  There are other things that are associated with each image like tags and categories that aren’t visible right now.  As well images can belong to multiple galleries like mentioned above, how do we show that association so the user can say hey I’d like to see more of that gallery?

Solution:

This one seems pretty obvious, however, the UI is the problem.  I need to have the image showing as is with the title and description like current state, but I need to have a meta box or boxes below that show tags, categories, and associated galleries.  But then do I leave the title and description as they are as well or do I go for broke and change those up while I’m at it?

I’m tempted to strip the description and title off and just have the polaroid at the top of the page, with like the paper look below it with title and description, with maybe post-it notes on a sidebar with the metadata.  I might just have to play with it and see.

Issue #3 – Categories and Tags

Categories and tags are a very important part of a gallery, they allow users to filter out data to show just the relevant pieces, but how do I present this and get it site-wide so that users can search anywhere?

Solution:

Researching.

Issue #4 – Gallery Home

The next issue I’ve noticed and that needs to be addressed is the way we are on the home screen of the gallery, how do we say filter by categories or tags?  I need some sort of UI element for this that’s obvious of course and easy to use, but also runs in a similar visual theme.  Do I tack some bar to the top of the page that’s fixed in position to do this? or a sidebar?

Solution:

In Progress

Issue #5 – Gallery Selection

Another issue I’ve come across already and didn’t think about when I first started was what if the number of galleries themselves starts getting insane?  I’m seeing it already with mine where I’ve got a long box and growing of galleries to pick from.  I’m wondering if I can use something like the built-in tag system for this purpose maybe?

Other Things

One of the default behaviors I’ve built into my gallery plugin is that on each page load a single random image is returned from each gallery to show on the homepage.  Personally, I think this can be nifty if you have nothing you want showing period, you know a featured image!  Keeping in mind other potential users of the plugin I need to revisit this and add a featured image field to the gallery, if an image is set then display that period, if there isn’t one, then pick a random one!  Simple right!

Couple other things I really need to dig into and get working already is the ability actually see a list of images in each gallery and go to their edit pages from that as well as manage information on them, a what I consider advanced part of WordPress that I just haven’t tackled yet.  Another being able to add an image from within a gallery rather than the gallery-image to avoid some clicking about.  On the opposite side of that gallery images need to be able to create a gallery from that page rather than abandon work to go create one then come back.

For now though I think I’ve got enough food for though and things to research.  Till next time!

 


Notice: Undefined index: scroll_top_target in /var/www/nginx/christopherleemiller.me/wp-content/plugins/scroll-top/inc/functions.php on line 36