Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Food for thought - alistapart Responsive images post


Recommended Posts

I believe there hasn't been a discussion yet on responsive images for oscommerce, I think this is a good post to kick it off ...

 

http://alistapart.com/article/responsive-images-in-practice

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

the community BS has bootstraps own flavour of responsive images, which isn't 100% ideal.    

 

I know that there are some massive changes to how images are "shown" upcoming, so we'll need to look at it when it's for sure fully defined...I was reading a blog post somewhere (might have been by Marcotti, I can't remember) and I thought to myself "complicated"...

 

We'll need to beef up the product images system on the categories page, maybe put it into its own tab and allow for multiple sizes of the same image.  

 

Or have some flavour of image resizing on the fly (when a product is added/edited), then have an updated tep_image function to output correct <ims srcset stuff ...

 

Thoughts ?

Link to comment
Share on other sites

my thought was, if this is the way to go with all those image size, definitely need that capability included in the core.

at the moment, I'm sitting on the fence, i have the adaptiveimages server side script running - but I think this will/should spark quite some discussion

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I've been using a thumbnailer for years. I think it's really useful and limits bandwith a lot. Plus, I use a watermark that is created on the fly and I can use any image size and the store will resize depending on its use. It would be really nice to have a thumbnailer included by default.

 

I'm currently adapting this add-on to work with 2.3.4BS. I found useful adding another argument to tep_image that tells the thumbnailer what size should use (thumbnail, preview, full size image or category image) instead of definingimage sizes each time we use them.

It could be also useful to add image sizes for mobile views, loading the corresponding size and avoiding javascript or browser resizing.

About the way that BS234 currently shows images I found that using different aspect ratios makes the grids go mad. I use both portrait and landscape images and I'm trying to figure out how to fix height for product images on grid views. I still didn't find a decent solution.

Link to comment
Share on other sites

The simplest option would be to have a system that;

 

- the shopowner adds his/her multiple images as normal in the product adding/editing page, but these images are large.

 

- we build some type of thumbnailer to also save these images at other widths

 

- saves these images as new filenames appropriately

 

- tep_image function is updated to output code like this (jpg, gif, png etc), jpg used in example:

 

 

<img src="1201_1_small.jpg" srcset="1201_1_medium.jpg 1000w, 1202_1_large.jpg 2000w">

 

aka

 

 

<img src="XXXX_Y_small.jpg" srcset="XXXX_Y_medium.jpg 1000w, XXXX_Y_large.jpg 2000w">

 

Where XXXX = product ID and Y = the Id of the added image.  In this way a product can have many such images:

 

 

<img src="1201_1_small.jpg" srcset="1201_1_medium.jpg 1000w, 1202_1_large.jpg 2000w">
<img src="1201_2_small.jpg" srcset="1201_2_medium.jpg 1000w, 1202_2_large.jpg 2000w">
<img src="1201_3_small.jpg" srcset="1201_3_medium.jpg 1000w, 1202_3_large.jpg 2000w">
 
So, in the above example, the shopowner inserted a new product which went in as ID 1201.  Using the multiple image manager, he inserted 1 large image of (say) 10 inches wide and 8 inches deep.  That is the large.jpg, which is renamed as XXXX_Y_large.jpg, also thumbnailed down to medium (say 600px wide) and small (say 300px wide).
 
That makes sense to me at least and is possibly the most simple solution.
Link to comment
Share on other sites

To resize images during upload in admin has the "handicap" that the user may change the image dimensions he want for e.g. the large view at some point

 

This would require to resize all images that are already uploaded

 

I think it would be better to create thumbnails of images when they are first viewed on the store side in a similar way as FWR's image thumnbnailer does

Link to comment
Share on other sites

@@multimixer

why not - you create different dimensions at the backend, and you create them on the fly if they don't exist.

I currently create them on the fly, and when I changed the dimensions of the thumbnails a few years ago, I fetched the complete product listing at a quiet time on the server ...

I just created a little php page to show all the images in the correct dimensions. A bit of a hack, but effective.

 

@@wHiTeHaT

I don't see the benefit of all those directories for each products image sizes

 

btw proposed solution based on product ids looses any seo benefit the product filename itself might have

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I use same folder for each image size (original, small, medium, large...) inside image directory. I see no need to create a folder for each product.

 

The images are resized on the fly when first user need each one, so there's not a lot of extra space for image sizes that nobody uses.

 

I made some modifications to osc imagemagic: http://addons.oscommerce.com/info/6637. If I remember well it adds a hash to the end of the filename to see if the image has changed or user has selected different sizes or compression in admin, then it deletes the old thumbnails and creates new ones each time an image is requested and no thumbnail is found for that size. That system works really fine.

Link to comment
Share on other sites

@@wHiTeHaT

I could reply in detail on why/how I have done certain things, but it is not about me or my particular setup/need here, or house-kitchen-garden solution (pun intended - huis-keuken-tuin oplossing), btw I have images grouped in directories per brand, with resized images named filenames original-WidthxHeight.jpg

 

I do feel strongly about a system that does things on the fly when needed, can do things in bulk and is using the same code so ensuring consistency in the images created in bulk or on the fly.

 

Leaving the floor now to other people to comment / give ideas / opinions

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...