Home Ask Login Register

Developers Planet

Your answer is one click away!

user3796133 February 2016

Display multiple sized images for a product page?

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   --            

Answers


user5697101 February 2016

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

Post Status

Asked in February 2016
Viewed 2,866 times
Voted 8
Answered 1 times

Search




Leave an answer


Quote of the day: live life