Creating page of thumbnails

Beginners - Learning PHP
#1

I would like to create a page of thumbnails that is database driven.

For example, imagine I have a record store and am selling 100 different vintage vinyl albums. Let’s saying I have a thumbnail of eah album cover, and based on a search, I want to display a given subset of the albums cover thumbnails. (e.g. search for Led Zeppelin albums)

I don’t need help writing that whole thing, but how would I tell PHP/HTML to lay down thumbnails one after the other going from left to right, and at the end of the row line, wrap around and continue on the next row and so on and so forth?

This question may have to do more with the HTML/CSS than the PHP, but who knows?!

#2

a search may require a database with an index file but the results can be displayed with a loop to output html which can be styled with css. I would use html and css but you need the opinion of a more experienced programmer.

Here is what i would do as an example only:

<html>
<head>
  <title></title>
  <style type="text/css">
  .albumWrapper { display: inline-block; position: relative; margin 12px; padding 12px; background: #000000; width: 560px; clear: both; }
  .album { display: block; position: relative; margin 12px; padding: 12px; width: 160px; float: left; }
  .spacer { display: inline-block; position: relative; margin: 6px; padding: 6px; background: #ffffff; text-align: center; }
  </style>
</head>
<body>
<div class="albumWrapper" align="center">
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
<div class="album"><div class="spacer"><a href="#"><img src="#" alt="" width="125" height="75" /><br />Album Title</a></div></div>
</div>

</body>
</html>

then use a loop to fill in the data with php/sql output/variables.
there are many ways to present output with html but tables are outdated. I prefer nested divs with spacing which i often refer to as exhaust pipes.

hope this is helpful.

#3

just want to repost because my example is too sloppy. I just wanted to show a quick example without spending too much time on it. However, my example isn’t responsive and the code can be cleaner. I decided to offer a more responsive method. I apologize for my sloppiness.

<html>
<head>
  <title></title>
  <style type="text/css">
  .albumWrapper { display: inline-block; position: relative; margin 12px; padding 12px; background: #000000; max-width: 550px; clear: both; }
  .album { display: block; position: relative; margin 12px; padding: 12px; max-width: 33%; float: left; }
  .spacer { display: inline-block; position: relative; margin: 6px; padding: 6px; background: #ffffff; width: 99%; text-align: center; }
  .albumCover { position: relative; width: 100%; height: auto; border: none; }
  </style>
</head>
<body>

<div class="albumWrapper">
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
  <div class="album"><div class="spacer"><a href="#"><img class="albumCover" src="coverph.png" alt="" /><br />Album Title</a></div></div>
</div>

</body>
</html>

this is much better.

1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service