How to automatically load an image inside the post, since it is present in uploads folder

Question

I´d like to automatically load three images inside all posts (via single.php), always in the same div (.acf_imgs-centro1). The idea is that the images are uploaded into uploads folder, with the same name as the post, and then they will be displayed inside the post. I can do it using the code bellow, but there is a problem... I have a static title (.imgs_h2) above the images divs, and I want it (the title) to load only since there are any image loaded. I can, for example, have the post and not yet have the image in the folder, so the title will be invisible. No Image, no title. Right now, the method i´m using seems incompatible with what I want to achiev. Any help is appreciated.

<div class="acf_imgs-centro1">
          <h2 class="imgs_h2">Compartilhe nas redes sociais</h2>
          <div class="img-neutra">
             <img alt="Significado de <?php the_title(); ?>" src="http://teste.significadodosnomes.com.br/wp-content/uploads/nomes-unisex/<?php echo $post->post_name; ?>.jpg" onerror="this.style.opacity='0'" >
             </div>
          <div class="img-fem">
             <img alt="Significado de <?php the_title(); ?>" src="http://teste.significadodosnomes.com.br/wp-content/uploads/nomes-femininos/<?php echo $post->post_name; ?>.jpg" onerror="this.style.opacity='0'"></div>
          <div class="img-masc">
             <img alt="Significado de <?php the_title(); ?>" src="http://teste.significadodosnomes.com.br/wp-content/uploads/nomes-masculinos/<?php echo $post->post_name; ?>.jpg" onerror="this.style.opacity='0'" ></div>

              </div>

Answer 1

You should check if those files exist before you output that div. You can clean up your markup and get rid of that onerror call by wrapping each image div in a file_exists check. Use a ternary to check if the file exists and set the $image variable if it is. Like so:

$image1 = "/nomes-unisex/" . $post->post_name . ".jpg";
$image2 = "/nomes-femininos/" . $post->post_name . ".jpg";
$image3 = "/nomes-masculinos/" . $post->post_name . ".jpg";
$uploadDir = wp_get_upload_dir();

$image1 = file_exists($uploadDir['basedir'] . $image1) ? $uploadDir['baseurl'] . $image1 : '';
$image2 = file_exists($uploadDir['basedir'] . $image2) ? $uploadDir['baseurl'] . $image2 : '';
$image3 = file_exists($uploadDir['basedir'] . $image3) ? $uploadDir['baseurl'] . $image3 : '';
?>
<div class="acf_imgs-centro1">
<?php if ($image1 || $image2 || $image3) {
    ?>
    <h2 class="imgs_h2">Compartilhe nas redes sociais</h2>
    <?php if ($image1) { ?>
        <div class="img-neutra">
            <img alt="Significado de <?php the_title(); ?>" src="<?php echo $image1; ?>">
        </div>
    <?php }
    if ($image2) { ?>
        <div class="img-fem">
            <img alt="Significado de <?php the_title(); ?>" src="<?php echo $image2; ?>">
        </div>
    <?php }
    if ($image3) { ?>
        <div class="img-masc">
            <img alt="Significado de <?php the_title(); ?>" src="<?php echo $image3; ?>">
        </div>
    <?php }
} ?>
</div>

Answer 2

Just check the if the file exists first before showing the DIV.

<?php 
$image_1 = wp_upload_dir()['basedir'] . '/nomes-unisex/' . $post->post_name . 'jpg';
$image_2 = wp_upload_dir()['basedir'] . '/nomes-femininos/' . $post->post_name . 'jpg';
$image_3 = wp_upload_dir()['basedir'] . '/nomes-masculinos/' . $post->post_name . 'jpg';
if(file_exists($image_1) && file_exists($image_2) && file_exists($image_3)):
?>
<div class="acf_imgs-centro1">
    <h2>your code</h2>
    <div>your code</div>
    <div>your code</div>
    <div>your code</div>
</div><!-- .acf_imgs-centro1 -->
<?php endif; ?>