Issue while adding a featured image from a custom post using PHP

Hi there!

The get_the_post_thumbnail() function returns the post thumbnail image tag. If you take a look at your source code where the above shortcode html renders, do you see an img tag within an img tag? Try removing the img tag that surrounds <?php echo $photo; ?> — this should resolve the closing img tag that is rendering on the frontend. Does this also help with how the images are displaying? Let me know! If you have an example link, I’d be happy to take a closer look.

Good luck!

Hi @simpleliving ,

Thank you for your quick reply!:)
Indeed, it solves the closing tag issue, so thanks again!
Here is the updated code:

function wpc_shortcode( $atts ) {
  query_posts('posts_per_page=16&post_type=backstages&orderby=date&order=asc');
  while ( have_posts() ) : the_post();
    $photo = get_the_post_thumbnail();
    $titre = get_the_title();
    $link = get_field('link');
    $size = "full"; ?>

    <div class="container">
          <div class="row">
              <div class="vc_col-sm-6 rowbackstage">
                <?php echo $photo; ?>
                <p class="titrebackstage allbackstages"><?php if( $link ): ?><a class="backstageslink" target="_blank" href="<?php echo esc_url( $link ); ?>"><?php endif; ?><?php the_title(); ?></a></p>
              </div>
          </div>
       </div>
      <?php endwhile;
  wp_reset_query(); // resets the aletered query back to the original
  echo do_shortcode('[ajax_load_more id="loadmorebtn" container_type="div" post_type="backstages" posts_per_page="6" order="ASC" orderby="date" offset="16" pause="true" button_label="Charger plus" button_loading_label="Chargement..." button_done_label="Toutes les images sont affichées" ]');
}

add_shortcode( 'all_backstages', 'wpc_shortcode');

But it doesn’t help with how the images are displaying. Unfortunately, the website is still in creation so hidden. I’ll try to describe my issue: I have two columns of pictures+title (thanks to the “vc_col-sm-6”) but on the third row, I have only a single image+title in the right column and of course, it moves everything back below. I have played with the order (asc or desc) and it moves the issue to the second row but it’s still there (and the picture is still in the right column. I really have no clue of what may cause that… Do you have any idea?

Thank you!

Hi!
Are you able to provide a snippet of the rendered source code for the 3 rows of images? It looks like the container, row, and vc_col-sm-6 renders each time you include the shortcode — instead, you likely want the container, and row elements outside of your loop.

Hi,

Good idea! I have excluded the container and row of the loop, so the code looks like that:

function wpc_shortcode( $atts ) {
  query_posts('posts_per_page=16&post_type=backstages&orderby=date&order=asc');?>
      <div class="container">
          <div class="row">
 <?php while ( have_posts() ) : the_post();
    $photo = get_the_post_thumbnail();
    $titre = get_the_title();
    $link = get_field('link');
    $size = "full"; ?>

              <div class="vc_col-sm-6 rowbackstage">
                <?php echo $photo; ?>
                <p class="titrebackstage allbackstages"><?php if( $link ): ?><a class="backstageslink" target="_blank" href="<?php echo esc_url( $link ); ?>"><?php endif; ?><?php the_title(); ?></a></p>
              </div>
                    <?php endwhile; ?>
          </div>
       </div>

 <?php wp_reset_query(); // resets the aletered query back to the original
  echo do_shortcode('[ajax_load_more id="loadmorebtn" container_type="div" post_type="backstages" posts_per_page="6" order="ASC" orderby="date" offset="16" pause="true" button_label="Charger plus" button_loading_label="Chargement..." button_done_label="Toutes les images sont affichées" ]');
}

add_shortcode( 'all_backstages', 'wpc_shortcode');

Is it what you meant?

I still have the issue…

I would be happy to send a screenshot but I don’t see how here?

Thanks again for your help!

Hi,

I have changed the order of the posts (using a plugin to reorder) and I have now two pictures not displaying next to another one on its row. Here is a screenshot of what I see when I use the “inspect element” tool: https://snipboard.io/eto9l6.jpg (the “alone picture” is the one in red brackets).

And here is a screenshot of what is displayed on the front-end: https://snipboard.io/oe6q0p.jpg

Maybe this will help you understand the issue…

Thanks a lot for any help! ??