Member Avatar for camdes

A primary school website I am working on is completely database driven and as part of the site the school wishes a series of photo galleries. For various reasons I cannot use any of the ready made photo galleries. I have managed to write the code for uploading the pictures into a directory and creating the thumbnails. Also for writing the required information into a database.

I can retrieve the required information from the database to display the thumbnails but no matter how I try I can only get them to display in a single column. Can someone give me some code (with explanations) to display my thumbnails in say 3 rows x 4 columns per page.

  • 3 Contributors
  • 3 Replies
  • 91 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by deepmann97

Dani AI

Generated

has the uploads and thumbnail generation in place and 's table-based loop is a quick server-side fix. A cleaner, more maintainable approach is to let PHP output a simple list of thumbnail items and use CSS Grid (or Flexbox) for the 3x4 layout, and then add server-side pagination so only 12 rows are returned per page (as requested).

A minimal front-end structure (HTML + CSS) you can drop into your template:

<div class="gallery">
  <figure>
    <a href="image.php?id=123"><img src="thumbs/123.jpg" alt="Caption" loading="lazy"></a>
    <figcaption>Caption</figcaption>
  </figure>
  <!-- repeat for each thumbnail -->
</div>
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 10px; }
.gallery figure { margin: 0; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

For pagination use SQL LIMIT/OFFSET and prepared statements (PDO example):

$limit = 12;
$page  = max(1, (int)($_GET['page'] ?? 1));
$offset = ($page - 1) * $limit;

$stmt = $pdo->prepare('SELECT id, thumb_path, title FROM images ORDER BY uploaded_at DESC LIMIT :limit OFFSET :offset');
$stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

Troubleshooting tips: if thumbnails stack in one column check computed styles (display, width) on the parent container; make sure your PHP emits the same container element for each thumbnail and that tags are closed. Use object-fit: cover to avoid varying heights, loading="lazy" for performance, and escape captions with htmlspecialchars to prevent XSS. For modern references see the PHP PDO manual and MDN on CSS Grid: PHP PDO manual and MDN CSS Grid.

Recommended Answers

All 3 Replies

Member Avatar for petr.pavel

Hi Camdes,
I must be missing something. If you managed to write a thumbnail creating code there must be something awfully difficult about making the 3x4 table.

Anyways, here's my code (cut from my existing script that displays links in a grid):

$columnsNumber = 4;
  // there will be as many rows as necessary
  print '<table class="links_table"><tr>';
  $i = 1;
  while ($link = mysql_fetch_assoc($links_db)) {
    print '<td>yourthumbnail</td>';

    if ( ($i % $columnsNumber) == 0)
      print "\n</tr><tr>\n";

    $i++;
  }
  if ( (($i-1) % $columnsNumber) != 0 )
    print "<td colspan=".($columnsNumber- (($i-1) % $columnsNumber))."></td>\n\n";

  print '</tr></table>';

It's so short that I don't thing comments are necessary. However, let me know if you need them.

Member Avatar for camdes

Thank you for the code, I will attempt it tonight.
When I said I had managed to write the code for the thumbnails, what I meant was that using other code and tutorials I had managed to cobble something together that would create them. Unfortunatly my programming skills are taken from the Idiots Guide books on HTML and PHP. Not from any great knowledge of programming.

Member Avatar for deepmann97

Hi this is really useful code. i want to pagination if u can help me

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.