-4

I'm trying to find a way to display multiple sized images for each product on the product page in a e-commerce site. For example I would like to have the all the images for each individual product display in a row thumbnails and when you click on the thumbnail it will display a medium sized image in the main image field and then if you click the main image field a modal dialog appears showing the large image.

I would rather use multiple sized images rather than just trying to resize a large image for thumbnails so the user doesn't have to wait for a large detailed image to load and be resized for thumbnails, that and the thumbnails have to be all the same size etc.

At the moment i have a product_images table that is linked with the products table, though I'm unsure of how to link the small, medium and large images together and load them onto the product page

tables

Products:

--------------------------------------------
-- product_id --  product-name --  etc....
--------------------------------------------
-- 4034677333 --  widget1      --  
-- 7088383839 --  widget2      --  
--------------------------------------------

Product_images:

------------------------------------------------------------------------
-- product_id --         image_name      --  small  -- medium  -- large 
------------------------------------------------------------------------
-- 4034677333 --  4034677333_0_small.png --    1   --     0   --   0  --    // First image
-- 4034677333 --  4034677333_0_med.png   --    0   --     1   --   0  -- 
-- 4034677333 --  4034677333_0_large.png --    0   --     0   --   1  --  
-- 4034677333 --  4034677333_1_small.png --    1   --     0   --   0  --    // Second image
-- 4034677333 --  4034677333_1_med.png   --    0   --     1   --   0  --  
-- 4034677333 --  4034677333_1_large.png --    0   --     0   --   1  --

So at the moment I'm trying things like displaying the thumbnails with 

SELECT * FROM product_images WHERE product_id='$id' AND small='1'

And then trying to somehow add the medium image file name that's associated with the thumbnail as a data attribute in an <a> element wrapped around the thumbnail <img> when I loop through each query result, but I just can't do it.

I think I'm going about it completely wrong, I don't know. I'm a novice here.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
user3796133
  • 338
  • 2
  • 15
  • Okay, sorry Ryan. Well i meant the best way to approach it. I couldn't think of a proper working solution myself, and was wonder how others approach it. The answer i accepted below is pretty spot on to me, and i think i can implement it pretty well. Thanks for letting me know about the quality of my question :-) – user3796133 Feb 06 '16 at 20:11
  • Let me provide a really clear example about useless `best method questions`. Imagine someone turned up and asked: `best way to sort a list of strings`? Easy. Until you look at how many `sort methods` there actually are. There must be a `best one`? apparently not - it depends on various factors ;-/ It is a well researched subject for decades. There is still no agreement. Then we have come up with the `best way of ...` whatever. – Ryan Vincent Feb 06 '16 at 20:16
  • Not upset with you! You really want to know `useful methods`! That we can answer :) – Ryan Vincent Feb 06 '16 at 20:17
  • It's all good mate, i get your point :-) i saw a similiar question to mine before i posted my question, though it didn't really help me, but the heading was a "what's the best way.." so i didn't realise it was not really a great way to ask a question. http://stackoverflow.com/questions/9450753/what-is-the-best-way-to-associate-a-thumbnail-with-an-image-in-a-mysql-database?rq=1 – user3796133 Feb 06 '16 at 20:21
  • And by selecting the answer so quickly you prevent anyone offering a better answer. You could have used that answer. And upvoted it. The instant a questions is accepted then no one bothers with it. Unless it is really interesting. – Ryan Vincent Feb 06 '16 at 20:22
  • ahh i see, another good point! i didn't think of that either – user3796133 Feb 06 '16 at 20:24
  • The question is valid, but not for stack overflow. It's just not what we do (as far as I can tell). Besides you appear to be attempting to reinvent the wheel. – Strawberry Feb 06 '16 at 21:47
  • @Strawberry How is this not a valid question for stack overflow, you f@#$ing peanut. – user3796133 Nov 29 '16 at 20:41

1 Answers1

1

To start with, to create image thumbnails that won't impact as much on loading time, tutorials can be found here:

If you're referring to making a thumbnail of an image while uploading it, refer to this question: Creating a thumbnail from an uploaded image

If I were you, I would save two images to the database when creating a new product: one that is 'medium'-sized from which the thumbnail can be created and the other the 'large' or full-sized image as it is.

Then store the two images under two different columns based on product id, in a table something like:

product_id | display_image | full_image

and SELECT them accordingly

Community
  • 1
  • 1
user5697101
  • 571
  • 4
  • 12