0

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>

enter image description here

enter image description here

0

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>
  • Hi mrben522. Thank´s for your answer. Don´t know why, but images are not loading. I placed images into each separate folder, tested urls and images are there. – Omniatom Feb 28 at 16:29
  • Image of how the code is inserted in my single.php is placed above. – Omniatom Feb 28 at 16:43
  • Oh that's my fault. file_exists is expecting a path, not a url. I'll update that answer for you – mrben522 Feb 28 at 18:41
  • 1
    add var_dump(file_exists($uploadDir['basedir'] . $image1)); after line 4. – mrben522 Feb 28 at 19:45
  • 1
    remove the var_dump line to get rid of that – mrben522 Feb 28 at 20:02
0

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; ?>
  • man, sorry, but I´m not a PHP coder. What goes into <div>your code</div>??? – Omniatom Feb 28 at 19:32
  • Your original code. You may replace line 7 to 12 with your original code that you've posted in the question. – hamdirizal Feb 28 at 19:34
  • Sorry... not working either. See second image please. – Omniatom Feb 28 at 19:40
  • Below the $imag_3 line, do this var_dump(file_exists($image_1));die() And see the results. If it says null or false then it means that your image file doesn't exists. If it says true, then check the next image file. Do that until you find the problem. – hamdirizal Mar 1 at 1:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.