I changed my image size in packing slip template and lost my images completely

Store Design
1

Calling all code experts! :slightly_smiling_face:

I changed my desired image size in my packing slip template from %58 to %100.

The next day my thumbnails were missing completely.

I reverted back to %58, no change.

I reverted back to the theme default template, and our packing slips are still printing without the thumbnails.

I replaced the default with my txt code that includes all our modifications, but I’m wondering if anyone out there can help me identify the missing piece? I highlighted our change in green.

Thank you in advance. :slightly_smiling_face:

Here is my current template:

{{ shop.name }}

Order {{ order.name }}

{{ order.created_at | date: "%B %e, %Y" }}

Ship to

{% if shipping_address != blank %} {{ shipping_address.name }} {% if shipping_address.company != blank %}
{{ shipping_address.company }} {% endif %}
{{ shipping_address.address1 }} {% if shipping_address.address2 != blank %}
{{ shipping_address.address2 }} {% endif %} {% if shipping_address.city_province_zip != blank %}
{{ shipping_address.city_province_zip }} {% endif %}
{{ shipping_address.country }} {% else %} No shipping address {% endif %}

Bill to

{% if billing_address != blank %} {{ billing_address.name }} {% if billing_address.company != blank %}
{{ billing_address.company }} {% endif %}
{{ billing_address.address1 }} {% if billing_address.address2 != blank %}
{{ billing_address.address2 }} {% endif %} {% if billing_address.city_province_zip != blank %}
{{ billing_address.city_province_zip }} {% endif %}
{{ billing_address.country }}
{{ billing_address.phone }} {% else %} No billing address {% endif %}
{{ customer.email }}

Items

Quantity

{% comment %}
To adjust the size of line item images, change desired_image_size.
The other variables make sure your images print at high quality.
{% endcomment %}
{% assign desired_image_size = %100}
{% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
{% capture effective_image_dimensions %}
{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
{% endcapture %}

{% for line_item in line_items_in_shipment %}

{% if line_item.image != blank %}
{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
{% endif %}

{{ line_item.title }} {% if line_item.variant_title != blank %} {{ line_item.variant_title }} {% endif %} {% if line_item.sku != blank %} {{ line_item.sku }} {% endif %}

{{ line_item.shipping_quantity }} of {{ line_item.quantity }}

{% endfor %}
{% unless includes_all_line_items_in_order %}

There are other items from your order not included in this shipment.

{% endunless %}
{% if order.note != blank %}

Notes

{{ order.note }}

{% endif %}

Thank you for shopping with us!

And try out the new Chef Equation App! Calculating Costs, Creating Quote Sheets, and Magically Planning Your Baking Weeks! app.chefequation.com

{{ shop.name }}
{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
{{ shop.email }}
{{ shop.domain }}

body { font-size: 15px; }
  • {
    box-sizing: border-box;
    }

.wrapper {
width: 831px;
margin: auto;
padding: 4em;
font-family: “Noto Sans”, sans-serif;
font-weight: 250;
}

.header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
}

.header p {
margin: 0;
}

.shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 1.9em;
}

.order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}

.customer-addresses {
width: 100%;
display: inline-block;
margin: 2em 0;
}

.address-detail {
margin: 0.7em 0 0;
line-height: 1.5;
}

.subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 0.85em;
}

.to-uppercase {
text-transform: uppercase;
}

.text-align-right {
text-align: right;
}

.shipping-address {
float: left;
min-width: 18em;
max-width: 50%;
}

.billing-address {
padding-left: 20em;
min-width: 18em;
}

.order-container {
padding: 0 0.7em;
}

.order-container-header {
display: inline-block;
width: 100%;
margin-top: 1.4em;
}

.order-container-header-left-content {
float: left;
}

.order-container-header-right-content {
float: right;
}

.flex-line-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 1.4em 0;
page-break-inside: avoid;
}

.flex-line-item-img {
margin-right: 1.4em;
min-width: {{ desired_image_size }}px;
}

.flex-line-item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}

.line-item-description-line {
display: block;
}

.flex-line-item-description p {
margin: 0;
line-height: 1.5;
}

.flex-line-item-quantity {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}

.subdued-separator {
height: 0.07em;
border: none;
color: lightgray;
background-color: lightgray;
margin: 0;
}

.missing-line-items-text {
margin: 1.4em 0;
padding: 0 0.7em;
}

.notes {
margin-top: 2em;
}

.notes p {
margin-bottom: 0;
}

.notes .notes-details {
margin-top: 0.7em;
}

.footer {
margin-top: 2em;
text-align: center;
line-height: 1.5;
}

.footer p {
margin: 0;
margin-bottom: 1.4em;
}

hr {
height: 0.14em;
border: none;
color: black;
background-color: black;
margin: 0;
}

.aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}

.aspect-ratio::before {
z-index: 1;
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(195,207,216,0.3);
}

.aspect-ratio–square {
width: 100%;
padding-bottom: 100%;
}

.aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

2

I would recommend styling your image with CSS