Jump to content
bruyndoncx

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

Share this post


Link to post
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 ?

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
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.

Share this post


Link to post
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.

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
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

Share this post


Link to post
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

Edited by bruyndoncx

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

By the way, I see no need for keeping the main image in products table if the images can be resized by a thumbnailer.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×