Composite thumbnail image

[cobberas]

Hi folks

I have several JPEG thumbnail images in a database and need to select particular ones, stitch them together and post them into single cell in the table on a website. I've created the following query:

SELECT s.Set_Code, t.Mimetype, GROUP_CONCAT(t.Image SEPARATOR  '<&nbsp\;>') 
AS 'Image'
FROM Thumbnails t
INNER JOIN Sets s ON s.Component_Code = t.Product_Code
WHERE s.Set_Code="SBDCR1-WSET"
GROUP BY s.Set_Code

It works if I replace the image with the filename, but when I use the image itself, the image file gets corrupted ("JPEG Error #53")

Any ideas on how to create a composite thumbnail that's made up of several pre-selected images stored in a database?

Many thanks!

[smantscheff]

Use an HTML table instead with one thumbnail image for each table cell.

[cobberas]

Use an HTML table instead with one thumbnail image for each table cell.

Thanks smantscheff. That would work except that the thumbnail that gets displayed (and also the number of thumbnails that get displayed) in each cell depend on the contents of the adjacent cells. Hence the need for an SQL query that can pick the required thumbnails from the database and display them in the one cell.

[smantscheff]

Show a sample of how the HTML code should look like.

[cobberas]

<tr>
     <td colspan="1">
          <img src="image.php?Product_Code=SBDCR1-WT">&nbsp;<img src="image.php?Product_Code=SBDCR1-WS">
     </td>
     <td colspan="4"><strong>EWFD</strong> Class set:<br /><br>
          Teacher Guide<br><br>
          Student Guide</td>
     <td>$100.00</td>
     <td>
          <input id="prod_0" name="product[SBDCR1-WSET]" type="text" class="input50" value="0" 
          onChange="calculate_totals();">
     </td>
     <td id="total_0">$0.00</td>
</tr>

This is one dynamically-generated row; there are about 20 rows, 1 for each "set", and a bunch of images in each row showing each of the "products" making up the set.

I can get 1 image to display from the database but no more (I've typed the 2nd one in by hand, in the code above).

[smantscheff]

If you do not want all processing in one query you will have to generate the whole bunch of image tags in your query. It might work like that:

SELECT s.Set_Code, GROUP_CONCAT(concat( '<img src="image.php?Product_Code=', t.Product_Code, '"/>&nbsp;' )) AS 'Image'
FROM Thumbnails t
INNER JOIN Sets s 
ON s.Component_Code = t.Product_Code
WHERE s.Set_Code="SBDCR1-WSET"
GROUP BY s.Set_Code

What for do you need the Mimetype in your query?

[cobberas]

Sorry, I DO want all processing in one query. I had just created the above query as an example of how I want to concatenate the thumbnail images. I don't use the Mimetype.

The actual query that creates the HTML I posted is:

SELECT p.Product_Code, p.Title, p.Subtitle, 
	GROUP_CONCAT('<br>',c.Subtitle,' x ',s.Quantity SEPARATOR '<br>') AS 'Components', 
		GROUP_CONCAT(s.Component_Code SEPARATOR ',') AS 'Component_ID', p.Price
FROM Products p
INNER JOIN Sets s ON s.Set_Code = p.Product_Code
INNER JOIN Products c ON c.Product_Code = s.Component_Code
GROUP BY p.Product_Code
ORDER BY p.Display_order

Then I use a foreach loop to display each image:

foreach (explode(",",$myrow[Component_ID]) AS $component_id) {
			$set_product_table.="<img src=\"image.php?Product_Code=".$component_id."\">";
		}

however this displays the images one by one, above one another, not adjacent to each other - which is what I want.

Maybe I could use your idea of

GROUP_CONCAT(CONCAT( '<img src="image.php?Product_Code=', t.Product_Code, '"/>&nbsp;' )) AS 'Image'

instead of

GROUP_CONCAT(s.Component_Code SEPARATOR ',') AS 'Component_ID'

I think I'm getting confused!

[smantscheff]

How a string of images is displayed in the browser depends on their size, the css styles working on them, the width of the surrounding box, (div or table) etc. but has nothing to do with how you retrieve them from the database.
Yes, you are confused. First code a working HTML model for your purpose. Then write the code to generate it from the database.
And better start with valid HTML. Do not omit the image sizes for faster page rendering in the browser, do not omit the ALT tag for code validity.

[cobberas]

OK, thanks smantscheff. Sorry - I'm new to this work.