Some time ago, I switched my site over to using the Next Gen Gallery, and at first, it was a great tool. The only limitation it has, in my view, is that it doesn’t really handle needing to insert a single image at a time. The NG Gallery infrastructure is designed around galleries, not surprisingly, and it wants very much for you to insert a gallery, not a single image. If people want to insert a single image, they should use the media library, or at least that’s the natural logic.

But I have about 15000 photos in my short-term photo collection (I haven’t processed everything yet) and when I’m done, it will likely be around 35-45,000. That’s a lot of photos in the gallery, and the main reason why photographers don’t use the media library, since it would just bloat the media tool that comes by default. NGG solves that problem by having a separate file structure for its uploads, but offers no tool to insert a single image from a gallery. Why would I want to? For two reasons, mainly.

First and foremost, if I’m writing a blog about an amazing sunset I saw, I might have 20 pictures to share for the day, but only one really good one of the sunset. So I just want to show the sunset photo. Or if I was using it as a product gallery, I’d like to only show that one image without having to play with other images at the same time in a carousel or grid or even a slideshow. I *just* need that one photo.

Second, I’m a blogger and my post style is one of narrative arc most of the time. I tell stories. And if I’m telling a story of, for example, a trip to Mexico, I might want to write about something I did on day one, with a photo from day 1 right next to it. Several paragraphs later, I might want to talk about something that happened on day three, and again, I want the photo right with it. And so on for day four, and day six, and saying goodbye on day seven. Five photos, spread out throughout the text. I don’t want to just put a gallery at the top or bottom of the post and force people to scroll back to see it.

I want to be able to simply insert a single photo, and move on to the prose. Is that so unreasonable?

Dreaming the possible dream in the classic editor

Originally, before Gutenberg, there were 7 main ways to insert an image by itself:

a. Insert from the media library. This is the recommended default approach for all of WordPress. WP gives you a media library, you upload your photos there, and anywhere in your site you can use them. Which works well when you have, say, up to 300 photos. Once you start getting above that threshold, the requirement to browse through all your photos at once is a pain in the patootie. Because the media library doesn’t give you folder options by default (although there are other plugins that CAN simulate that functionality) and so when you go to insert a photo, it shows you ALL the photos in the library at once. Images you use regularly as featured images are side-by-side with Aunt Petunia’s birthday party pics. Or intermixed. Finding stuff can be annoying. So most people go with some form of enhanced insertion tool once they get above a certain size. But, on the positive side, once you find the image, all you have to do is click “insert” and BAM! it’s in your post.

b. Simple galleries that use the media library. Many users using the ML look at the chaos of all the photos in one directory and decide instead to go with a gallery tool. The simplest galleries use the media library as their default storage area. They give you a replacement browser for the ML, essentially, and you go through to find the image you want (often in albums and galleries and folders, oh my!), find your image, and allow you to insert it. As an aside, there is also no common nomenclature for organizing photos…some tools have folders that include albums and then the lowest level is a gallery. Others have galleries with albums inside them, and then within albums, folders. The complete opposite of the first one. But I digress.

The only real downside is that if you go to use the default ML for something else, like a featured image, you still see all those photos in one directory. The “browser” you use is a bit of a sham — your photos are still all in one directory, it’s just showing you an interface that fakes you into thinking it’s a structure. Great if you use the gallery tool for EVERYTHING, bad if you still want to use your media library normally for anything else.

c. Hotlink from somewhere else. This may not quite be fair to include as it is what you could do anytime. There are plugins for example where you can host an image somewhere else (often on paid photo sites like Flickr or SmugMug), and then you just paste the URL from the other site. Some of the plugins will actually read the other site’s structure for your account (you have to provide login/pwd details to connect the two), and bob’s your uncle, you can insert images. But you are storing your photos SOMEWHERE else. I used SmugMug for awhile, but it was annoying to pay for extra storage when I already have my own site that I am already paying to host.

d. Hotlink from a self-hosted gallery. Again, this may not be quite fair to include as it is still outside WordPress. Before using the gallery tools built-in or NextGen, I had a copy of Piwigo running on my site, a full separate gallery software tool, and I did that because I couldn’t get a good gallery working properly within my original WordPress site. Rather than continuing to pay for SmugMug, I installed Piwigo, connected it to WordPress, and I could, for the most part, insert individual images wherever I wanted. Except, again, it’s not “within” WordPress and sometimes the plugin connection was wonky. It also requires me to run a whole separate software package / installation with all the admin overhead that goes with it (updating themes, tweaking plugins, etc.).

e. Use NGG with the SINGLEPIC shortcode. While NGG doesn’t give you a tool to insert the image directly, you CAN create an NGG shortcode that will do it. If that sounds like it solves the problem, wait a second. Here’s how it works. First, you go into your admin back-end. Open the gallery that has the image you want to use, or where you think there are some images to consider. Go through the various photos until you find one you might want. Note the ID number for the photo (when it gets uploaded to NGG, it gets assigned a unique number). Now, go back to your post, enter a shortcode that looks like this:

