Enlarge image options

What follows are 8 options I explored in an attempt to provide CHC website viewers the ability to get an enlarged version of photos when they want to see more detail. So far there are no perfect solutions but probably a couple workable options. But since we might find uses in other scenarios for some of the “thumbs down” options, I’m covering everything I looked at.

To proceed, put your typical website viewer hat on and review the following options to see what you think. Don’t second-guess your feedback, we may be able to modify some of these options to make them more desirable with a change that comes to mind; at least ask before dismissing. (Note: whichever option we choose, it has yet to be thoroughly tested in all browser types. That would be the next step.)

Option 1. Use a “Gallery block” for each image

There are several WP editor block types that can be used to place images in pages/posts. We’ve been using the basic “image block” for most photos. Another is the “Gallery block”, so I tried it — it might have an image magnifier built-in. Unfortunately, the gallery block with a single image doesn’t do anything — in a way not surprising, after all, a gallery should have more than one image in it. Further, image captions in gallery blocks are styled very differently from regular image captions as they are superimposed over the image. Bottom line, this isn’t our solution.

Check it out. Clicking on the image does nothing. Gallery block verdict: Thumbs down!

Option 2. Use a “slideshow block”

The WP editor’s slideshow block provides an image carousel, obviously intended for viewing a series of photos. However there is no benefit for our purposes — it doesn’t magnify the images at all and there are distracting previous/next arrows on both sides of the image, which are obviously there to navigate between images when used as intended with more than one image. But who knows, there may be use for a slideshow somewhere on the site at some time.

Try the arrows out. Verdict: possibly entertaining to a cat but not our solution. Thumbs down!

  • Blue couch.

Option 3. Use a “Cover block”

Yet another type of image block the WP editor provides is called a “Cover block”. It is designed to support “cover photos” with superimposed text. It includes a control to darken the photo to help the text stand out, and an option to scroll the page over the photo behind the text window (enabled here) — freaky! … I didn’t really expect this to work for our purposes but it is interesting to know what this block does.

Nothing to try, you’ve already seen the scrolling effect by simply moving down to this option. Not what we were looking for, but entertaining. Verdict: Thumbs down!

Text over image.

Option 4. Enlarge photo using CSS :hover

Using some CSS style code, an image can be enlarged when the mouse cursor hovers over it. There are two drawbacks: 1) it doesn’t work well on touch screen devices (no mouse to hover), and 2) the effect can look weird because the enlarged photo tends to pop-out of the page and may look out of place — as if the layout broke. More concerning, photos could be popping-up by accident as people run their mouse cursor down the page, which might come across as bizarre.

See the effect by hovering over the image below … (setup here only to work on laptop/desktops.) Verdict: not without merit but possibly weird. Thumbs down for now.

Bedroom 2 stone arch.

Option 5. Link to Custom URL

The WP editor’s basic image block contains several optional “Link Settings” for the associated image (we haven’t been using these options). One of them is the “Link to Custom URL” option. It allows you to make the photo a link to any URL. When you click/tap on the image, you go to that URL, which can be any destination on the web, including a page or post on your website. For our purposes, this could be used to specify a page in the CHC website that we created with only an enlarged version of that image. The advantage is that since it is a regular website page we created it is totally customizable, including the ability to add a return link back to the starting page as well as any other content desired. This sounds ideal.

The downside is the work effort and complexity. Making an additional special page for each photo that we want viewers to be able to enlarge, as well as editing the CSS in several places to make it all work is tedious and time consuming. While the end result is ideal, the effort doesn’t seem practical unless it was limited to certain album pages. Even then, it is a complicated process — not something the website owner may want to learn or do. We probably need something easier/routine.

Verdict: Probably too much work to be BAU. Regardless, as a proof of concept, the photo below is setup this way, so click on the photo to try it out …

Bedroom 2 stone arch.

Option 6. Built-in “Link To Attachment Page”

Another of the WP editor’s basic image block options is “Link to attachment page”. When this setting is enabled for an image, clicking/tapping on the image takes you to a little known WP built-in “attachment page” type that displays the image with some of it’s data from the media library. It also has navigation controls so you can browse the rest of the media library images from that same page.

Although not well-documented, since this is an actual page type that WP includes by default, it can be styled/adjusted with the same CSS file we use to customize the theme. For instance, the media library navigation controls and image data can be hidden via CSS so only the photo itself shows. (We don’t want people looking around in the media library anyway.) We could also drop in raw text instructions via CSS explaining how to get back to the source page — “click the browser’s back/arrow button to return”. But because we can’t access the WP built-in attachment page layout directly we can’t edit-in an actual link back to the source page — CSS by itself can only drop in raw text before or after something on a page. Further, if you accidentally click on the photo in the attachment page you are taken to yet another page — a plain browser page with simply the raw photo, basically the “link to media file” option covered below. That isn’t a technical problem, but having two levels of photo pages someone might accidentally stumble into makes this option possibly confusing and unnecessarily redundant.

Attachment page option verdict: Try it, almost there but possibly confusing.

Green couch.

Option 7. Link to Media File

As mentioned in Option 6, the WP block editor’s image block also has an option to “Link To … Media File.” When this option is chosen for an image, clicking on that image in a post/page brings up a new page that simply contains a view of the raw image file as stored in the WP media library. There is no text, image data, or navigation controls. But the cursor in this page doubles as a “zoom-in/out” control, and therefore provides what most viewers really want — simply a large zoomable view of the photo. (As noted above, this is also where you end up if you click/tap the photo itself in the attachment page as covered in Option 6 above.)

The downside is that there are no instructions on this page as to how to get back to the website page you came from. That’s because it is just a browser view of that raw image file, there’s no underlying CHC site page/post to modify. Power users will know to use the browser’s back button/arrow to get back to the original page, but less experienced people may not know what to do, feel lost, and simply leave your site.

Try it out by clicking on the image below. To get back to this page, use the browser’s back/arrow button.

11th Century Bridge across the Orbieu River leading to the plus beau village of Lagrasse.

Option 8. Link to media file, but with instructions. The winner?

This is an enhancement of Option 7, Link to Media File. As mentioned in Option 7, there are no instructions how to get back to the page you came from in the Media File page view, and none can be added because it’s not a WordPress web page we can modify, just the browser’s view of the image file itself. The viewer has to know to use the browser’s own back button. As said before, power users will know this, others may feel lost.

However, what we can do is use CSS to add an instruction on this starting page so at least viewers are informed to use the browser’s back button before they go to the media file view.

I tried a variety of things, trying to assume a non-power user’s perspective, and settled on this approach. >> ADD SOLUTION <<

11th Century Bridge across the Orbieu River leading to the plus beau village of Lagrasse.

(end)