I was right, uploading took a whack of time. I also don’t much like one aspect of the upload window — if something “fails”, it gives you an error while the screen is still uploading so you can see it, but once the rest of the uploads are done, it just rolls over to a new screen showing the successful uploads. No continued error message to say “64 uploaded, 2 didn’t”. So I wasn’t monitoring as I went, and later in the subsequent phases, I’ve discovered “missing” photos and videos i.e. ones that for some reason didn’t upload successfully the first time. Not a huge problem to fix, just annoying. If the result page showed the “failed” ones, I would have fixed immediately upon upload.

I also underestimated the final size. I thought about 10K in photos, which is about right for the family photos. But with everything else on the site, there are actually 14,147 photos, 500 albums, 24 plugins and 25.1 GB of data. Wow. But that part is “done” (small caveat — there are a few months where there are some special photo collections my wife took, so I’ll need her to figure out which ones of those should be included).

Phase II: Preparing the folders and pictures for viewing

While uploading took time, it was generally mindless, something I could spend a few minutes sorting and adding in the ones to upload, and then clicking the button to start. It could take 60 seconds, or 10 minutes, depending on how many pics or how long of videos, but it was background computer stuff while I do other things.

But once the upload was complete, I also had to start playing with the files and albums online to make them presentable. Oddly enough, one of the first things I had to do is tell it to generate all the “little” thumbnail and square size photos in the background. It does it fast enough, the server I mean, while I wait. Another background task. But I need it done because the second step is to play with the display order, and while doing that, I need to be able to move files around by looking at their little thumbnails. But once uploaded, it’s ON the website, not within a file browser, so there’s no “viewing processor” running to let me see it easily. Instead, the website creates the little thumbnails as extra files and then displays them for manipulation.

In an easier world, the photos I was uploading would all have the exact same filenaming taxonomy, and thus once uploaded, I could sort by the creation date (for example) and everything would be in order.

Except some of the pics come from my DSLR. Others come from Andrea’s iPhone. Others come from a small pocket camera. And still others come from two different apps in my Android phone. Which means they all have their own filenaming convention, and they don’t “sort” easily. And if I edited them at all on the computer, with a crop for example, often the software changes the metainfo so that the file creation date is the date I did the editing, not the original “taken” date. Don’t even get me started on images sent to me by other people where they’ve named them “Dave and Janet at the lake” and then “At the lake with Dave and Janet”. The anal-retentive side of me wanted to impose a filenaming convention, sort them all, get them looking identical, and then upload.

But that is way overkill when it takes me 60 seconds of viewing on my desktop to decide on which photo I’m looking for in a batch. This isn’t a “shared” server where we all have to use the same convention. Ultimately I don’t care what the filename is, other than for quick reference. But, since I can’t rely on the filename or the creation date, I do a manual sort. Most of the time, I do a default filename sort plus the original upload order, and then I just move a few things around. Like putting all the photos of Uncle Dave together, even if I took a couple of other people in between.

However, merely putting them in a good order is not necessarily the biggest job. In most cases, since I already had a working gallery elsewhere, with the same photos already uploaded there (alas, I couldn’t transfer directly), most of the time I’m just matching the new gallery’s order to the old gallery’s order. So, again, most of the time, the order isn’t that time consuming. But for some reason, one of the ones I did today was brutal (about 75 photos in the middle of the batch didn’t get uploaded, and when I did upload them, it gave me a huge batch at the end of the collection that had to be moved — one by one — up to the right space).

At this point, I had a gallery with pictures and videos in them, sounds good, right? Except they had no captions. I mentioned in an earlier post that I was annoyed that I had to put the same info twice in the meta data — once for title so it would appear on the album page, and once for description so it would appear on the single photo pages. I reached out to the Piwigo community, and heard nothing back over the course of a week or two. Okay, I guessed I would have to paste it twice. Then it occurred to me. I had chosen a theme where I *should* be able to alter this in the template, but in reading the template files, I couldn’t find the fields to change. I was looking for something called TITLE or NAME and DESCRIPTION, since that is what the admin pages call them. So I posted on the discussion page for my particular theme, hoping successfully that the creator of the theme would respond.

Which he did. Except his first response was “Good idea, make it a plugin and upload it to the repository”. Except if I *could* do that level of techno programming, I would have already done it. I couldn’t even FIND the fields to work with. So I went looking again, and found two rows of code that looked promising and I posted an update to my question.

So I found picture.tpl and the refs to description include:

data-description=”{$thumbnail.DESCRIPTION}”

in two places. I could change that to $thumbnail.NAME. That would be telling it that the description never gets displayed, I think, just that the field will be the name/title field. It also exists in index.TPL.

