Page 1 of 1
Help needed: Product Page challenge
Posted: Thu Oct 14, 2010 1:10 am
by maven2designs
Hi, Thanks everyone for helping out in advance. I've got a programming problem and have no idea how to get is started. So here goes.
Background:
- I have thumbnails and product images (which are different) in the same folder. All the thumbnails are appended with a -thumb at the end of their filenames. For example product A's image will be producta.png and its thumb will be producta-thumb.png. This is the naming convention I've used to upload product images via a php upload script.
- I also have captured the product name/image filename/thumbnail filename in a database table when the file is uploaded.
- The product page is basically broken up into 2 sections. The top section where the product image is displayed and the bottom section where the thumbnails are. Users should be able to click on the thumbnails to view the product image.
The Problem:
I need help in creating the table of thumbnails. It should connect to the database, pull out the information regarding the location of thumbnails and arrange them alphabetically in three rows of 10. However, my client's specification is also that if there are only 29 images, the topmost row should have 9 images centre aligned. I've done a mock-up using #Maps here:
http://www.nzn.com.sg/production/products.html. They want to retain the pyramid structure.
My other problem is that I need to link these thumbnails to the actual file images to be displayed in the top section. Each of these links should also be unique links for the products so I can refer to them in emails and such.
This problem has me stymied for the longest time. Any ideas?
Re: Help needed: Product Page challenge
Posted: Thu Oct 14, 2010 1:53 am
by Benjamin
These are the kinds of problems I like to solve.
Code: Select all
<?php
# query for the images, lets populate an array of 29 images
$images = array();
for ($i = 1; $i <= 29; $i++) {
$images[$i] = "image_$i.png";
}
# create an array to hold the table rows
$table_rows = array();
# calculate an offset to ensure only the first row is assigned less than 10 images
$offset = 30 - count($images);
# fill the table from the bottom up, pulling images off the array in reverse order
for ($i = 3; $i > 0; $i--) {
# calculate what images we want for this row, must be a non-negative value
$array_offset = max((($i - 1) * 10) - $offset, 0);
# copy the images from the array
$table_rows["row_$i"] = array_slice($images, $array_offset, 10);
# we don't want to display duplicate images, so let's get rid of them
$images = array_slice($images, 0, $array_offset);
}
# display the images
?>
<table>
<?php foreach ($table_rows as $images): ?>
<tr>
<td style="text-align: center; height: 50px;">
<?php foreach ($images as $image): ?>
<div style="display: inline; width: 100px; border-width: 1px; border-style: solid; border-color: #666666; margin: 5px; padding: 5px; font-size: 12px;">
<?php echo $image; ?>
</div>
<?php endforeach; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
Re: Help needed: Product Page challenge
Posted: Thu Oct 14, 2010 11:39 pm
by maven2designs
*edited*
Thank you Benjamin,
I think your code will work perfectly. Just needs some minor adjustment methinks.
Code: Select all
<?php
// connection string
// get thumb location
$thumbs = mysql_query("SELECT * FROM products ORDER by ProductName");
// populate images array
$images = array();
for ($i = 1; $i <= 29; $i++) {
$row = mysql_fetch_array($thumbs);
$loc = $row['ThumbLocation'];
$images[$i] = $loc;
}
$table_rows = array();
$offset = 30 - count($images);
for ($i = 3; $i > 0; $i--) {
$array_offset = max((($i - 1) * 10) - $offset, 0);
$table_rows["row_$i"] = array_slice($images, $array_offset, 10);
$images = array_slice($images, 0, $array_offset);
}
?>
The pyramid is upside-down. I would like the pyramid to be the other way round.
I also need to figure later how to connect this back to the main image the thumbnails correspond to.
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 12:20 am
by Benjamin
In your screen shot there are less images in the first row, which is how my code rendered them. I'm not sure I understand what you mean by upside down. If you take that code and throw it into a file you will see an example of how it would display the images.
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 1:28 am
by maven2designs
For some reason, I'm getting this:
The bottom row should be on top. I'm trying to figure what went wrong.
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 1:48 am
by Benjamin
Post your code.
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 2:02 am
by maven2designs
Here you go:
Code: Select all
<?php
$conn=mysql_connect("localhost", "username", "password");
mysql_select_db("datbase", $conn);
$thumbs = mysql_query("SELECT * FROM products ORDER by ProductName");
$images = array();
for ($i = 1; $i <= 29; $i++) {
$row = mysql_fetch_array($thumbs);
$loc = $row['ThumbLocation'];
$images[$i] = $loc;
}
$table_rows = array();
$offset = 30 - count($images);
for ($i = 3; $i > 0; $i--) {
$array_offset = max((($i - 1) * 10) - $offset, 0);
$table_rows["row_$i"] = array_slice($images, $array_offset, 10);
$images = array_slice($images, 0, $array_offset);
}
?>
<table>
<?php foreach ($table_rows as $images): ?>
<tr>
<td style="text-align: center; height: 50px;">
<?php foreach ($images as $image): ?>
<div style="display: inline; width: 55px; border:none; margin: 1px; padding: 1px; font-size: 12px;">
<?php echo "<img src=$image>"; ?> </div>
<?php endforeach; ?> </td>
</tr>
<?php endforeach; ?>
</table>
The only two modifications I did to your code was at the beginning to query to image locations and at the end with the img tag.
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 2:11 am
by Benjamin
Ah ok. The rows need to be displayed in reverse order, change this bottom part:
Code: Select all
<table>
<?php for ($i = 1; $i <= 3; $i++): $images = $table_rows["row_$i"]; ?>
<tr>
<td style="text-align: center; height: 50px;">
<?php foreach ($images as $image): ?>
<div style="display: inline; width: 55px; border:none; margin: 1px; padding: 1px; font-size: 12px;">
<?php echo "<img src=$image>"; ?> </div>
<?php endforeach; ?> </td>
</tr>
<?php endfor; ?>
</table>
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 2:34 am
by maven2designs
Perfect! Works like a charm. Thanks so much! I have some questions though if you don't mind:
For this instance, it assumes that there will always be 29 images in the database. How do I make it work if I have a maximum of 30 images... but I want it to follow this structure if there were only 28 or 29 images? I know I can get the number of images dynamically with a simple PHP query... Will the formulas used work if it was 30 or 28?
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 4:08 am
by Benjamin
It's only written to display up to 30 images. What you want to do is just replace for the for loop with code that will load the array with images from the database. It will count the number of images and make sure the bottom two rows each get 10 with the top receiving what is remaining.
Code: Select all
for ($i = 1; $i <= 29; $i++) {
$row = mysql_fetch_array($thumbs);
$loc = $row['ThumbLocation'];
$images[$i] = $loc;
}
Should be:
Code: Select all
while ($row = mysql_fetch_array($thumbs)) {
$images[] = $row['ThumbLocation'];
}
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 6:03 am
by maven2designs
I'm populating the database now to see how it's coming out with all those images. I seem to be getting an interesting result.
It filled up one row first until that row hit 9 items, and then it added one row (with one item) below at 10 items. It also added one row (with one item) to the top at 11 items. And then from there it started populating the 1st Row.
1st Row has 2
2nd Row has 9
3rd Row has 1
At 12 items
1st Row has 7
2nd Row has 9
3rd Row has 1
At 17 items
1st Row has 9
2nd Row has 9
3rd Row has 1
At 19 items
And it's added 1 more row at 20 items: 9-1-9-1!
Re: Help needed: Product Page challenge
Posted: Fri Oct 15, 2010 6:13 am
by maven2designs
Oh.... It seems that the problem arised because I messed with the margin settings. I set back the margin to the earlier value and it doesn't give me that problem!