Featured images not showing correctly

Hi @nic727,
could you provide a PROD URL or something where I can check in real-time?

I noticed a small thing, I do not think this solves the issue but… who knows. You are missing a semicolon here -> https://i.imgur.com/cglIyjT.png

Thanks,
regards.

• This reply was modified 3 years, 6 months ago by benvoide.

I added the semicolon and I still have the issue. I checked all my code for missing semicolon, but didn’t found anymore.

Here are some links I have problems with:
https://pg.nicolas-duclos.com/
https://pg.nicolas-duclos.com/blog/ (no idea why it’s only repeating itself everywhere and the page featured-image is the post featured-image instead).
https://pg.nicolas-duclos.com/photographie/

I’ve tried to use get_the_post_thumbnail_url() instead of the long code, but it’s just not working. I don’t know why. If I enter echo “T” as background-image it work, but if I use my variable or even paste the full code there, it’s just empty.

• This reply was modified 3 years, 6 months ago by Nic727.

Hi again @nic727,
is it $post->ID bringing the expected ID for each post? Could you print in some way the full content of $f_image, so we can check what is bringing? Perhaps you can do something like:

1. Add in your code, after $f_image definition, the following block of code -> https://0bin.net/paste/yecKXRmf#xeGLVkvbvdpmBnwif+yGCWHZNS0fQZfMMdSCqYfGTit
2. Use the browser inspector to check this block of code and analyze the results. We are expecting some kind of array.

Thanks,
regards.

• This reply was modified 3 years, 6 months ago by benvoide.
• This reply was modified 3 years, 6 months ago by benvoide.
• This reply was modified 3 years, 6 months ago by benvoide.
• This reply was modified 3 years, 6 months ago by benvoide.

Alright… I think the problem was because I was calling my variable globally instead of inside my loop which was messing the stuffs. It was returning bool(false). Now the image are showing correctly, but still have a problem with my header on my blog and photographie page.

My page header is

<?php

//Variables
$page_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

?>      
<!-- PAGE FEATURED IMAGE -->         
<section class="page-header"> 
    <div class="featured-image-container"> 
        <div class="featured-image" style="background-image:url(<?php echo $page_image[0] ?>)"></div>                 
        <div class="img-overlay"></div>                 
        <div class="page-title"> 
            <?php the_title('<h1>', '</h1>'); ?>
            <?php if ( has_excerpt() ) : ?>
                <h2><?php echo get_the_excerpt(); ?></h2>
            <?php endif; ?>
        </div>                 
    </div>             
</section>   

Not sure why it doesn’t take the page featured image and title if it has posts on the page. For example, it works on that page, but it doesn’t have posts. https://pg.nicolas-duclos.com/a-propos/

—-
There are two things I have problems with;
1. When and when not to use global variables?
2. Most of the code on the developer website is using if: and endif;. Should I re-write my code using if{} instead?

• This reply was modified 3 years, 6 months ago by Nic727.

We use globals when the data we need is in a variable that would otherwise be out of scope. It’s common to declare $post global since it’s normally out of scope on template code. You still must take care with when it is used. Initially it’ll be the page’s object, but when you make a post query on a page template, it very likely becomes the WP_Post object for the current post in the loop instead of the page’s object. It’s current value is contextual. It sounds like your trouble is because this still hasn’t been properly resolved.

It shouldn’t matter which style of if() you use. I like curly brace style for shorter conditional blocks and endif style for more extensive conditional blocks, especially if they include intervening HTML. However, I try to avoid nesting endif style within other endif style conditional blocks. Technically it shouldn’t be a problem, but I find it confusing. Plus my code editor matches up curly braces nicely, but it doesn’t match up endif to its initial if(), so nested endifs tend to be more error prone.

After looking at the TwentyTwentyOne theme, I have no idea where I get it wrong. I tried with the_title() for my current page title and get_the_title() for the posts showing in the loop, but it still showing the last post from the loop as a main title of the page and featured image…

Initially it’ll be the page’s object, but when you make a post query on a page template, it very likely becomes the WP_Post object for the current post in the loop instead of the page’s object. It’s current value is contextual. It sounds like your trouble is because this still hasn’t been properly resolved.

I’m a noob, so I don’t know what you mean. As I understand, you need to separate the loop info from the page info, but I’m not sure to understand how since I can’t find that in the developer index.

…still showing the last post from the loop…

That sounds like wp_reset_postdata() was not called after the loop completed.

Not working.

Here is my page

<?php 
//Blog page template

get_header(); 

get_template_part( 'template-parts/header/navigation' );

get_template_part( 'template-parts/page/page-featured-image' );

?>

<section class="container"> 
    <div class="section-flex"> 
        <div class="title-section"> 
            <h2><?php _e( 'Aper?u', 'aurora' ); ?></h2> 
            <h3><?php _e( 'Articles récents', 'aurora' ); ?></h3> 
        </div>                 
        <div class="section-right"> 
            <?php get_template_part( 'template-parts/page/filter' );?>                     
        </div>                 
    </div>
       
    <?php 
    //Rewind index
    rewind_posts();

    $args = array(  
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 15, 
        'orderby' => 'date',
        'order'   => 'DESC',
    );

    $loop = new WP_Query( $args ); 

    if ( $loop->have_posts() ){

        //Blog container
        echo '<div class="flex-container">';

        // Start loop
        while ( $loop->have_posts() ) {
            
            $loop->the_post();
            
            PG_Helper::rememberShownPost();

            get_template_part( 'template-parts/page/blog-post' );

        } 
        wp_reset_postdata();
        echo '</div>';   
    }else{
        _e( 'Sorry, no posts matched your criteria.', 'aurora' );
    }
    
    ?>

