• Hello, I am creating a blog page and have setup multiple queries and pagination. The queries and pagination are working. I can see the titles of the posts populating but for some reason i am not seeing the images.

    to display the images i used get_the_post_thumbnail_url() in the src if the image tag. Im guessing this may not be the right way to do it as the images are not displaying.

    Im hoping I can get an answer here as to the right way to display the images. Any help is greatly appreciated. Here is the code i have so far.

    <?php get_header(); ?>
    
    <section class="bu-header-img-container">
        <img src="/wp-content/uploads/2023/09/bdl-life-static-header-9-23-1.jpg" alt="">
    </section>
    
    <section class="bu-title-bar-container bu-page-width">
        
        <div class="col-4 bu-title-left-column">
            <h2 class="bu-yellow-title">Travel Inspiration</h2>
        </div>
        <div class="col-8 bu-title-right-column">
            <hr class="bu-black-line">
        </div>  
    
    </section>
    
    <section class="bu-feature-section bu-page-width"> 
        <?php 
            $featurePosts = new WP_Query(array(
                'category_name' => 'travel-inspiration-feature',
                'posts_per_page' => 1
            ));
            if ($featurePosts->have_posts()) :
                while ($featurePosts->have_posts()) :
                    $featurePosts->the_post();
                    ?> 
                        <div class="bu-feature-post-container">
                            <img class="bu-img" src="<?php the_field('blue-section-feature-img'); ?>" alt="">
                            <hr class="bu-yellow-line">
                            <h2><?php the_title(); ?></h2>
                        </div>
                    <?php
                endwhile;
            endif;
        ?>
        <?php 
            $secondaryPosts = new WP_Query(array(
                'category_name' => 'travel-inspiration-secondary',
                'posts_per_page' => 1
            ));
            if ($secondaryPosts->have_posts()) :
                while ($secondaryPosts->have_posts()) :
                    $secondaryPosts->the_post();
                    ?>  
                        <div class="bu-secondary-post-container">
                            <img class="bu-img" src="<?php get_the_post_thumbnail_url(); ?>" alt="">
                            <hr class="bu-yellow-line">
                            <h2><?php the_title(); ?></h2>
                        </div> 
                    <?php 
                endwhile;
            endif;
        ?>
            
    </section>
    
    <section class="bu-posts bu-page-width">
        <?php 
            $ourCurrentPage = get_query_var('paged');
    
            $mainPosts = new WP_Query(array(
                'category_name' => 'travel-inspiration',
                'posts_per_page' => 12,
                'paged' => $ourCurrentPage
            ));
            if ($mainPosts->have_posts()) :
                while ($mainPosts->have_posts()) :
                    $mainPosts->the_post();
                    ?> 
                        <div class="bu-post">
                            <img src="<?php get_the_post_thumbnail_url(); ?>" alt="">                        
                            <hr class="bu-yellow-line">
                            <h2><?php the_title(); ?></h2>
                        </div>
                    <?php
                endwhile;
                ?>
                <div class="pagination-container">
                <?php
                echo paginate_links(array(
                    'total' => $mainPosts->max_num_pages
                ));
                ?>
                </div>
                <?php
            endif;
        ?>
    </section>
    
    <section class="bu-page-width bu-pagination-container">
        <img src="pagination-img.png" alt="">
    </section>
    
    <section class="bu-page-width bu-bottom-img-links-container">
        <div class="bu-bottom-img-links-left">
            <h2>Book Now</h2>
        </div>
        <div class="bu-bottom-img-links-right">
            <h2>Parking<br>Options</h2>
        </div>
    </section>
    
    <?php get_footer(); ?>
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter davidcarrano

    (@davidcarrano)

    Also, the image inside bu-feature-post-container is not displaying either.

    For that one I have an ACF field that has an id of blue-section-feature-img

    Its return format is Image URL.

    Moderator bcworkz

    (@bcworkz)

    The problem is you’re using relative paths to the image files. Relative URL paths are almost always a poor choice in WP. OTOH full absolute URL’s will always work. The way we usually output featured images from a template is with something like:
    echo get_the_post_thumbnail( $post->ID, 'post-thumbnail');

    But if you prefer to build your own img tag that’s fine too. Except you need to ensure the src attribute is a full URL to the file — https, domain, path, everything. You could use wp_upload_dir()['url'] as a start. Note that it returns the URL for the current /year/month/ folder if used. You’ll need to remove that portion to build URLs to older images.

    Edit: or use wp_upload_dir()['baseurl'] ??

    • This reply was modified 1 year, 2 months ago by bcworkz.
    • This reply was modified 1 year, 1 month ago by bcworkz. Reason: code format fixed
    Thread Starter davidcarrano

    (@davidcarrano)

    Thank you for your response. Would it be possible to just use

    <?php the_post_thumbnail( 'large' ); ?>

    in place of the image tag?

    Thread Starter davidcarrano

    (@davidcarrano)

    Thank you. I tried

    <?php echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’); ?>

    that worked to pull in the images, but they are too small so when they expand to fill the space they are blurred.

    How would i show a larger image in that space?

    Moderator bcworkz

    (@bcworkz)

    Replace 'post-thumbnail' with the name of your preferred registered image size. Default registered sizes are full, large, medium, and post-thumbnail. Your theme and plugins may have registered other sizes.

    Mind the style of quotes you use in your code. We’ve used “curly style” in the snippets we’ve posted. They must be 'straight' style. My bad for not properly using a code block in my previous reply, which you then copied from. The forum’s parser automatically changes styles for non-code quotes. I’ve corrected my reply, but the code you have on your server probably still has the curly style.

    Thread Starter davidcarrano

    (@davidcarrano)

    Thank you again for your help with this. I have the secondary and main post images displaying correctly now. Do you have any advice for the image im trying to pull in from the ACF field. Right now in ACF it is set to Image URL, and i have the url in the src like this

    <img class="bu-img" src="<?php echo the_field('blue-section-feature-img'); ?>" alt="">

    not sure how else to approach this. Do you know a way to accomplish this? Again your help is much appreciated. Thanks

    Moderator bcworkz

    (@bcworkz)

    Is that code within the “loop”? It must be for the_field() to work correctly.

    If that’s correct, maybe the HTML is there in the page’s source but it’s hidden for some reason? Please check the page’s source HTML.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘What is the proper way to display the posts featured image’ is closed to new replies.