Solved

Shopify new order printer - cannot produce line item images

UK_Aspire_Vendo
Pathfinder
122 8 24

We're attempting to migrate from order printer (now a legacy app) to Shopify Order printer, and our template no longer produces line item images.

 

The code we were previously using is as follows:

<td class="product-image-wrapper"><img src="{{ line_item.image | img_url: 'medium' }}"></td>

 

This now produces a broken image icon instead and I cannot fathom how to get this to work.

Any assistance would be greatly appreciated.

Accepted Solution (1)

Bob_
Explorer
61 12 11

This is an accepted solution.

This code works for me -  <td><img src="https://cdn.shopify.com/s/files/1/0551/5085/{{ line_item.image | image_tag }}" style="Width:100px"></td>

 

But I suspect it won't for you, but if you go onto the old Order Printer and right click on open image in a new tab you should be able to get the correct path for your photo's (the two lots of 4 digits after /files/1/ are probably different for every store.

.

View solution in original post

Replies 7 (7)

tim
Shopify Expert
3578 304 1332

The code is proper and generated url is proper as well, but image is blocked because of CSP (content security policy) which does not include your own domain.

It could work with older cdn urls which all were served from https://cdn.shopify.com, but now all assets are served from https://yoursite.com .

Nothing we can do -- need to contact Shopify support...

 

Thats's the CSP served on order printer HTML documents:

 

child-src 'self' https://* shopify-pos://* blob:;
connect-src 'self' blob: wss://* https://* https://bugsnag-mtl.shopifycloud.com:4900/js hcaptcha.com *.hcaptcha.com;
default-src 'self' data: blob: https://* shopify-pos://*;
frame-src app.shopify.com *.shopifyapps.com *.myshopify.com *.myshopify.com https://* shopify-pos://* hcaptcha.com *.hcaptcha.com blob: http://localhost:*
media-src 'self' data: blob: https://videos.shopifycdn.com https://cdn.shopify.com/videos/ https://cdn.shopify.com/shopifycloud/web/assets/v1/ https://almond-sandpiper-6593.twil.io/assets/;
script-src 'self' 'unsafe-inline' 'unsafe-eval' cdn.shopify.com cdn.shopifycdn.net *.shopifycs.com www.google-analytics.com stats.g.doubleclick.net app.shopify.com app.myshopify.com c.paypal.com www.paypal.com appcenter.intuit.com mpsnare.iesnare.com api.stripe.com maps.googleapis.com js.braintreegateway.com songbird.cardinalcommerce.com hcaptcha.com *.hcaptcha.com www.youtube.com s.ytimg.com;
style-src 'self' 'unsafe-inline' data: blob: https://*;
upgrade-insecure-requests;
worker-src 'self' blob:


If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
tim
Shopify Expert
3578 304 1332

Looks like they've fixed something( ?) and original code works for me now.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Bob_
Explorer
61 12 11

This is an accepted solution.

This code works for me -  <td><img src="https://cdn.shopify.com/s/files/1/0551/5085/{{ line_item.image | image_tag }}" style="Width:100px"></td>

 

But I suspect it won't for you, but if you go onto the old Order Printer and right click on open image in a new tab you should be able to get the correct path for your photo's (the two lots of 4 digits after /files/1/ are probably different for every store.

.
tim
Shopify Expert
3578 304 1332

Yeah, that's what meant by "old cdn urls", but it's kinda weird to do it like this, right?

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Bob_
Explorer
61 12 11

Yeah, That's was what got me looking at it this way as I was confinced I just hadn't got the "new" liquid commands right and it was something I'd done (or wasn't doing) 😄 

.
UK_Aspire_Vendo
Pathfinder
122 8 24

Yeah this worked a treat! Thank you so much. What a horrendous way for us to get our packing slips to work eh?

Bob_
Explorer
61 12 11

To be fare the old one won't stop working until the end of August so you can still use it until then and I suspect any issues like this will be fixed by then. I also suspect this might stop working at some point as well as if they are changing over to //storename/cdn instead of //cdn.shopify.com these links may stop working, but we'll see.

.