Member Avatar for JasonWung

Hi,
I have this situation

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
          $images[] = [
               'image' => $row['image']
          ];
}
function image_html($image) {
      return '<img src="' . $image['image'] . '" class="img-responsive" />';
}

echo '<div class="small-box">            
         '. image_html($images[0]) .'
      </div>
      <div class="small-box">            
         '. image_html($images[1]) .'
      </div>';

      // some more divs

Is it possible to check if there is no image_html($images[0]) to hide the <div class="small-box"> because right now I got empty box on the page?

Edited by pritaeas because: Moved to PHP.
  • 3 Contributors
  • 6 Replies
  • 216 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by ryantroop

Dani AI

Generated

Short answer: emit the box only when there is a valid image source, or emit a deliberate fallback image. As suggested, change the rendering logic so empty boxes are never written into the page in the first place. For the small/medium/large slot pattern mentioned by , normalize the result set to a simple list of valid URLs, then map those URLs to the size classes and render only the present ones.

Example: extract and filter the image strings, then render slots that have values.

$srcs = array_values(array_filter(
    array_map(function($r){ return trim($r['image'] ?? ''); }, $images)
));

$slots = ['small-box','medium-box','large-box'];

foreach ($slots as $i => $cls) {
    if (!isset($srcs[$i])) continue;
    echo '<div class="'.$cls.'"><img src="'.htmlspecialchars($srcs[$i], ENT_QUOTES).'" class="img-responsive" alt="" loading="lazy"></div>';
}

If a visual placeholder is preferred instead of hiding the whole box, supply a known default source when the slot is empty (for example, $src = $srcs[$i] ?? '/img/placeholder.png'), but only emit markup for intentional fallbacks so the layout remains predictable.

Add a client-side safety net: if an image fails to load (bad URL), remove or hide the parent box so broken images do not leave empty space.

document.querySelectorAll('.small-box img, .medium-box img, .large-box img').forEach(function(img){
  img.onerror = function(){ this.closest('div').style.display = 'none'; };
});

Troubleshooting notes: trim and filter empty strings from the DB results, verify that stored paths are correct (absolute vs relative), escape output, and prefer limiting rows at the query level when only N slots are needed. This keeps markup minimal and behavior predictable, as recommended — only create what is actually available.

Recommended Answers

All 6 Replies

Member Avatar for pritaeas

Like this?

foreach ($images as $image)
{
    echo '<div class="small-box">' . image_html($image) . '</div>';
}
Member Avatar for JasonWung

Thank's for the answer but I need to use my current source because I have different columns with different image size etc.
So along with small-box I have also medium-box and large-box.

p.s. I also don't see how your answer will hide( or place default image ) if there is no record in database table?

Edited by JasonWung
Member Avatar for pritaeas

Correct, not hide, it doesn't display any. If you want to hide one:

$style = '';
if (!isset($images[0]))
{
    $style = ' style="display:hidden" ';
}

echo '<div class="small-box"' . $style . '>' . image_html($images[0]) . '</div>';
Member Avatar for JasonWung

Is it possible to apply this to whole $images[] ... $images[0], $images[1].... and so on. I mean do I need to write something like:

if (!isset($images[0]) && !isset($images[1]) && !isset($images[1]) && !isset($images[N]))
{
....
}

or there is another solution?

Member Avatar for pritaeas 
if (count($images) == 0)

It's hard to answer without knowing the bigger picture.

Edited by pritaeas
Member Avatar for ryantroop

I think what priteas is trying to get across to you is that you need to change your thinking.

Consider it this way: "only display the box when there are images to display."

That way, you are not trying to "fix" something post render or mid build.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.