[ singlepic id=X w=X h=X mode=web20|watermark float=left|right ]

You put in the ID #, set the width and height manually, some options for a mode (don’t worry about it right now, I don’t use it) and then whether you want it to float left or right. Those are the official options. And when you’re done, voila, the image is inserted. Now, gee, doesn’t that sound like a fun process for a post that has MULTIPLE IMAGES in it? Maybe you can save a few steps by noting the numbers at the same time of all the photos you might want to use.

Let me add a kicker. The SinglePic shortcode isn’t even advertised anymore by NGG as a working tool. They have instructions on how to use it on their website but you pretty much have to search for it by name to find it. If you instead click on their documentation menus and work your way to the page where it says “Insert a single image”, the recommended solution is the next one.

f. Upload a second copy to the Media Library. Yes, you read that right. The NGG official solution is to not use NGG, but to re-upload the image a second time and create a copy in the Media Library and then insert it from there. If that sounds like you got on the crazy train, lots of users have boarded that same train. It makes no sense to most users that the solution to inserting an image from your gallery is to not use the gallery. And, if you’re a blogger like me, and you’re following best practices which are to use lots of images, even 2-3 per post, it would mean I would be adding around 5K images to my media library at this point. Yeah, no.

g. Enter the original hero. Now, since NGG didn’t provide an option, were the 800K+ users all just “screwed”? No, a plugin developer created a tool called the NGG Image Chooser. It is, in short (no pun intended), AWESOME. The developer had an NGG installation and the lack of options to insert images easily was annoying. Since he had good programming skills, he developed his own tool and then shared it.

Here’s how it would work…you would:

• Write your prose;
• Click on the icon in your toolbar for NGG Image Chooser;
• Browse the file structure of your NGG galleries;
• Find the image (or images, you could select multiple ones);
• Enter some basic info about width and height, etc.;
• Choose a specific type of “insertion” tool (* explained below); and,
• Click “insert”.

And just as with the media library, BAM! instant insertion. It was glorious. And his options for insertion were really robust. Separate from bells and whistles for templates, etc., he had eight different options for inserting the image:

1. NGG tag of image
2. NGG tag of thumbnail
3. NGG tag of multiple thumbnails
4. Thumbnail with link to image (HTML)
5. Thumbnail with link to custom link (HTML)
6. Thumbnail only – no link (HTML)
7. Full-sized image only – no link (HTML)
8. Text link to image (HTML)

Options 1-3 are basically SINGLEPIC shortcodes — but it writes them FOR you. Click on the image and say insert. That’s it. Options 4-5 were for people who wanted clickable images that would either take you to the full-sized image or somewhere else entirely (like a button). Options 6-7 were the opposite, no links. And then option 8 was a simple text link that would open the full image.

If we’re only talking single images, options 1, 2, 4, and 7 were the most likely choices, depending on whether I wanted a thumbnail or the full image. And for me, it was really just a choice of #1 or #2 to take one approach (the shortcode) or option 7 (if I wanted to avoid NGG risks completely).

Here was my risk analysis…since NGG doesn’t particularly encourage use of the SINGLEPIC code, perhaps #1 or #2 was a bit risky. If they ever eliminated it, my site would suddenly have empty links. The shortcode would stop working. By contrast, option 7 (which would insert the full HTML link to the image) was almost risk-free…as long as I didn’t move the image file to somewhere else in the structure, it would work.

I’m a paid user of NGG, so I reached out to them for support, and they told me that SinglePic should be fine as LOTS of people are using it. I started using it liberally in my site, and it worked just fine. It doesn’t have a “float: center” option, but that was easily fixed after the fact in the editor. I could adjust size easily, it was glorious.

I don’t know what the other 800K+ users are using, since there were only about 10K users of NGG Image Chooser, but based on the support forums, I suggest they simply weren’t using anything else. Many people wrote and complained they couldn’t insert single images, and were told to use some sort of subset of the methods above.

I felt like I had found the Holy Grail of plugins with NGG Image Chooser. Life was good.

And then WordPress screwed it all up.

Dreaming the impossible dream in the block editor

When WP upgraded to the Gutenberg block editor, the NGG Image Chooser stopped working. Well, okay, that’s not ENTIRELY true. Options 1, 2, 3 work; options 4-8 don’t. Now, I was using options 1 and 2 mostly, so that shouldn’t be a problem, should it?