Although perhaps I’d be better off trying it as “data-description=”{$thumbnail.NAME}” & “{$thumbnail.DESCRIPTION}” ??

My thought was either to change the template to always show just the TITLE field in both album and picture pages, OR to do a little replacement code to tell it that when it went to display the description, to just first copy the text from the TITLE into it. So either show the title or copy the title into the description and then show the description. Either way, the title would show. Or so I thought. Turns out I was TOTALLY off-base.

The text below the main image is set in [Github] piwigo-bootstrap-darkroom file

template/picture.tpl@L38

No idea why the variable is called $COMMENT_IMG, but it’s the description. If you replace the two $COMMENT_IMGs with $current.TITLE it should do what you want for now.

The data-description stuff is for the PhotoSwipe slideshow.

Of course. The title / description is called COMMENT. Which are not to be confused with the actual comment fields. While the TITLE field means something else. Why didn’t I figure that out on my own? 🙂

Who cares in the end? Not me, cuz I made the tweaks and damned if it didn’t work EXACTLY the way I wanted it to do. Fan-freaking- tastic! No more entering the captions twice. Whew!

Now I still had to set captions for about 10,000 photos, and while some of those were done in batches (i.e. multiple photos with the exact same caption like “Small deer at Parc Omega”), others were variations on a theme (“Day 06 – Trip to Cozumel – Water park” or “Day 06 – Trip to Cozumel – Lighthouse”). Others were individual. A fair amount of work.

The last two things I had to do before each album was ready was to test all the photos and videos to make sure they display or play properly (once in a while, a video wouldn’t play, or I had audio but no video, or the picture was upside down), and then, when all was ready, choose an image from the batch to serve as the image for the album cover.

Generate thumbnails, sort the photos, fix the captions, test the viewing, and choose a cover image. It went a lot faster than I initially thought, but it could not be done quickly or in the background. I had some decent processes in place for a good workflow, but it still required me to do a lot of the grunt work manually.

I finally finished after about two months of work, doing a few albums at a time.

In my previous post, I was working my way through Piwigo themes but mainly trying to fix a couple of plugin problems for sticky caches and metadata crashing my site. But the main focus of my attention was on choosing an actual theme.

Testing Piwigo – Themes

Did you see in the previous posts where I mentioned there were 47 available themes? Yep, I tried them all. Just to narrow it down to a hopefully small handful that I can work with, for a basic design that isn’t too intrusive and that I can get to work with multiple layouts as needed.

I know I’m going to end up mucking with the template to increase font sizes, but other than that, I’m hoping NOT to play with any setups for colours nor actual font choices. I want the chosen theme to be as close to final as possible. The batch of templates for “no” was relatively straightforward, and for multiple reasons:

• Too dark: Templates called “Dark”, “Flop_Mauve”, “Grum Dark II”, “Luciano Amodio”, “Mont Blanc XL”, “Pure_grey_plastic”, “Simple Dark”, “Simple / Simple_grey”, and “Stripped and columns / stripped black bloc”;
• Errors in display (video, photo page or main): “Elegant”, “Elegant_slick”, “Stripped”, “Stripped_responsive”, and SimpleNG (no admin.tools display); and,
• Problems with layout: “Bootstrap” (banner alignment), “HR_Glass_XL” (basic for photo page), “HR_OS” and “HR_OS_XL” (bit small, too grey), “OS_Glass / OS_Glass_Clear / OS_Glass_dark / OS_Glass_Dark_2” (dark, with confusing photo page), “Kardon” (nice colours but photo page has odd layout), “Modus” (menu layouts too close together), “SakuraBW” (dark, with fonts and sizes too small), and “Versa” (messed up photo page, strange layouts overall, and dark).

Some others were okay, but the colours were just off for me:

• Grey dragon — lots of power, but one option is too dark and one is too glaringly white;
• Pure_freaky — too strong a background;
• Pure_green_nature — too light of colour of green, and the colour of the links is harsh;
• Pure_TR_green_nature — background too distracting;
• Simple Sunset – dark, but interesting colour of orange for the links;
• Simple white — nice layout for EXIF data (to the right, like a sidebar), rest of the layouts and colours were ho hum; and,
• SmartPocket — mobile theme, which I think is overkill if I can find a simple layout design that is more ubiquitous.

One of the more interesting ones was Wipi. Strange colours, interesting use of ASCII lines, etc. It looks like it was designed by someone obsessed with ASCII graphics, or maybe the old Space Invaders, but too eclectic and dark for my tastes. Interesting, but no.

Contenders for the theme

In the end, I am left with eight possible themes that would work for my needs, with four strong candidates and four backups. The four strong candidates are “Clear”, P0W0″, “Pure_Autumn”, and “Pure_clear_blue”; the four backups are “BlancMontXL”, “Pure_sky”, “Pure_TR_Clear_Blue”, and “Vertical_White”. Let’s see how they do, starting with the backups.

