How to hide image in PHP if there is no image set - php

Question

How do I hide the image tag if there is no image present? Basically, I have an image gallery that has 4 images that can be set. However, if a product has 2 images how do I hide the other 2 image tags? What would be the best method to use?
<img src="/images/large/<?=$prod_id?>.jpg" onclick="openModal();currentSlide(1)" style="border: 1px solid #cccccc;" class="hover-single"/>
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:80px; height:80px;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<a class="prev" onclick="plusSlides(-1)"><</a>
<a class="next" onclick="plusSlides(1)">></a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="gallery cursor active" src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(4)">
</div>
</div>
</div>

Answer 1

Your modal-content code can be rewritten as below:
check if the image file exists or not
display the slide if the image file exists, do nothing if not.
for($i = 1; $i<=4; $i++) {
$img_file = '/images/large'.$i.'/'.$prod_id.'.jpg';
if(file_exists($img_file)) {
$display = ($i == 1) ? ' block' : ' none';
echo '<div class="mySlides" style="display:'.$display.';">';
echo ' <div class="numbertext">'.$i.' / 4</div>';
echo ' <img src="'.$img_file.'" style="width:95%; height:95%; margin-left: 2.5%;">';
echo '</div>';
}
}
The above code can be used to replace the following code section:
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
Sure it is not the best way to check file_exists each time. This can be improved by means of storing the number of images for each product in your data set / database. Then just set a new variable such as $img_num to replace the 4 in the loop.

Answer 2

Try this code:
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<?php if(file_exists('/images/large2/'.$prod_id.'.jpg')){<?php>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"><?php }
</php>

Answer 3

Here is possible idea for your requirement :
$query = "here is your query";
$res = "your query executed";
$imagearray = array();
$i = 0;
while($row = mysql_fetch_array($res))
{
if(file_exists(imagepath.$row["image"]))
{
$imagearray[$i] = $row["image"];
$i++
}
}

Answer 4

Hi their Brother ild flue did a good work, but we can enhance the code a bit more but making the fetching a bit more dynamic, I propose the code below,
scan the dir for existing folders(in that way u don't need to depend
on the arbitrary number to indicate the folder
see that those paths with ur image exist or not
display the specified images and let the rest of the be discarded.
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<?php
$k=1;
$dirs = array_filter(glob('images/*'), 'is_dir');
foreach ( $dirs as $allLargeDir ){
$imgPath=$allLargeDir."/".$prod_id.".jpg";
if(file_exists($imgPath)){
?>
<div class="mySlides" style="display: block;">
<div class="numbertext"><?php echo $k++." / ".$n; ?></div>
<img src="<?php echo $imgPath;?>" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<?php
}
}
?>