Displaying Thumbnails for a Gallery


#1

Helllo, I could use some help doing something that is pretty common on e-commerce sites.

I would like to create a gallery of products by displaying thumbnails of each product that I carry.

I need a design using HTML/CSS that is flexible and allows the number of products to increase/decrease.

That is to say, i don’t want to code something that only works for 10 products, because in a month I might have 100 products to display!

I will need to write some server side code to retrieve the list of items and their corresponding thumbnails from my database, and then I need my HTML/CSS to lay items out in a row one after the other, and when the end of the line s reached, things wrap around to the next row, and this behavior continues until the end of the list.

Can someone please help me figure out how to do this?!

Thanks!!


#2

You’ll need to use a database to do this effectively. You switch to learning a database (like MySQL using PHP) when you expect to have 20 or more repeating patterns.

You put the item information into database rows with the filename of the thumbnail included. In the PHP page, you’ll have the code that draws the information from the row in the database and formats it for online, then it goes to the next matching row, formats it for online, and so on until the parameters no longer match (a parameter might be for a category like “men’s shoe” for the row).

Your hosting company may already have MySQL installed, which means you can set up the database by entering information into fields. This is an old article I wrote on how I went this route: https://iphonedevlog.wordpress.com/2014/03/28/populate-your-phonegap-app-with-data-from-an-external-server-db/

I hope these thoughts help nudge you in the right direction. I learned to code MySQL and PHP through a Sitepoint book. Here is one, in case you want to get started: https://www.sitepoint.com/premium/books/php-mysql-novice-to-ninja-6th-edition


#3

@WebSteve,

Thanks but you didn’t answer my question. I already know how to do PHP and MySQL.

What I need help with is the HTML/CSS to make it so I can add/remove thumbanils and it won’t break the gallery.


#4

Hi there UpstateLeafPeeper,

have a peep at this example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1 {
    font-size: 1.5em;
    text-align: center;
    text-transform: uppercase;
 }
#links {
    display: flex;
    flex-wrap: wrap;
    max-width: 74.375em;  /* (( li width + 0.5em margin ) x 7 ) */
    padding: 0.25em;
    margin: 0 auto;
    border: 1px solid #999;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
    list-style: none;
 }
#links li {
    width: 10.125em;
    margin: 0.25em;
 }
#links img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #000;
    border-radius: 0.4em;
 }
@media ( max-width: 77em ) {
#links {
    max-width: 63.75em; /* (( li width + 0.5em margin ) x 6 ) */
  }
 }
@media ( max-width: 67em ) {
#links {
    max-width: 53.125em; /* (( li width + 0.5em margin ) x 5 ) */
  }
 }
@media ( max-width: 57em ) {
#links {
    max-width: 42.5em;  /* (( li width + 0.5em margin ) x 4 ) */
  }
 }
@media ( max-width: 47em ) {
#links {
    max-width: 31.875em;  /* (( li width + 0.5em margin ) x 3 ) */
  }
 }
@media ( max-width: 37em ) {
#links {
    max-width: 21.25em;  /* (( li width + 0.5em margin ) x 2 ) */
  }
 }
@media ( max-width: 25em ) {
#links {
    max-width: 10.625em;  /* ( li width + 0.5em margin )  */
  }
 }
</style>

</head>
<body> 
 <h1>gallery links</h1>
 <ul id="links">
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/162x100" width="162" height="100" alt=""></a></li>
 </ul>
  
</body>
</html>

coothead


#5

@coothead,

First off, as always, thank you for taking so much time to try and help me out with examples.

Unfortunately, this time when I try that on my main computer which is a Macintosh running Firefox, all I see is a page heading titled “Gallery Links” and then an empty rectangular box below it.

I assume there is supposed to be more?! :slight_smile:


#6


#7

I would have to guess that your “Mac” does not like this link…

http://placehold.it/162x100

@ronpat’s post shows how the page should display. :winky:

Check out the attachment which includes a test image
instead of an external link to a site…

UpstateLeafPeeper.zip (6.1 KB)

coothead


#8

Hi there UpstateLeafPeeper,

@ronpat has just informed me that this company address…

http://placehold.it/

… has now been changed to…

https://placeholder.com/

…and they now recommend addressing using…

https://via.placeholder.com/160x100 for the image

The original URL used in my example worked fine for me
on Windows7, although it was rerouted to placeholder.com

So it’s possible that your “Mac” did not allow the old URL
to be forwarded to the new one.

coothead


#9

@coothead,

Yep, changing the URL fixed things! :wink:

So to implement your suggestion, I would just need to query my - yet to be built - database and return a recordset with all applicable products and then use some sort of loop to stick then in your underordered list?


#10

Hi there UpstateLeafPeeper,

you would use PHP to create the HTML unordered
list
from your database and the CSS that I gave you,
or similar, to appropriately display it. :winky:

coothead


#11

Let me back up and explain what I’m working on…

This is part of a module where a user is signing up for a membership. If the user chooses the “Platinum” membership plan, then the user gets a free book. So after choosing the “Select” button, the user would be taken to a page instructing them to “Please choose your free book…” and then I would have a gallery of books to choose from.

I was thinking of just having thumbnails which would be an image of the book cover, and then if the user clicks on the thimbnail, they would be taken to a “product details” page where they would see an enlarged image, product details, description, pricing, etc.

Do you think a gallery like you created would work for this?

Do you think my process flow will make sense to a user?


#12

I assume you know you will need server-side processing such as PHP, Java or C# to retrieve the data and generate the HTML.

I think that you basically need to use a table. Your server-side processing will simply generate a row’s worth of cells, one for each product, then add the row then continue for as many rows as you want to generate or you have no more data.

You will need to have a way of knowing what product is clicked when that happens. There are many ways to do that; one possibility would be to put the product id in the argument for the click event JavaScript function but there is probably a better way to do it depending on your server-side language/environment.


#13

Just to clarify, I presume you are referring to CSS table layout display:table;, as a gallery of thumbnails is not tabular data and an HTML table would therefore be inappropriate.

Edited for clarity.


#14

I said table in a generic sense. It is not my intent to judge either way. It is left for the person requesting assistance to decide how to do it.

I assume that CSS table layout refers to display:table, display:table-row, display:table-cell and related properties, not the CSS table-layout property.

Certainly the input to a gallery is a list, not rows and columns but a gallery is typically formatted as rows and columns.

I really think that discussion of whether to use CSS table properties or old-fashioned HTML tables is outside the scope of this question. I think that UpstateLeafPeeper can do it however they want to.