Crazy image size in Showroom!

Highlighted
Shopify Expert
136 0 0
Hi Guys, Not sure whats gone on here but a customer just pointed this out to me: http://www.productivegardens.com.au/ Click on the 'Strawberry Delight' product - the image its displaying is huge. Seems like its not been resized on import or the theme image size selector is not correct. Although the site is heavily re-styled, I'm using pretty much the standard code from Showroom. Anyone come across this type of problem before?
Winners - 2008 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ Finalists - 2007 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ HQ: http://www.propellerglobal.com/ | Domains & Hosting: http://domains.propellerglobal.com/ Shopify Stores: http://shop.proplaster.com.au | http://www.thekhalsaraj.com | http://www.productivegardens.com.au | http://www.elephantrose.com.au | http://www.stradbrokeweddings.com.au | http://www.solution-central.com.au
0 Likes
Highlighted
Shopify Staff
Shopify Staff
2002 0 45

Damien: We did a change recently which makes it so that images are kept as original by shopify and are only resized upon usage. The odd thing is that this should not affect current themes.

It seems that showroom unfortunately doesn’t use the right filter for product images and shows http://asset1.jadedpixel.com/s/files/shops/0001/6426/products/dsc2362.jpg instead of http://asset1.jadedpixel.com/s/files/shops/0001/6426/products/dsc2362_large.jpg .

Daniel forgot to run the image through the proper resizing method in the shop.js file.

Line


$('product-lightbox-image').update('<img src="'+product.featured_image+'" alt="" />');

Should have been


$('product-lightbox-image').update('<img src="'+Shopify.resizeImage(product.featured_image, 'large')+'" alt="" />');
Tobias Lütke - Shopify CEO // http://twitter.com/tobi
0 Likes
Highlighted
Shopify Expert
136 0 0

Still not working. Doesn’t seem to be appending ‘large’ to the image for some reason and I’m afraid my js is not up to the job to figure out why.

Winners - 2008 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ Finalists - 2007 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ HQ: http://www.propellerglobal.com/ | Domains & Hosting: http://domains.propellerglobal.com/ Shopify Stores: http://shop.proplaster.com.au | http://www.thekhalsaraj.com | http://www.productivegardens.com.au | http://www.elephantrose.com.au | http://www.stradbrokeweddings.com.au | http://www.solution-central.com.au
0 Likes
Highlighted
New Member
247 0 0

There seemed to also be a problem in the api.js that would not return the proper large image but the original instead.

This is fixed now and you’ll see your product images working again by the next time we deploy.

Showroom users who use images bigger than 480×480 still need to change that one line in the javascript (sorry about that).

0 Likes
Highlighted
Shopify Expert
136 0 0

Its all good now – well done guys.

Winners - 2008 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ Finalists - 2007 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ HQ: http://www.propellerglobal.com/ | Domains & Hosting: http://domains.propellerglobal.com/ Shopify Stores: http://shop.proplaster.com.au | http://www.thekhalsaraj.com | http://www.productivegardens.com.au | http://www.elephantrose.com.au | http://www.stradbrokeweddings.com.au | http://www.solution-central.com.au
0 Likes
Highlighted
Shopify Expert
136 0 0

Sorry to be a pain but could you guys tweak the api.js again. It seems the original image loaded is fine but if you select one of the thumbnails, we’re back to the same old problem – the original (full size) image is loaded:- here – http://ellefuns.myshopify.com/collections/hombres/

Winners - 2008 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ Finalists - 2007 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ HQ: http://www.propellerglobal.com/ | Domains & Hosting: http://domains.propellerglobal.com/ Shopify Stores: http://shop.proplaster.com.au | http://www.thekhalsaraj.com | http://www.productivegardens.com.au | http://www.elephantrose.com.au | http://www.stradbrokeweddings.com.au | http://www.solution-central.com.au
0 Likes
Highlighted
New Member
247 0 0

Thanks for letting us know! There was still something left in the javascript of the actual showroom theme that wasn’t adjusted to the new image sizes.
Change the following line in your shop.js


link.onclick = function(t) { $('product-lightbox-image').firstChild.src = image; return false; };

to


link.onclick = function(t) { $('product-lightbox-image').firstChild.src = Shopify.resizeImage(image, 'large'); return false; };

I’ve also made this change to the theme (and they will be live soonish) – but since you’re already working on it and probably don’t want to re-apply it, it’d be easier to just change that line.

0 Likes
Highlighted
Shopify Expert
136 0 0

NIcely done, all ok again.

Winners - 2008 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ Finalists - 2007 McFarlane Prize for Excellence in Australian Web Design: http://mcfarlaneprize.com/ HQ: http://www.propellerglobal.com/ | Domains & Hosting: http://domains.propellerglobal.com/ Shopify Stores: http://shop.proplaster.com.au | http://www.thekhalsaraj.com | http://www.productivegardens.com.au | http://www.elephantrose.com.au | http://www.stradbrokeweddings.com.au | http://www.solution-central.com.au
0 Likes
Highlighted
New Member
49 0 0

“We did a change recently which makes it so that images are kept as original by shopify and are only resized upon usage.”

yay! but can one over-ride the resize upon usage part? i tried this:

<img src="{{ image | product_img_url: 'original'}}" />

but it was still resized on display (original is 880px wide. output was 800px, so close)

thank you!

0 Likes