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?!
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).
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.
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?
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?
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.
Just to clarify, I presume you are referring to CSS table layoutdisplay:table;, as a gallery of thumbnails is not tabular data and an HTML table would therefore be inappropriate.
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.
