#50by50 #23 Part 4 – Fix my digital photo gallery – Test Piwigo themes
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.
