No plug-in and no coding UX/UI for images in WordPress

Here is a better, more in depth and technical article about attachment pages, and creating modern custom version:
Building dynamic block-based attachment templates in themes

And here are my thoughts form more generalized point of view, closer to UX. While also introducing the subject topic to average but curious internet content consumer that has no “behind the code” knowledge.

To simplify maintaining my WordPress installation I avoid using plug-ins. More on, since introduction of full site Block Themes, and recent improvements in core WordPress. Like GRID layout “auto” mode for post template in Query loop block.

In addition to making UI/UX more mobile friendly or “mobile first” my goal is to improve the layout to achieve efficient monetisation. Balancing those two. And keep low data footprint on client side first for performance and UX (user experience).

And I’m on to something in these previous posts:

• Single image post pseudo carousel query loop (experiment 2)
• Gallery image post pseudo carousel query loop (experiment 3)

Where I use a Query loop to create a pseudo carousel of images from a related posts holding single image “wrapped” with category. And another similar example I’m using a Query loop to get in a single post of a image gallery.

To get this presentation to work, two query loop blocks that work independently. I peeked in the “code” with code editor and in each of these posts changed “query_id” to “unique” so that each one loads independently. Since default “query_id” assigned is always “0”.

What is available in WordPress

First thing (for me at least) is that the default auto-generated image (media) attachment page is bad for viewing the target media, but useful as user/website visitor interaction or voting in form of leaving a comment. As the comment form is available on attachment pages.

Fixing without coding attachment page

Default image size is the issue, it is too small. I’ll ignore the fact that size is controlled in dashboard/settings/media, leaving it as it is.

I’ll try another approach. That is, publish/post images one per post in a dedicated category. That way I can use customized query loop to fetch images and get navigation generated by WP. Also, with a customized template it’s possible to further customize presentation for image files. Previously, in old (legacy themes) that was handled by post types. Where in block themes post types that doesn’t exist.

In posting/publishing workflow for image type posts it’s required to select-specify specialized template under the post properties tab section in the post editor.

Here’s how I’ll do it

-and why.

I will add another sub site here for dedicated images gallery. That way that site can have it’s dedicated “runtime namespace” as application while maintaining the top domain external approvals for monetisation.

There I will upload most of photos and images with higher files resolutions presets under media settings for that sub site.

In my experience with WordPress using non commercial themes and extensions I found “Twenty twenty-one” to have nice solution for image attachment pages. And I’ll use it for dedicated image galleries website.

Another benefit having dedicated website is the simplicity of maintaining a posts chronological ordering and navigation logic through that context. That is another reason to have a WordPress multisite network hosting sites as a subdirectories.

(Later that afternoon) I did some testing I found that even with “Twenty twenty-one” theme the image size on the attachment page is “locked” to content width. And I went further into the “image.php” file source code to “unlock” that feature, just adding CSS class “align wide”.

Because I want to avoid default behaviour when clicking on image opens new browser tab with full resolution image outside the website page, as some browsers handle that event as file download. I want to provide a highest possible image size render inside webpage, and prevent full size image downloading. I want to handle access to hires images differently.

A few days later

First to remember is that here the default WP attachment pages are disabled. That changes the default behaviour of image link “open attachment page” option into “open file”. And another thing is that “open image file” link is hardcoded (me thinks) in attachment page. And I don’t want any of that behaviour in UI or site navigation. I want to keep the user always inside the webpages, unless user initiates navigation by browser functionality, like open image in new tab, or save as.

I will make it very tedious for users to “save as” high fidelity assets from this website, but not impossible (right away). To preserve the artistic uniqueness and value for collectors.

Other words, moderate assets farming from hoarding into curated assets collecting.

Way of doing it is to keep an hi resolution (“full size” in WP terms) version of image in a dedicated customized post that is retrievable with a specialized query loop block with targeted post template designed to retrieve a low fidelity preview of an asset and provide a link to a target image post.

Inside code

So, to satisfy my curiosity, said “Hold my beer” and went full nerd into themes source codes php files to find out what’s up.

About the “Twenty twenty-one” attachment page. I did get really curious how it’s made. And I found that it is using “image” posts format that renders higher resolution images.

Now posts formats are not supported in all themes and sometimes completely excluded (deprecated) in block themes.

For test experiment I created a “functions.php” file for a block theme that doesn’t use one like in case of “Twenty twenty-three”.

I copy-pasted from “Twenty twenty-one” “functions.php” just the section that defines posts types – formats support into my test theme. And that allowed for that block theme a post format selection inside post editor. There I stopped with the source code exploration as it was enough to set the way point on how to implement definitions for custom rendering presets for specific content types.

Ok. Update to the above, for displaying attachment page post format – type is irrelevant. There is an “image.php” file in the root of theme directory that is responsible for handling image attachments. So, adding that file to other theme directory adds same behaviour like in “Twenty tweny-one” theme even to block themes. In case block themes the layout is missing, but at least the PHP code works by default.