A. BlancMont XL

This one is dark, which I would normally say no to immediately. There are three reasons though that I would consider it. First, a dark theme works well with astronomy photos, and I’m hoping that area of photography will grow for me in the future. Secondly, it is a pretty slick theme. Nice lines, simple layout, and the configuration is pretty basic. In fact, there are only five options — four to include a page banner on the home page, categories page, picture page, and other pages, and one to use the MontBlancXL icon set. Finally, it has a horizontal menu instead of a sidebar layout. Which makes it possible, but not likely.

B. Pure_sky

This one goes the opposite way from the previous. Light, a medium blue background overall, with clouds dotting the top. The traditional sidebar is there to the left. And that’s not configurable. Which is understandable as there are NO configuration options at all in fact. If you want to tweak anything, you have to start messing with the template. Many of the layouts I looked at want to put a frame around the picture near the end, either directly or through background shifts (i.e. like a zone for photos to separate it from the rest of the template). This one doesn’t, it’s just the photo on a plain blue background. Which works well. It’s a viable option, particularly as it has very low overhead at the top of the theme so the photos show up pretty high up…if you set them to medium or potentially even large, there will be no need to scroll as you go from pic to pic. But again, a bit basic. One thing that does differentiate it from the first one though is the first used a small portion of the screen (limited width), whereas this is fully expansive.

C. Pure_TR_clear_blue

Based on the same layouts and default settings as the “Pure” series, this one is identical to Pure_sky. The only difference is a lighter blue background, with some grey colouring, and no “sky” / “clouds” at the top. A little blander version, but perfectly fine choice if I don’t want the clouds.

D. Vertical white

This layout is quite similar to the Pure Themes, but it goes with some slight tweaks. The background is white, and it’s a bit jarring to have all that white space. Looks fine when the video is at full size or with a horizontal pic at max size, but on a large monitor, not the greatest. Plus the colours of the sidebars is a bit odd (green headings?). I can tweak a bit, but why bother? The Pure ones are closer to where I want to be.

If I had to go with one of the backups, I would choose one of the two Pure themes, just with decision as to whether I want the clouds or not. Probably not. So Pure_TR_Clear_Blue it would be.

For the strong contenders, let’s go through them in the same way.

E. Pure_clear_blue

Also based on the “pure” series, this is identical in functionality and layout to B and C above, just with different colours. The overall background is a light grey, almost dirty white. I eliminated the Grey Dragon theme in the first area because it’s background was shockingly white…this tones down all that white space, and I like it. The blue for the menu bars is almost a light pastel, bordering on grey. Again, a very crisp and clear layout, simple colours, and a better fit than B and C.

F. Clear

The layout is clean, with white and muted blues, very simple. It looks VERY similar to the Pure themes, and in the end, it is a toss up between the previous and this one, very minor questions of colour choices.

My choice so far

At this point, if I had to choose, it would be tough. E & F are better than A-D, so that eliminates the backups. Between the two of Pure Clear Blue and Clear, it’s only minor differences, and I would probably want to ask my wife for some input. Mostly though it’s about dancing on the head of a pin between two very similar themes. It’s the next two where it gets difficult.

G. P0W0

I love this theme, and I can’t entirely decide why. The layout is also very clean and simple, like six of the other seven contenders. In fact, it looks and acts like the rest of the Pure themes. But where the colours went different is where I get confused. I wanted light, right? Well, you can’t get much lighter than the lightest blue, light grey or white, which are all available in the first six contenders. But then I hit this one, the overall separation bars go for dark blue, with a lighter almost purple / mauve tint to the background, and the side bars are darker too. Not “dark” blue, but darker than the other options. But it is crisp and clean, good lines, and I like the colour contrast. In fact, if I went with this option, there are only two things I would want to change — a slight increase in font size for the various texts and perhaps an option to add a banner to the overall header.

So following the logic I’ve laid out so far, I should have a clear winner. Crisp. Clean. Simple. Low overhead. Good colour choices, not dark but not glaringly white either.

H. Pure_autumn

This is the one that confuses me completely, and I think it is because the person who designed it and chose the colours did such a great job of choosing fantastic complementary colours. Sure, of the set of eight, this has the nicest non-bland colour combos, and has been at the top of my list previously.

It goes with a light grey for a background, avoiding the white.

It adds a tree in light grey silhouette, with most of the leaves gone (autumn, get it?).

In the footer, to the right, it goes with a darker grey pile of leaves falling in front and trees in the back.

For the side bar, it goes with multiple shades of soft browns, puce, green, yellow, etc.