Well, I wasn’t sure. For one thing, it’s a short-code…in the classic editor, it would show you the actual image. In Gutenberg, it shows you the image briefly, and then replaces it with an empty image folder of thumbnail size. It is no longer sized to the size you will actually see on the front end, partly because you have to wrap it in a Classic Paragraph block in order to get the SINGLEPIC shortcode (it’s the only block that gives you the “image chooser” toolbar). Once you GET the shortcode, you can paste in any other block you want, but it still isn’t going to show you the WYSIWYG version of the image. I have to continually bop back and forth to the preview screen to see how it looks in “live mode”. Pretty annoying.

And again, looking at the official website for NGG, it doesn’t even tell you to use SINGLEPIC. I reached out to Imagely again, just to be sure there were no immediate plans to deprecate the SINGLEPIC shortcode, but relying heavily on something that they don’t even use makes me really nervous.

So I considered my available options.

a. Ditch NGG and go with another gallery tool. Umm, no. That’s not a real option. 1400 posts and an enormous amount of work already invested in the current tool? Ditching it would be a nuclear option and I am far from that point.

b. Find another tool that integrates into the block editor. Great idea, but there isn’t one. NGG Image Chooser was it.

c. Upgrade my current tools to cover it. I reached out to Imagely for the NGG tool to see if they had anything in the works to support singlepic insertion, but people have been asking for it for over five years, and nothing has showed up yet. They MIGHT have something at some point but I’m not holding my breath. Even their “block” has no options built into it. It’s just a simple block to insert a gallery. Sigh.

I’ve been using Stackable as my block collection of choice, and I reached out to them too as I’m a paid user. I cheekily suggested that perhaps, if they wanted to pick up 800K+ users pretty fast, they could offer some sort of built-in tool for their blocks that would let NGG users insert directly from their Gallery files, not just from the ML. 🙂 For me, it’s a no-brainer market niche, since NGG is the most-used gallery in the WordPress environment. In my opinion, this would also likely be the BEST solution, since Stackable has tons of styling options for their blocks and NGG has none.

I reached out to the developer of the NGG Image Chooser tool to see if there was anything in the works to upgrade NGGIC to be more block-compatible and the short answer is “no”. He doesn’t have any particular experience with blocks, so finding the time for such a big conversion probably won’t happen soon.

So I got thinking. Could I develop my own block, edit his code down to just the two options I need? Yeah, no. There is a very slim chance I could come near-functional, but almost zero chance I could get it to work in a separate block that I could style successfully. I don’t have anywhere near the skills, knowledge or experience to pull that off. Sigh.

It really is an impossible dream, isn’t it?

Achieving the impossible

With all that context, it seemed hopeless. And when that happens, I try to remember to take a step back, identify the key parameters and limitations, as well as the goal, and see if there is a totally out-of-the-box way to solve the problem. Again, based on the support forums, nobody else seems to have done it, but I’m stubborn that way. NGG, the developer and Imagely told me “no dice”, and I should probably listen to the experts more often than not, but I was motivated. Let’s reframe the parameters:

1. NGG is focused on supporting the Gallery tools.
2. NGG doesn’t like SINGLEPIC well enough to actively support it and promote it.
3. The image chooser plugin only works now with SINGLEPIC.
4. STACKABLE has a bunch of great styling tools, but nothing that works with NGG directly.

I thought about those four elements for awhile, letting them swirl around in my mind, and came to the realization that if I want my site to not be at risk, I should really think seriously about ditching the SINGLEPIC option. So that removes #2 and #3.

That left me with only two variables: NGG does galleries well but doesn’t have an option to insert a single image nor does it have block styling options while Stackable has block styling options out the wazoo but nothing that works with NGG.

I felt a brain itch. There was something there crying out to me to reframe further. Neither tool could do the whole job. Wait…what if I used them together, even though they’re not designed to work that way, and try to get the benefits of both. Hmm…could that work? On the surface, most users would say no. The blocks just aren’t programmed to interact that way.

But I mentioned already that I’m stubborn. So I reframed the problem further. Here’s how I worked through the elements of a possible solution:

• START WITH A GALLERY: NGG wants to work with galleries, so who am I to argue? I used NGG to choose the gallery and inserted one from my TV show reviews that has about 13 images in it which I displayed in a BASIC THUMBNAILS layout.

• NARROW THE NUMBER OF IMAGES: NGG wants to display a full gallery of images as the one did above with 13 showing, along with slideshow buttons, etc. But if I go into the options, I can choose which images to include/exclude in a gallery. I went into the image inclusion/exclusion option, and excluded all of them but one.

• FIX BASIC STYLING: Since I don’t want any extra “elements” included, I went into the gallery options, turned off all the extra bells and whistles (like the slideshow link), reduced it to a single column view, overrode the thumbnail sizing and set it for 300px, and went with the DEFAULT VIEW template, since I want it to “always” work (and NGG is likely to keep supporting their default options).

