CODEWITHSUNDEEP
phpimageplaceholder
Hevnlymom
Hevnlymom

Reputation: 79

Is there a way to automatically use another image as a temporary placeholder for missing images sitewide?

I am working on building a site, but right now it has several images that I don't have actual images for yet. As this site has thousands of images or places where images should be, I don't want to have to manually change each of them and then change them again when I find the correct image. Is there a way to create a function that will look for the missing images and replace them with a specified image until the correct image is found?

Update: Since I am still a bit confused as to where to even place this function, I am going to add the code for one of the pages that I need this for then maybe someone can help me figure out how to place it.

Here is the code for one of the pages:

<?php
require_once('dbconnection.php');
mysqli_select_db($conn, $dbname);
$query_master = "SELECT DISTINCT * FROM `master_list` INNER JOIN types_join ON master_list.join_id=types_join.join_id WHERE `type_id` = 171 ORDER BY `item_id`";
$master = mysqli_query($conn, $query_master) or die(mysqli_error());
$row_master = mysqli_fetch_assoc($master);
$totalrows_master = mysqli_num_rows($master);
?>

<!doctype html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Trees</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>

<body>

<div class="wrapper">
    <a id="top"></a>
    <?php require_once('header.php'); ?>
    <?php require_once('nav.php'); ?>
    <div class="category"><h2>Flower Trees</h2></div>           
    <div class="display">
      <?php do { ?>
      <ul>
          <li><a href="details.php?recordID=<?php echo $row_master['master_id']; ?>"><img class="thumb" src="img/<?php echo $row_master['img']; ?>"/>
          <br />
          <span class="name"><?php echo $row_master['name']; ?></span></a></li>
      </ul>
      <?php } while ($row_master = mysqli_fetch_assoc($master)); ?>
    <!-- end .display --></div>
    <?php
    mysqli_free_result($master);
    ?>
    <?php require_once('footer.php'); ?>
<!-- end .wrapper --></div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
</body>
</html>

Upvotes: 0

Views: 1664

Answers (3)

GetSet
GetSet

Reputation: 1577

I don't want to have to manually change each of them and then change them again when I find the correct image. Is there a way to create a function that will look for the missing images and replace them with a specified image until the correct image is found?

Such a function might be written as:

function im($imgName) {
    $pathToImgs = "images/";
    if (file_exists( $pathToImgs . $imgName )) {
        echo $pathToImgs . $imgName;
    }
    else {
        echo $pathToImgs . "placeholder.jpg";
    }
}

Then in your html:

<img src="<?php im("product1.jpg"); ?>">
<img src="<?php im("product2.jpg"); ?>">
<img src="<?php im("product3.jpg"); ?>">

As a start.

***Edit 1:

Given your code where it says:

<img class="thumb" src="img/<?php echo $row_master['img']; ?>"/>

You might modify it with a conditional that inserts the placeholder image in the event that the target image simply doesn't exist, yet.

<img class="thumb" src="<?php 

    if (file_exists("img/" . $row_master['img'])) {
        echo "img/" . $row_master['img'];
    }
    else {
        echo 'img/placeholder.jpg';
    }

?>">

You could reuse this functionality by turning the conditional into a php function, so described as a starter above.

Upvotes: 1

Blue
Blue

Reputation: 22911

Since this is as simple as a foreach loop, and not tons of images scattered across your webpage, you can use something like:

$image = file_exists('img/' . $row_master['img']) ? 'img/' . $row_master['img'] : 'placeholder.png';

Full code:

<?php
require_once('dbconnection.php');
mysqli_select_db($conn, $dbname);
$query_master = "SELECT DISTINCT * FROM `master_list` INNER JOIN types_join ON master_list.join_id=types_join.join_id WHERE `type_id` = 171 ORDER BY `item_id`";
$master = mysqli_query($conn, $query_master) or die(mysqli_error());
$row_master = mysqli_fetch_assoc($master);
$totalrows_master = mysqli_num_rows($master);
?>

<!doctype html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Trees</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>

<body>

<div class="wrapper">
    <a id="top"></a>
    <?php require_once('header.php'); ?>
    <?php require_once('nav.php'); ?>
    <div class="category"><h2>Flower Trees</h2></div>           
    <div class="display">
      <?php do { 
          $image = file_exists('img/' . $row_master['img']) ? 'img/' . $row_master['img'] : 'placeholder.png';
      ?>
      <ul>
          <li><a href="details.php?recordID=<?php echo $row_master['master_id']; ?>"><img class="thumb" src="<?php echo $image; ?>"/>
          <br />
          <span class="name"><?php echo $row_master['name']; ?></span></a></li>
      </ul>
      <?php } while ($row_master = mysqli_fetch_assoc($master)); ?>
    <!-- end .display --></div>
    <?php
    mysqli_free_result($master);
    ?>
    <?php require_once('footer.php'); ?>
<!-- end .wrapper --></div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
</body>
</html>

Upvotes: 1

Blue
Blue

Reputation: 22911

Using jQuery, you can accomplish something easy enough using a global $('img') handler when errors occur. Simply swap them out with your placeholder image afterwards.

$('img').on('error', function() {
  const oldSrc = encodeURIComponent($(this).attr('src'));
  $(this).attr('src', `https://via.placeholder.com/300/000000/FFFFFF/?text=${oldSrc}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="imagethatdoesntexist.jpg"><br />
<img src="anotherimage.jpg">

Here I use placeholder.com (A convenient site for placeholder images such as this), and inject the old image source into the query string, which the site will render in the image itself.

Upvotes: 0

Related Questions