It is a great theme. I admire its elegance, I admire the craftsmanship. And there is no doubt that it is a better-looking theme than my previous six (the dark one is a totally different beast).

And yet, I can’t pull the trigger on it. I just don’t feel like the colours are “true” matches with my photos. If I was doing more portfolio stuff, sure, I could add the artistic flare for certain nature shots. But for the average batch of photos, the colours just don’t work.

Where that leaves me

Drum roll please….we have a winner! P0W0 is my choice.

But the saying about the “best laid plans of mice and men” comes to mind. I checked the format with my wife, made some tweaks, it all seemed good. Right up until I started editing some info in the template. I was fine with the colours, and basic layout, so that was good. The fonts were a bit small, yet easy to go into LocalFilesEditor and change the CSS a bit. Then when I was changing the Description of one of my photos, I noticed something odd. There are three active “fields” that present me with the opportunity for captions:

a. The filename — I know, I know, it usually doesn’t have anything descriptive in it, so it looks more like IMAGE_0027.JPG for example. But I *could* rename it “Skating on the canal #01”, 02, 03, 04, for example. I prefer to leave the original filename as untouched as possible, but it’s an option;

b. The title — Piwigo calls it “Title” in the internal editing, or “name” on some of the popups. When I uploaded the pictures, it put the filename there as the default. It kind of needs SOMETHING for a name, I’m not sure you can leave it blank. On the thumbnails page, it shows this field as a caption under each photo (at least in most themes) but on the photo page, it moves to the breadcrumb row; and,

c. The description — this only appears on the final photo page, and shows up under the photo.

Which basically means that if I like having “captions” below the photo, then here’s my dilemma:

• if I put the caption in the filename, it never shows up;
• if I put the caption in the title/name, it shows up on the thumbnails page in the right spot, under the photo (yay!), but on the photo page, it moves to the breadcrumb (boo); and,
• if I put the caption in the description, it shows up on the photo page in the right spot, under the photo (yay), but on the thumbnails page, it doesn’t show up at all (boo).

End result? I either have to not have a caption on one of the two areas, have a stupid caption in one of the areas (looking like a filename), or put the caption in BOTH the title/name and description. Double the work, double the pain.

Or…maybe…I could edit the P0W0 theme to put the title or description in both the Thumbnail and Photo pages under the photo? Maybe not. It appears that is based on the core PHP files of Piwigo, it’s not a separate template (TPL) file. Well, crud.

Sooooo, since I want to do something other than entering the captions twice for each photo, what if I took a DIFFERENT theme, one that would allow me extra configurations, and then edit their CSS to change the colours to look like P0W0? In other words, what if I took a theme I rejected (previous post) as being too dark / weird / unusual, or colours (above) but which puts captions in the right place, and then I could just focus on fixing the colour parts I don’t like?

Worth a consideration, at least, right?

Re-testing themes for titles/descriptions

All of the PURE themes were out, right from the start. Like P0W0, there is no real config and it puts everything the same place P0W0 does. So no help there. Nine themes down. Other themes with the same problem include: Clear; Dark; 3 x HR; 5 x OS; Kardon; Grum_dark_II; Sakura_BW; 5 x Simple; Sylvie; Versa; Vertical_white; Wipi; SmartPocket; BlancMontXL; MontblancXL; and Modus.

Elegant and Elegant_slick were different…it got rid of the thumbnail page, and put it under the photo as a carousel/slide row. The Description went ABOVE the photo (not under), but each of the little thumbnails had both title and description on them when you ran the mouse over. Interesting, they had some other basic configs but meh.

Flopmauve + Luciano  also merged title and description on the thumbnails page (which would mean I could use one or the other) but it was only on mouseover.

GreyDragon takes a very different approach to layouts, and uses tabs for lots of things. Not entirely sold on it, but it comes with a HUGE set of configurable options. Lots of good things in there, none of which solves my caption problem, at least not without mouseovers or popups.

The three Stripped themes weren’t all created equal, and if I dumped the responsive and columns one, the remaining “default” one was actually great for solving the problem — on the config settings, there was a clear option to specify what to put below the photo — a caption of the Title/name field or the Description field. Perfect, right? Except it messed up the album and thumbnail pages, and no matter what I did to them, I couldn’t get it off a pre-set five columns per page layout.

Which leaves me either sticking with P0WO or going with Bootstrap Darkroom. Bootstrap Darkroom? Yeah, it actually comes the closest. And with a bit of tweaking, I got the colours and layouts looking correct. I didn’t find any solution in the template other than pasting the info twice (title and description), but it’s working. Mostly though I just couldn’t resist the ExIf sidebar for the layout.

I have a theme. I’m relatively good to go.