Drop Shadows on Featured Images

Hi there,

Do you have a live link with an example? I could take a look at your structure and make it work as expected. Generally, the native block featured image already adds some classes, so you would likely not need to add additional classes.

Could you also share a screenshot of how it looks like when you try to add it? Please share as many details as you can, so we can quickly find a solution.

Hi Felipe,

Thanks for the reply. My site isn’t live so I don’t have a link. I’ve currently gotten around this problem by not constraining the size of the featured images, and that fixes the dropshadow issue but isn’t quite the design I’d like.

So, more details. I created a Test Page to recreate the issue (see image below, my actual post images are blurred out into colored blocks). There are two featured images, one that is in landscape orientation and another that is in portrait orientation. I’d like all of the images to be constrained to a max of 200×200 pixels (most of my featured images are square, but these two aren’t), so the featured image block is styled to have Original Aspect Ratio with W=200px and H=200px and Scale=Contain. I want the dropshadow only around the image portion. Also, I don’t want *all* featured images on the entire site to have this shadow, only those within a few specific query loops on the site.

To get the dropshadow, I added a dropshadow class in the ADDITIONAL CSS CLASS(ES) field when styling the specific Featured Image block in my query loop, and in the site’s Styles -> CSS -> Additional CSS section, I have the following:

.dropshadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

But it seems that the class gets attached to the <figure> tag in the HTML rather than the <img>, and when the image isn’t square you get this result.

So, how do I target just the img in a figure in only those Featured Images within certain query loops on my site?

Thanks!

Hey @ajwe! Can you try changing the css to something like this and check?

.dropshadow img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

Hi @properlypurple Kavya, thanks for the reply. Unfortunately, it doesn’t seem to have made any difference (& I checked the HTML to make sure the new style was there). Here’s what the generated HTML looks like for one of the images (I’ve replaced the filenames to my local site with ‘…’).

<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%">
<figure style="width:200px;height:200px;" class="dropshadow wp-block-post-featured-image">
<a href="..." target="_self"  style="height:200px">
<img fetchpriority="high" decoding="async" width="1200" height="902" src="..." class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="..." style="height:200px;object-fit:contain;" srcset="....jpg 1200w, ...-300x226.jpg 300w, ...-1024x770.jpg 1024w, ...-200x150.jpg 200w, ...-768x577.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
</a>
</figure>
</div>

I suspect the issue is something simple like you suggested; the class “dropshadow” is applied to the <figure> tag if you put it on the Featured Image block, so how do I get it to apply just to that img? I’ve tried a bunch of combinations & tried exploring in Chrome’s “inspector” but my CSS is rather rusty. (In this example, I had the “resolution” set to full, but even if I change it to “medium”, which is more appropriate for the small images, there’s no change.)

• This reply was modified 10 months, 2 weeks ago by ajwe.

I think I’ve narrowed the issue. It seems to be the following:
style="height:200px;object-fit:contain;"

that is causing the issue. This is appearing because I have the attributes on the Featured Image set to: Original aspect ratio, width 200px, height 200px, scale Contain.

And just as a reminder, what I have here is featured images that are either square or portrait (rectangle) or landscape (rectangle) and I want them to fit within a fixed size (200×200, say) so that they’ll all line up neatly on the page, but have the dropshadow just apply to the img.

See this codepen example, if you remove the style snippet the shadow seems to be applied properly (but I don’t know if that’s necessary for the proper scaling to work).

Hey @ajwe! It looks like the ‘Original aspect ratio’ option uses the object-fit:contain; css property. Since you’re fitting this into a 200×200 box, you should try selecting the Square - 1:1 option under Aspect ratio, which will fill the box with the image, and the shadows will look right.

Hi @properlypurple Kavya,

If I make Aspect Ratio “Square” and leave the Scale set to “Contain”, then the problem remains the same. The shadows are around the square box but the image is rectangular within the box.

If I make the Aspect Ratio “Square” and change the Scale to “Cover”, then the image fills the square and the shadow matches the image, but then I’m not showing the whole image at its actual shape, which is very important for my application (displaying artwork thumbnails, where customers need to see the shape of the art). (Setting Scale to “Fill” is worse, as it stretches the image to fit a square.)

The HTML is slightly different by setting Aspect Ratio to “Square”:

<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"><figure style="aspect-ratio:1;width:200px;height:200px;" class="dropshadow wp-block-post-featured-image">
<a href="..." target="_self"  style="height:200px"><img fetchpriority="high" decoding="async" width="300" height="226" src="...-300x226.jpg" class="attachment-medium size-medium wp-post-image" alt="..." style="width:100%;height:100%;object-fit:contain;" srcset="...-300x226.jpg 300w, ...-1024x770.jpg 1024w, ...-200x150.jpg 200w, ...-768x577.jpg 768w, ....jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></a></figure></div>

I’m not certain, but in playing around with a bunch of things on the codepen site, it seems to me that the issue may be that WordPress is writing out width="300" height="226" (the physical size of the image it’s loading) in the img tag, even though that’s not the final size the image is rendered as.

Hey @ajwe! Thank you for the additional investigation.

The nature of the ‘contain’ option is that the browser will try to render the entirety of the image inside a box, while the box is rendered in the specified size.

I did some more digging, and it looks like you might have success with a css filter, with this css instead of your current box-shadow

.dropshadow {
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));
}

Hi @properlypurple! It looks like that did the trick, and it seems that this feature is supported on all modern browsers (anyone still using IE can deal without the drop shadow! ?? ).

Thanks so much, Kavya, for digging into this!!! I’m not sure I’d have ever found the solution.