One of the advantages of using a publishing platform like WordPress is the flexibility it offers. This flexibility is manifest in many areas but is most visible in the layout of the site, pages, and posts. Depending on the theme you have chosen, many visible parts can be changed with reasonable ease. Of course, changing a theme is always a possibility, but there are little things that can make a big difference in the appearance of a site.
The Page Header
The theme I am using, Mai Success has an element, page header, that can be shown in various forms. It can appear on top of every page and/or post, only on pages or posts, or none. It can also be turned off on individual pages or posts on demand. This poses a challenge to sites, like Kept Light, where most of the posts have a lead image, and the same image is also set as the featured image associated with that post.
If the showing of the page header is enabled on every page and post and the featured image in the designated area at the top, then the lead image will become redundant. Take a look at the following possibilities.
Click on the images to see them larger, uncropped, and read their titles.



The first one shows how my posts looked, and I wanted the page header and no lead image shown on the right for most of the posts. Enabling the page header and using the featured image there created a redundant look in the middle. In some cases, that might make sense, as the page header image can have a dark overlay to make sure that the post title will always be legible even with featured images with light tones. The first two images are captured from a staging site I have, so the site name shows as Test Bed. Here is how it looks on this live site.
At this point, you might wonder why do I use a featured image anyway. That image is used as an ID card for the post as it is displayed in a variety of layouts, like showing all the posts in a grid. That being the case, and almost all the posts having a featured image assigned to them, I needed to find a solution to remove the lead image. But, I wanted to have the option available to return to using the lead image instead of the page header. Have my cake and eat it too!
CSS To The Rescue
I first came up with the idea of creating a CSS rule that will hide any element if it is assigned to it. So, I created the following rule:
/* Hide the element assigned */ .hide-it { display: none; }
But, now, I had to go to every post, select the image, find the “Advanced” tab, and add to the custom CSS field, hide-it. I tried, and it actually worked. But it proved to be too much work
The next idea was to write a CSS rule that would target that specific image block on every post. After some reading and research, I wrote the following:
/* Hide the lead image in a post at the top */ .wp-block-image:first-child { display:none; }
It would target the image block if it is the first child in the content. And that gave me the desired result of hiding the lead image and displaying only the page header. Well, almost! This rule only works if the post has been converted to the new block editor format, as the entity wp-block-image does not exist in the posts created with the classic editor.
This is currently what drives the content on my site, along with quite a few other CSS rules. I took that last problem as a useful side effect. If I see both the page header and the lead image, I know that the post has not yet been converted to the block editor, and I edit as I come across them. I also have the option of disabling the page header and the new rule I wrote to revert the site to no page header with only the lead image in a matter of a minute or two.
If I want to show the lead image in the body of the post for some reason, I move it somewhere below the first text block. Then, it is no longer the first child of the entry content. The rule will not apply to hide it.
CSS is a deep well. I used to follow the developments in that area when I was teaching the Web design course. But lately, I have found too many new things in the tool chest. This simple solution took me a good 20-30 minutes to figure out. But, I am satisfied with the result. I have many other tweaks in the custom CSS area of my site. Partly because I want to learn, and partly because I am fussy! I will share a couple of others that may be useful in your work.
Haluk Atamal
Very technical but also extremely readable (despite that I have not been too much active after Fortran IV and my punch cards) . My favourite sentence is the one before the last: “Partly because I want to learn, and partly because I am fussy!”
This is what Cemal Ekin is about :)
Thanks for sharing Cemal. Take care and best regards,
Haluk
A. Cemal Ekin
I remember the days of Fortran IV and punched cards very well, Haluk. Yes, learning never ends. And, with the mountain of changes that entered the world of CSS and Web design, there is enough to keep me busy for quite a while.
Take care,
Cemal