Okay, so I have the basic image there. But here’s where the challenge starts. That “block” takes up the full width of the page, even though the picture is small, and the NGG Gallery block has no options for tweaking the size or layout. It is a container that just holds the gallery as content. What I really need is a way to style that container.

Normally, at least in the old classic editor, I could have put a DIV tag around it, gone into my theme and defined some special CSS code for that type of DIV, and it would essentially have added some extra options. But I don’t have the Classic Editor options and if I have to go into defining a bunch of special CSS styles for multiple image options, I’m sunk. I would have to play with too many CSS options — float right, float left, float center, top alignment, captions, fonts, etc. — without any tools to help style them quickly on the fly.

All the kind of stuff that you are supposed to be able to do in the Block Editor much more easily. So how do I do it in that Block Editor? Hmm…there is a default GROUP container…But the default block doesn’t have much styling, at least not like Stackable does. Hmm…

• WRAP IT ALL IN A STYLABLE BLOCK: Stackable has a CONTAINER block with styling controls out the wazoo. By default, just putting it in a CONTAINER block doesn’t do anything unique, it’s only when the styling starts to get applied that things “happen”.

If all I wanted was an image in the centre, I could go with the gallery style above. But the real challenge is integrating it with other blocks so text could “flow around it”. The equivalent of having the whole gallery float left or right and not occupy the whole width of the page.

Stackable’s CONTAINER block (and all their blocks really) comes with three types of tweakable options.

First and foremost, there is the LAYOUT tab. While it can add some bells and whistles, I wanted the most minimal options in the block so as not to interfere with anything else, so I went with the PLAIN style.

Second, under the STYLE tab, I set the height to normal content width of 100% and the background to no padding. Oddly enough, I tried adding a background colour to the block just so I could “see” it while editing, but with the colour on, it immediately went to full-width and I couldn’t collapse it. So all the background options have to be “off”.

In the ADVANCED tab, I set the block spacing to the smallest possible height, the vertical alignment to the top, the horizontal alignment to the right (but could have been left or centred), block margins and paddings to 0px, column spacing to a minimal height, vertical alignment again to the top, and column spacing to 0px.

That leaves me with two “tweakable settings”. First, in the block area, there is an option to set the “maximum content width” of the block. I set it to 250px so it would be “smaller” than the above examples (and thus show that it was working). Then in the CUSTOM CSS setting (yes it’s still custom CSS for the page), I added:

/* Container */
.ugb-container {
     float:right;
}

I could add some other styling in there, but I was really going for proof of concept.

Did it work? You tell me. The picture to the right that the text is flowing around? That’s an NGG GALLERY block set within the Stackable CONTAINER block, and styled as per above. It does EXACTLY what I need it to, and nothing else.

More importantly, it uses the default gallery options of NGG, so it shouldn’t ever “break”…it’s their default settings, using their preferred / supported default option of using a gallery, and the container doesn’t really care what’s inside it. I could put ANYTHING in there, I just happened to do it for an NGG gallery.

OMG. I did it. I achieved the seeming impossible dream.

Checking my math

I reached out to Imagely and Stackable under my paid support options for them to look at my solution to see if there were any gremlins hiding in the weeds.

Imagely gave me four responses:

1. SINGLEPIC should live long (if not prosper) since lots of people are using it (not a ringing endorsement) so I *could* just use the other shortcode for small pics (I had already found out too that it will support float:centre which the documentation doesn’t say, but only if you specify the width first so it knows how big it is for centring calculations, I guess);
2. The gallery option will work, but might get cumbersome if there are a LOT of images and I load it multiple times on the same page;
3. The gallery works by excluding all the other images by number (not including the one), so if I have, say, 20 images, and I want to just use the last one, it will then insert the gallery code to INCLUDE ALL and EXCLUDE 1-19. That sounds fine until they pointed out that if I ADD to that gallery, say a 21st image, then the INCLUDE ALL command would now be 1-21 and then only exclude 1-19, meaning it would show both 20 and 21. In other words, it doesn’t really work for dynamic galleries that grow. If I can prepopulate stable galleries, then it works perfectly.
4. They like the solution and have forwarded it to their developer’s group as a potential future solution / feature request. I’m not holding my breath, but at least they aren’t saying “NO, NEVER DO THAT!”.

Stackable’s response was a bit less effusive. They basically said, “Well it’s working, so yeah, that’s the right way to do it.” Not exactly a ringing endorsement, but I had hoped they would either tell me “Hey we’re building it another way” or “there’s another tool over here you could use” or “well, you don’t need the height setting here or the horizontal alignment setting there if you’re using FLOAT RIGHT later”. But for now, it works. I’m not thrilled about it only working for relatively static galleries. But it works.

And no one else seems to have found that solution so far, so I’m pretty stoked that my limited experience, skills and knowledge in coding didn’t stop me from thinking outside the box for a solution that I could actually do.

That is a pretty awesome feeling.