Archives From My Desk

UX/UI and why its important

23 Nov, 2017 @ 16:31

One of the things I’m learning while building on this site and that is new to me is UX and UI and why it’s important.  What brings this to mind?  Well if you head over to the gallery page you can see an example of what I’m currently walking through.  Once a user clicks into a gallery all of the images appear scattered across the page, clicking them brings up a popup with title and description of the image.  So whats the problem you might ask?  In short, how to link to the image.

Method One

So I’ve got a couple ideas on how to handle that.  First thought is to scrap the popup and instead have the click take you to the page with the single image.  There I can display the image much larger, format the text how I want etc, and best of all the browser URL reflects the link to that single image.  Perfect!  Or is it?  One of the things I want is to be able to see all the images in the gallery and I personally feel that clicking the image will defeat that purpose as you can’t view them all in full size without a lot of navigation back and forth along with increase page load times significantly due to that back and forth navigation.

Method Two

The next idea I had was to have the popup box update the browser URL to contain the link to the image so that users can simply copy paste that, but then what if they think they are copying for the album and not the image?  Another problem is that if someone copies the link from the popup, pastes into a browser and opens in a new tab the visuals will be different as we will be back to the single images page, not ideal.   Naturally, my thought process said well what if we don’t use the single image page at all?  What if we only use the gallery with the popup and rather than link to the image itself we just append something like the ID of the image to the URL that updates with the currently opened image, and when pasted causes the lightbox plugin to open the image in the URL.

Which to Choose?

Long story short?  I’m not sure.  I like the idea of method one a little more but there are definite drawbacks,  method two is a little easier I think as far as implementation but neither really have me going yeah that will work.  Maybe it’ll come to my in my sleep and this entire post will be moot.

Gallery plugin – The beginning

1 Nov, 2017 @ 1:25

On the journey to building out this website I tried a few different plugins for galleries, Nextgen Gallery being one of the most popular out there.  But either I didn’t understand their structure, or it just wasn’t capable of handling what I was wanting to do.  So naturally, as a programmer, I turned to the next best thing….. re-inventing the wheel.  When I set out on this task I had a few requirements:

  • Easy to use
  • Ability to have images appear in multiple galleries at the same time
  • Protection system including public, private, and protected galleries.

The first bullet point is still a work in progress, there are things I’m not happy with, how the interactions between the pages should work and look, but that’s an ever-evolving thing anyways and I’m sure as I go along more I’ll figure that out more and more.  Right now there are two custom post types created with the plugin, a Gallery and Gallery Images.


Galleries have a few simple properties to them, a visibility setting (the protection), and user visibility when setting to a protected gallery type.  Each gallery also has the standard categories meta field, but it’s not currently utilized in any way by me, though plans are in to do some filtering with that.  Also included are tags, and the standard editor, of which aren’t used right now either, but will be.  I’m going to leave it to theme designers to decide how they’d want that data to appear.  Finally still in the works is to show a list of images associated with that gallery.  I’ve not reached that stage yet because I’m not really sure how to add a standard backend looking table, research to follow on that.

Protection of the galleries itself is pretty simple when in public mode the gallery is visible to all.  Private mode restricts the album to only users with the administrator role, although I plan on adding configuration to allow that level to be set by the user.  When an album is placed into protected mode another meta box appears and is populated with users of the “client” role where you can then select who should be able to see this gallery.  Initially, I was going to use and standard WordPress role for this, but then the more I thought about this with sites that allow users to register freely it might get rather unwieldy.  I might come back to this later and have it set by looking up user instead to populate the list, but haven’t settled on it yet.  Again configurable down the road.

Gallery Images

Turning my attention to the gallery images is a similar story.  Fields included in it are the featured image field, where users will attach the image to the post, but it’s not something I’m happy with as of right now and intend to address going forward, but it works, and its built into WordPress, allowing me to iterate rapidly and get core functionality down.  From there a list appears on the sidebar where you can pick any and all the albums you want this image to appear in.  This part was crucial to me as there are times I’ll want images to appear in multiple places because of subject matter.  Finally, i’ve included the typical title and editor fields, the title is the caption for the image and editor space as a description. both again up to the theme developer on how they want to use them.

Whats Next?

As the plugin continues to grow and gain functionality my main concerns are displaying the list of images in a gallery, and showing on the index pages for each relevant data like how many images are associated with it, the visibility and such.  From there I’d like to add the ability to create a gallery from the images page as currently, this isn’t possible directly.  Then maybe some way to add pictures to the gallery from within the gallery with multiple uploads possible.

For now though enjoy a couple pictures of the backend:

To see it in action head over to the gallery located here.