Quiet is what I’ve been on this site and on social media for the last few weeks. That’s probably come as something of a relief to some and it’s probably passed completely unnoticed by the overwhelming majority of everyone else. I’m pleased to report that the period of quietness will likely be coming to an end and I’m more pleased to report that it hasn’t been due to anything serious like illness or family matters.
No, this was all technical crap that you couldn’t be less interested in but which – because this is a blog post and it’s the sort of thing that traditionally (as far as the fairly recent phenomenon of internet traditions goes, anyway) gets stored away in virtual diary form – I’m going to briefly explain anyway. I strongly recommend that you don’t read this. It’s so dull. It’s of no interest to anyone except someone possibly wondering why their WordPress site isn’t showing the lightbox on custom post types, but there’s a good chance this only happened to me.
When I started this version of the site (which is a WordPress site) I made the decision that there would be two types of posts: custom, hierarchical ones that would make grouping for travel-related content easy (portfolio posts) and flat-content posts (blogs) that would serve for technical updates, general news, anything not specifically related to travel and photography and not easily fit within a hierarchy. So, posts like this one where I’m giving some account of why I’ve been quiet are blog posts (full list here: Blog), while the vast majority of updates are travel posts and are subsequently portfolio items, the top level of which can be found here: Travel & Photography. From there you can hit cruises, then a cruise line, then the destinations, for instance. I’ve also made it easy to reach this same information through the site menu in a somewhat more manual style but that’s because I’m Mr Helpful.
Okay, so that explains the types of posts. It also explains why I made another decision to buy a theme that supported and emphasised the content of the hierarchical post type. That’s what you see on this site… sort of. It’s been modified by me over the years in order to address some changes I wanted so it’s an unsupported theme because some of those modifications are in the base code of the theme (which you shouldn’t do but there were things I needed that couldn’t be achieved without some hacking) while most are custom plugins I’ve written or they’re code snippets (which is much better).
So far, so… okayish. You shouldn’t hack code quite the way I’ve done but it all works fine. Worked fine.
WordPress used to have a standard editor for editing posts but it brought in a new editor a few years ago – Gutenberg – that you could enable/disable for standard post types (blogs) but which didn’t affect anything custom (portfolios). For a while I had it disabled in blogs too because it wasn’t fully-featured enough but since that’s no longer the case I made the switch a year or so ago and have subsequently created blogs using Gutenberg and portfolios using the bog-standard HTML editor. I’m happy with HTML so it’s suited me fine but I’ve come to see how useful Gutenberg is too.
I also have a Jetpack subscription to take advantage of some features it provides: image hosting on a Content Delivery Network for speed and Tiled Mosaic gallery images for layout.
And here’s what happened. WordPress updated recently. Everything looked fine on the site except I suddenly noticed that clicking on an image wouldn’t bring up the lightbox for EXIF data any longer, and simply reloaded the page, but only on the custom post types. Testing on blogs showed it worked fine but all those travel posts stopped. I suspected some Javascript event handlers were breaking somewhere but testing HTML generated by blogs and portfolios showed they were producing entirely different code than had been output previously. It looks like the bits of code logic that were taking attempts to add galleries in one type of post, creating shortcode elements, then rendering them as HTML were working differently because some conversion process (assuming there’d been one during the update) hadn’t updated the custom post content.
My options were to either try to override the rendering to get the right sort of output (tricky and prone to problems down the line) or to convert all my travel posts to something that worked with Gutenberg (time-consuming). I went the latter route but I didn’t want to actually create new posts, though, so I looked at whether I could enable Gutenberg for my custom type. It turns out I could: that was one snippet of code. My posts could now be edited in Gutenberg but couldn’t see the taxonomy hierarchy or apply tags as they used to. A second snippet sorted that out.
function nb_portfolio_block_editor( $args, $post_type ) {
if ( 'portfolio_item' === $post_type ) {
$args['show_in_rest'] = true;
if ( empty( $args['supports'] ) || ! is_array( $args['supports'] ) ) {
$args['supports'] = [ 'editor' ];
} elseif ( ! in_array( 'editor', $args['supports'] ) ) {
$args['supports'][] = 'editor';
}
if ( empty( $args['taxonomies'] ) || ! is_array( $args['taxonomies'] ) ) {
$args['taxonomies'] = [ 'post_tag' ];
} elseif ( ! in_array( 'post_tag', $args['taxonomies'] ) ) {
$args['taxonomies'][] = 'post_tag';
}
if ( empty( $args['taxonomies'] ) || ! is_array( $args['taxonomies'] ) ) {
$args['taxonomies'] = [ 'portfolio' ];
} elseif ( ! in_array( 'post_tag', $args['portfolio'] ) ) {
$args['taxonomies'][] = 'portfolio';
}
}
return $args;
}
add_filter( 'register_post_type_args', 'nb_portfolio_block_editor', 20, 2 );
function nb_taxonomy_args( $args, $taxonomy ) {
if ( 'post_tag' === $taxonomy || 'portfolio' === $taxonomy) {
$args['show_in_rest'] = true;
}
return $args;
}
add_filter( 'register_taxonomy_args', 'nb_taxonomy_args', 20, 2 );I could now create and edit all my posts with Gutenberg but they were all still in the old format which WordPress was rendering the old and still broken way. Next step was to add a plugin to enable a lightbox to work and stop the redirecting when clicking on an image. It wasn’t great because it fetched the full image instead of the CDN-hosted smaller version so added load to the website, but whatever, just a short-term fix.
The great editing then began.
- Edit the post. WordPress recognised that the custom post type was in standard format but that Gutenberg was supported so offered a handy “Convert to Blocks” option.
- Click “Convert to Blocks”. This replaced old HTML markup with block markup and changed galleries subtly too. Subtly broken. The old markup was a piece of shortcode with an indicator that I wanted the images displayed in mosaic style but that wasn’t recognised in the standard conversion because it’s a Jetpack feature. All the galleries – and on some pages I have dozens of galleries – were standard WordPress tiled galleries. If all the images in a gallery are in portrait mode then it looks fine; if all the images in a gallery are in landscape mode then it looks fine; if there is a mix of portrait and landscape then one type of pictures ends up getting cropped to fit the same format and that’s fine if you don’t care about the gallery thumbnails. But I do.
- Click on the gallery, click “Edit Gallery”, click “Update Gallery“. This fixed a small problem with the conversion missing image sizes. Just the act of updating without making any changes sorted out the HTML.
- Click on the gallery, click “Transform to Tiled Gallery”. This fixed the next issue which was adding the correct Gutenberg-style markup correctly, something likely done fine when creating a gallery that way from scratch but overlooked during the initial conversion process. However, the gallery would only appear in the editor and not on the published post because it was missing yet more markup to indicate proper widths and heights. So, finally…
- Click on any image, move it, move it back. You can rearrange images in a gallery and doing so causes the mosaic code to recalculate widths and heights for the markup that’s ultimately needed to get the photos to appear when published.
Let’s say fifteen galleries on average per post (some are way more than that). That’s seven clicks per gallery so one hundred and five clicks per post plus a few others for the initial conversion. Multiplied by four hundred and seventy four, which is how many travel posts I had to convert. With all that done the lightbox plugin was removed and we’re back to mostly how it used to look and act.
A lot of work but it’s done now and I’ve got a better understanding of how WordPress handles custom post types, more understanding of hooks and filters and snippets, some new ideas about changes I can now add into my posts, and something more compatible and future-proof with updates.
Normal service of travel post updates will be resuming shortly.