</section>         
              

<?php get_footer(); ?>

and my code for my page-featured-image template

<?php

//Variables
$page_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

?>      
<!-- PAGE FEATURED IMAGE -->         
<section class="page-header"> 
    <div class="featured-image-container"> 
        <div class="featured-image" style="background-image:url(<?php echo $page_image[0] ?>)"></div>                 
        <div class="img-overlay"></div>                 
        <div class="page-title"> 
            <?php the_title('<h1>', '</h1>'); ?>
            <?php if ( has_excerpt() ) : ?>
                <h2><?php echo get_the_excerpt(); ?></h2>
            <?php endif; ?>
        </div>                 
    </div>             
</section>  

I’m trying to find some info on Google, but no luck yet.
I tried wp_reset_postdata();, but this function is used if you have multiple loop… I actually use it on my homepage (front-page) where I have two different loops.
I even tried wp_reset_query();, but not working.

You’re placing a blog listing on a page template? You’re going to have trouble paginating blog posts by doing it that way. It can be dealt with, but it gets a little involved. See below. IMO you’re better off letting WP handle blog listings the way it was intended. This means index.php will likely be used as template. There’s no featured image for such a page, but you could have the template pull in an image that belongs to a different page or something specified through settings or the customizer.

If you want to continue with the page template approach, you need to initialize and execute the main query’s loop, the one for the page itself (the while (have_posts()): the_post(); bit). Get the page’s title and featured image while inside that loop.

Your new WP_Query object should have its “paged” arg set. Lacking additional information, the value should be 1. But where to get additional information for subsequent pages? You’ll see examples where it is established from the main query’s “paged”, derived from an URL like /page-name/page/4/. Except on pages, “4” is invalid and will never be set as such. You’ll need your own custom query var to establish the requested page number. Simplest is an URL like /page-name/?blog-pg=4. Set the query’s “paged” arg from $_GET['blog-pg'].

How do pagination links get ?blog-pg=4 added to them? By using paginate_links(). The normal template tags for pagination you see in themes (like next_pots_link()) will not work in this context.

I don’t understand why it’s so complicated. I understand that calling a title, featured-image, etc. on a page that has a loop is not ideal, but it’s the way I designed my website. I already have an index page with two loops and it works well (https://pg.nicolas-duclos.com/), but my main blog repository also need an image and title… How do you want people to know which page they are on if there isn’t any informations? https://pg.nicolas-duclos.com/blog/

I found out that the_title(); and get_the_title() shouldn’t be used outside of the loop… I’m surprised to see that WordPress, after all those years doesn’t have a way to work outside the loop.

I’m trying stuffs with

<div class="page-title">
            <?php if (is_page()||is_home()): ?>
            <h1><?php single_post_title(); ?></h1>
            <?php endif;
            if (is_archive()): ?>
            <h1><?php post_type_archive_title(); ?></h1>
            <?php endif;?>
            <?php if ( has_excerpt() ) : ?>
                <h2><?php echo get_the_excerpt(); ?></h2>
            <?php endif; ?>
        </div>  

It kinda work to get the page title. Except my archive title is taking the main “archive plural name” instead of the page title or singular name… I also saw the wp_title() in the header is also using the plural name instead of singular. How can I change it?

• This reply was modified 3 years, 6 months ago by Nic727.

I almost fixed that.

I found that using $pageID = get_queried_object_id(); can find the current page ID that I can finally work with for featured image, title and excerpt. However, now that my post page is working correctly, it’s not the same for my custom archive page. I have more trouble.

First of all, I found this https://wordpress.stackexchange.com/questions/175226/cant-get-post-id-on-page-that-is-a-custom-post-type-archive where it seems that WordPress doesn’t recognize ID on archive and custom archive page. So to use my custom archive page design, I need to change has_archive to false in my functions.php for my custom post type.

To make it works, it seems that I need to change my archive-photography.php to page-photography.php.

It would work, but for some reasons, page-photography.php is not working since mysite.com/photography is showing the same thing as mysite.com/blog which use home.php template.

EDIT: I revert it back to archive-photography.php to make the page work. Just need to figure out how to get the ID of this page even if it’s an archive template. In my admin panel I see the page is ID 65 and if I use this ID to show thumbnail, it works, but I can’t find a way to retrieve this ID since the code above doesn’t work for this page.

EDIT 2: I tried page-photo instead and it works, but not ideal. I don’t know why page-photography doesn’t work. Maybe because the custom post type is named “photography” and the archive is supposed to be “photography” too, so it just cancel it? Need to find out.

• This reply was modified 3 years, 6 months ago by Nic727.
• This reply was modified 3 years, 6 months ago by Nic727.
• This reply was modified 3 years, 6 months ago by Nic727.

Yes, a page slug that’s the same as a post type will confuse WP. Such a request could be either an archive request or a page request, and no way to know the difference.

Themes ideally wouldn’t create post types because it locks in users to the one theme and removes their ability to utilize other themes while keeping their data available. Custom post types belong in plugins. But if your theme is for your own use and not for distribution, do as you like.

Archive lists do not have any sort of ID. If is_archive() is true, you need to get what sort from the query vars. There’s no built-in support for featured images attached to archive lists. It’s something you need to build into your theme or plugin yourself. Perhaps a customizer section where users can select an archive’s featured image. Then when archives are requested, you determine what kind and get the related image from theme mods, which is where customizer data is stored.

Hi, I finally fixed that by using page-photography.php I had to reinstall WordPress on a new subdomain, because it wasn’t working on the previous one. Now all good.