Hiding the featured image solutions

[Paul_Hill_Guitarist]

Hi,

I received a Google Search Console error email stating – Missing field “thumbnailUrl”.

After Googling, I found an article that recommended setting a featured image for the page or post as Rank Math uses this to generate the thumbnailUrl. I do not currently have featured images set (I presume I should?) as I don’t want the image at the top of my posts. This was something I decided a long time ago and I had forgotten all about the featured image setting.

I have tried adding CSS to hide the featured image, although my attempts seem to be failing, so thought I would ask if there is a recommended method of doing so as I cannot find any information.

Thanks!

[prakash_s]

Hello Paul,

Thanks for writing to us.

You can use this custom CSS code to hide the featured image of the post from the blog, archive, and post details page.

.blog article.post.type-post.has-post-thumbnail img, .archive article.post.type-post.has-post-thumbnail img, .single-post article.post.type-post.has-post-thumbnail img {
display: none;
}

In case you don’t want to from every page you may use these CSS codes.

Blog Page

.blog article.post.type-post.has-post-thumbnail img{
display: none;
}

Archive Page

.archive article.post.type-post.has-post-thumbnail img{
display: none;
}

Single Page

.single-post article.post.type-post.has-post-thumbnail img {
display: none;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector. In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[Paul_Hill_Guitarist]

Thanks for the information. The CSS solution has worked perfectly. I have been staring at a computer screen all day and my own CSS solution failed due to tiredness I think. I will check out the links you sent too.

[prakash_s]

Hello Paul,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

[Paul_Hill_Guitarist]

Will do. Thanks again!

[marc_a]

Hey Paul,

You’re welcome!

[Paul_Hill_Guitarist]

Hi again,

I added:
.blog article.post.type-post.has-post-thumbnail img, .archive article.post.type-post.has-post-thumbnail img, .single-post article.post.type-post.has-post-thumbnail img {
display: none;
}

to the global CSS and the featured images are not showing. I now have a problem that images on blog posts are not showing, or at least I noticed this on this page - https://guitartheoryandtechniquebook.com/diminished-7th-arpeggio-shapes/.

I have tried deleting and adding images back in to the post, adding new sections, different images, etc., although no images show on the page using the image element when the global CSS entry is added. If I delete the CSS entry, the images can be viewed.

Any help on having only the featured image hidden and images showing in my post would be greatly appreciated.

Thanks!

[ruenel]

Hello Paul,

@prakash_s

.single-post article.post.type-post.has-post-thumbnail img {
display: none;
}

This code here will hide away the featured image on single blog posts. Please only apply the CSS code that hides away the featured image on a specific pages. If you want to hide the featured images only on the archive pages, then you can use the CSS code as pointed out by @Prakash_s in his reply above.

Thank you.

[Paul_Hill_Guitarist]

@prakash_s

.single-post article.post.type-post.has-post-thumbnail img {
display: none;
}

Thanks for the reply, although this code also hides all images on my blog post. If I delete the code, the featured image and all images in the post appear. If I add the code to the individual post CSS, all images, including images in the post’s content disappear.

[marc_a]

Hey Paul,

To hide the featured image in the individual single post, you need to use this code.

.single-post .entry-featured .entry-thumb img {
	display: none;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.

[Paul_Hill_Guitarist]

That code worked perfectly thank you. I have added it to all posts and image content is now being displayed as it should.

[prakash_s]

Hello Paul,

Glad that we were able to help you.

Thanks