Displaying featured images on the home and blog page similar to regular pages

[pgrosskurth]

Hi @aemi-dev,

I'm creating this as a feature request since it's more of that than it is a bug report. Technically I found some problems by trying to do something that your theme probably wasn't meant to. I'm using Firefox 88.0, Aemi version 2.0.11, Wordpress version 5.7.1.

After selecting a featured image for a page your theme displays it like this:

I really liked the look (blurred background image, half the size of the page) and wanted to have the home page as well as the blog page look the same way. To do this I added featured images to both of the pages I had declared as "home" and "blog" within the theme, hoping I'd get the same result. For the home page I also chose to add a page-like header, which gets displayed on both the home and the blog page:

However, the result looked like this:

The featured image doesn't get displayed and the font color of the header on the very top defaults to white, rendering it invisible. (The subtitle is just missing because I set it to white via custom CSS - it would have been displayed correctly otherwise.) The blog page doesn't have that problem, but doesn't display the featured image either:

I then tried to reverse-engineer how the theme is constructed to change this. What I did was to change line 22ff in the inc/structure/home.php file from

    <header class="post-header">
        <div class="post-info">

to

    <header class="post-header<?php echo has_post_thumbnail() ? ' color-scheme-dark' : '' ?>"><?php
            aemi_featured_image();
            ?><div class="post-info">

in an attempt to have the image included in the header. This changed the home page to what I intended (I changed the subtitle color via custom css).

But it broke the blog page, making it look like this:

The blog posts still appear after scrolling down:

The image that gets displayed turns out to be the featured image of the first post. I'm still learning what everything does, but I couldn't figure out what's responsible for the blog pages' layout that makes it break in this weird way.

Thank you once again for this amazing theme and all the work you invest. Your code already taught me a great deal and I'm excited to fill this page with content.

P

[g-cqd]

What you're doing is a good try but it won't work like that. As far as I remember, because it's part of the last important things I coded for v2, I think I did not have enough time to code this feature before my own deadline.

So I fully understand what you're wanting to do. My best advice will be to add a custom CSS rule to edit the header background. At the moment I don't have time to edit PHP code of Aemi theme to add this feature. So, I will add this issue to the todo list of this project and you can be sure I will implement this before end-2021.

Regarding my current activities, I plan to refactor/modernize completely Aemi code by end-2022 so I'm sorry that reverse-engineering will surely be hard sometimes.

[pgrosskurth]

Thanks for pointing me in the right direction. I'll see if I can get it to work and let you know how it goes. I was already trying to figure out where to find the settings for that, but right now my enthusiasm is a bit ahead of my CSS skills. ;)

[g-cqd]

Ahah, keep in mind that the colorscheme is a tricky thing too. Adding a raw line to specify color-scheme-dark sounds a bit too easy facing how it is managed here.

If I'm right, the best way to add your background header picture is to add it in an ::after pseudo-element to #entry-head > .post-header and make sure to place the ::after below (in term of z-index) ::before.

The interesting code is here.

[pgrosskurth]

Thank you so much, that saves me a lot of time already.