Member Avatar for servis

All Dears,

I want to create images horizontal thumbnails view in 3 columns rather than vertical list view in 1 column. I have created vertical list view in 1 column, but now i am not understanding how
to create thumbnails view in 3 columns php script.

Please help in this regard.

  • 2 Contributors
  • 3 Replies
  • 118 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by synking

Dani AI

Generated

— since your images are files and metadata lives in MySQL, the simplest, robust pattern is: query the DB for filenames, ensure filenames are safe, generate/cache thumbnails once, and let CSS produce a 3-column grid. pointed to gallery examples — instead of a full package, a compact PHP loop + CSS grid is usually easier to integrate and maintain.

Do this in three steps: (1) fetch rows with a prepared statement (PDO or mysqli) so SQL is safe; (2) for each row use basename() and file_exists() to avoid path traversal, create a small thumbnail on demand (and save it to a thumbs/ folder) instead of resizing the full image on every request; (3) output simple markup for each item and use CSS Grid or Flexbox to get three columns and responsive behavior. Use loading="lazy" on <img> to improve page load.

Example (minimal) pattern:

<?php
// assume $pdo is a PDO instance
$stmt = $pdo->query("SELECT id,filename,title FROM images ORDER BY id DESC");
echo '<div class="gallery">';
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
  $file = basename($row['filename']);
  $src  = "images/$file";
  $thumb = "thumbs/$file";
  if (!file_exists($thumb) && file_exists($src)) {
    create_thumb($src, $thumb, 240); // implement with GD/ImageMagick
  }
  echo '<a href="'.htmlspecialchars($src).'"><img src="'.htmlspecialchars($thumb).'" alt="'.htmlspecialchars($row['title']).'" loading="lazy"></a>';
}
echo '</div>';
?>

/* CSS */
.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.gallery img { width:100%; height:auto; display:block; }
@media (max-width:700px){ .gallery { grid-template-columns: repeat(2,1fr); } }
@media (max-width:400px){ .gallery { grid-template-columns: 1fr; } }

Troubleshooting & cautions: check webserver permissions on thumbs/, watch case-sensitive paths on Linux, restrict accepted image types, escape output with htmlspecialchars(), and avoid regenerating thumbs on every request. For thumbnail generation, see the PHP image functions in the manual (GD/ImageMagick) and implement caching to keep the page fast.

Recommended Answers

All 3 Replies

Member Avatar for synking

All Dears,

I want to create images horizontal thumbnails view in 3 columns rather than vertical list view in 1 column. I have created vertical list view in 1 column, but now i am not understanding how
to create thumbnails view in 3 columns php script.

Please help in this regard.

Are you pulling the images from a directory from a database, or from a website. cuz the code would change depending on those factors.

Member Avatar for servis

yes i am pulling the images from a directory with support of database. Images are in a directory and rest of the information is in mysql database...

Member Avatar for synking

Ok if you want to show them as links to display a bigger version look at this page this is what i used

http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm
if that dosn't help show some of the code you have and more of how you have it setup to if i can help.

i just found something better using just php

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.