About a month ago I noticed a problem with my WordPress gallery block images that are captioned. I’m referring to the WordPress core gallery block. I searched the internet and couldn’t find anyone complaining about this. I had to start digging around in an effort to find a solution.
I deactivated plugins and changed to a default theme. I also removed some custom CSS in my child theme referencing the gallery block. These actions did not help. Because I use the excellent Firelight Plugin (Formerly Easy Fancybox) for lightbox features, I contacted their support team at WordPress.org, thinking this plugin might be causing the issue. Their support quickly confirmed that this is “unrelated to Firelight, which is just for opening the images larger”.
Firelight support kindly provided me with some CSS to remove the blur.
Gallery Block Custom CSS Code – Remove Blur from Images
/* Remove blur effect from gallery captions site wide on frontend */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
display: none;
}This did remove the blur but left the white captions without a sufficiently dark transparent background. This meant the captions would be difficult to view even for website visitors with good eyesight.
WordPress gallery block images with blurry images
Here is an example screenshot showing the blurry images before custom CSS was applied.
In my opinion, this is not satisfactory visually or from an accessibility point of view. The default text size for the captions is 13px whether on desktop or mobile. Any text size smaller than 16px on a mobile will be noticed by Google’s crawler and this may lower ranking of the page or post in the SERPS.
This prompted me to come up with the following additional custom CSS, which I feel is satisfactory for visitors on desktops and mobile devices.
WordPress Gallery Block CSS Code to Further Style Captions
/* Larger gallery block captions on wider screens */
@media only screen and (min-width: 922px) {
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
font-size: 0.9em;
line-height: 24px;
padding: 0.5em 0.5px 0.5em 0.5px;
background: rgba(0,0,0,0.55);
}
}
/* Smaller gallery block captions on narrower screens */
@media only screen and (max-width: 922px) {
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
font-size: 0.816em;
line-height: 18px;
padding: 0.3em 0.2em 0.3em 0.2em;
background: rgba(0,0,0,0.55);
}
}The result on desktop view
The result on a narrow screen
How does it appear in the post editor?
Not nicely. In the post editor the galleries show up exactly like in my first screenshot shown above.
WordPress Gallery Block – Live example with my CSS customisation
Click on or touch an image to cycle through the gallery.
On my desktop, the image captions display with a font size of 19px while on my mobile the captions display at 16px.
Check accessibility of your web page on mobile
If you change the font size of the WordPress gallery block captions, you should check the captions display at no less than 16px on a mobile device. Your website setup may differ from mine, and you may need to adjust the font size for mobile devices. You can easily do this using a font size add-on for your browser. I use the WhatFont add-on for Firefox, and this adds a WhatFont button icon to the browser’s toolbar. The associated screenshot shows what its use looks like in the Firefox browser at a screen width of 350px.
Just Google WhatFont, followed by your browser name, to download the correct add-on for your browser.
Additional CSS Code adds a 5px radius to gallery block image thumbnails
I like my WordPress gallery block images to have a small border radius. It makes the pages look a little less boxy.
/* Add a 5px border radius to gallery block images */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
border-radius: 5px;
}I could set the 5px radius for the gallery photographs in the customiser, but with this CSS code I don’t have to remember each time I create a new gallery.
WordPress Code Block – Adjust font to show as 18px on Desktop and 16px on Mobile
On an aside, the default font size for the WordPress code block is 15px. That may be fine for website visitors on a desktop but not so accessible for mobile users. Here is my custom CSS to achieve better accessibility of the code block.
/* Adjust code block font size */
.wp-block-code code {
font-size: 0.85em;
} The blurred effect in the WordPress gallery block appears to be by design
Imagine my surprise when someone, very helpful, chipped in on my support question on the Firelight community support forum on WordPress.org with the following comment: this blur style was added to the gallery block in WordPress core. So it turns out that I am not the only one complaining about this “new feature” in the WordPress gallery block.
The commenter provided a GitHub link, where this was under discussion earlier this year.
I am no expert in following threads on GitHub. Reading through the thread, it does appear that the feature I am complaining about is indeed in the WordPress gallery block by design. I cannot tell from the thread when this was introduced into WordPress. It was certainly in a recent version. I suspect that this change came about in either WordPress 6.7 or 6.7.1. The release dates for these WordPress versions were 14 November 2024 and 21 November 2024 respectively. Source: Release Archive – WordPress.org.
WordPress gallery block instructions on WordPress.com
This “new feature” is now documented in the WordPress.com gallery block instructions. Here is a link to one of the screenshots on the above URL, which clearly shows the image blur around and above the image caption.
CSS Coding
Disclaimer: I am probably at an intermediate level as far as CSS coding is concerned. I do not necessarily consider the custom CSS examples above to be examples of best practices in CSS coding.
Let me know in the comments section below if you have been affected by this issue. I would love to hear from you.
Subscribe to future posts by email. No spam, just an email when a new post is published. View the posts.
Like this using your WordPress.com account
Related articles in Computers and Internet. View all in this subject.
Darken Image on Hover – Simple With 2 Blocks of CSS – No Plugin Required
Add Another Admin To a Facebook Page in 2024
Teletex System of Document Transfer Abandoned in The 1990s
Thank you so much for this fix!!! I cannot believe that WP would automatically embed this “blur the image if captioned” feature (useless in my opinion) in a release without the option to de-activate it. You are a life saver!
I am so pleased it helped. I am annoyed that I could not find any mention of this in the last two WordPress documentation releases, thus causing me a lot of work troubleshooting a non existent fault on my website.
Thanks Andrzej, your solution works like a charm!
Great. I’m pleased it works, Simon.
You are very welcome, Andrew. I’m pleased the post was helpful.
Thank you so much for this post. I totally hated that blurry caption, and with your code I was able to make it more visually appealing. Thanks!