[Resolved] Single Post Image Border and Featured Image Shadow

[Rohan Verma]

Hi team,

1. I want to implement this type of code for my single post images (single post image border). Should not be applicable for featured images.

.post-content img {
    border: 1px solid black;
}

2. Need featured image shadow effect on single posts and all featured image thumbnails.
Example Screenshot: https://prnt.sc/u6xql0

[Leo]

Hi there,

1. Try this CSS:

.entry-content img {
    border: 1px solid #000 !important;
}

2. I clicked on a few single posts and don’t see a featured image in any of them.

This should work for the WPSP featured images:

.wp-show-posts-image img {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

You can tweak the shadow using this site:
https://www.cssmatic.com/box-shadow

[Rohan Verma]

The image shadow is working.

But the image border is applying for featured image. I don’t to display border for featured image in single posts.

Check this article: https://www.gadgetheadline.com/turn-off-active-status-facebook-app-web/

Here I have shared multiple inner content images like screenshots. I want those inner images within a border. Not for the featured image.

[Rohan Verma]

One more thing. The archive and search result thumbnails don’t have a shadow. How to get that?

[Leo]

I’m not seeing a featured image in the linked post.

A featured image is an image added with this method:
https://docs.generatepress.com/article/adding-featured-images/

[Leo]

This should work for search results:

.post-image img {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

[Rohan Verma]

Search and archive is fixed now.

But why you can’t see featured image? Check this is the featured image for that post.

https://prnt.sc/u7m8ue

[Leo]

This is the image you are referring to?
https://www.screencast.com/t/jWzeCOVxOKO

That’s not a featured image as far as I could tell – it’s just a normal image added in content.

Is it added using the featured image metabox shown here?
https://docs.generatepress.com/article/adding-featured-images/

[Rohan Verma]

Yes. That’s the featured image. And added from Features Image metabox.

What’s wrong with it? Can you tell me.

[Rohan Verma]

If that won’t be a featured image, then how it will show in the thumbnail?

Check this: https://www.gadgetheadline.com/?s=facebook

[Leo]

Ok now the featured image is actually showing – it wasn’t before when I took the screenshot here:
https://www.screencast.com/t/jWzeCOVxOKO

You now have the same image twice.

The featured image doesn’t have the border added though:
https://www.screencast.com/t/NEAzP2msni

My CSS doesn’t apply to the featured image.

[Rohan Verma]

Yes. I don’t need a border for featured images.

But not all the content images are showing in border in the single post. Just check that.

https://www.gadgetheadline.com/turn-off-active-status-facebook-app-web/

[Leo]

Yes. I don’t need a border for featured images.

There is no border on the featured image already. My CSS doesn’t apply to the featured image.

But not all the content images are showing in border in the single post.

Edit the CSS in #1 here:
https://generatepress.com/forums/topic/single-post-image-border-and-featured-image-shadow/#post-1420689

[Rohan Verma]

Yes. Now, it’s working fine. Thank you.

Can you guide me how can I use a featured image in middle of paragraphs according to my choice?

[Leo]

Can you open a new topic for the new question?

Thanks 🙂

[Author]

Posts