Archived topic
Single Post Image Border and Featured Image Shadow
14 replies · Started by Rohan Verma on August 27, 2020
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
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
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.
One more thing. The archive and search result thumbnails don't have a shadow. How to get that?
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/
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);
}
Search and archive is fixed now.
But why you can't see featured image? Check this is the featured image for that post.
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/
Yes. That's the featured image. And added from Features Image metabox.
What's wrong with it? Can you tell me.
If that won't be a featured image, then how it will show in the thumbnail?
Check this: https://www.gadgetheadline.com/?s=facebook
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.
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/
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
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?
Can you open a new topic for the new question?
Thanks :)