Forum
Perch Shop Image issue
I'm having an image issue with Perch Shop. I've been developing a store, and everything seemed to be working. I am now having some issues with how images are displaying. I recently updated a few product images, and now they will only display at full resolution in the list.html template. The other images that I didn't update still show up as 80x80. This seems to happen any time I update info, or re-save the product details for any product.
I have not changed the code in the product.html master template. However, I will post it here.
<perch:shop id="sku" type="text" label="SKU" required="true" order="1" />
<perch:shop id="title" type="text" label="Title" required="true" order="2" />
<perch:shop id="slug" type="slug" editable="true" indelible="true" label="Slug" for="title sku" order="10" divider-before="Meta data" />
<perch:shop id="description" type="textarea" label="Description" editor="markitup" order="3" markdown="true" size="s" />
<perch:shop id="image" type="image" label="Main product image" order="4" width="800" />
<perch:shop id="image" type="image" width="80" height="80" density="1.6" crop="true" />
<perch:shop id="status" type="shop_status" label="Status" />
<perch:shop id="brand" type="shop_brand" label="Brand" allowempty="true" />
<perch:categories id="category" set="products" label="Category">
<perch:category id="catTitle" />
</perch:categories>
<perch:shop id="catalog_only" type="shop_catalog_only" label="Catalog only" />
<perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="m" min="0" step="any" />
<perch:shop id="sale_price" type="shop_currency_value" label="Sale price" size="m" min="0" step="any" />
<perch:shop id="trade_price" type="shop_currency_value" label="Trade price" size="m" min="0" step="any" runway="true" />
<perch:shop id="on_sale" type="checkbox" value="1" label="Use sale price" />
<perch:shop id="tax_group" type="shop_tax_group" label="Tax group" required="true" />
<perch:shop id="stock_status" type="shop_stock_status" label="Stock status" divider-before="Stock" required="true" />
<perch:shop id="stock_level" type="number" label="Stock level" size="s" />
<perch:shop id="stock_location" type="shop_stock_location" label="Count stock" />
<perch:shop id="max_in_cart" type="number" label="Max quantity in cart" size="s" />
<perch:shop id="requires_shipping" type="shop_requires_shipping" label="Requires shipping" divider-before="Shipping" />
<perch:shop id="weight" type="number" label="Shipping weight" size="s" />
<perch:shop id="width" type="number" label="Width" size="s" />
<perch:shop id="height" type="number" label="Height" size="s" />
<perch:shop id="depth" type="number" label="Depth" size="s" />
<perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
<perch:input id="product" type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
<perch:input type="submit" value="Add to cart" />
</perch:form>
The code I'm using in my custom list template is as follows:
<perch:before>
<div class="col-md-3 nav-right">
<div class="primary-content">
<h1>Products</h1>
<ul class="listing">
</perch:before>
<li>
<div class="product-list">
<div class="item-thumb">
<perch:shop id="image" type="image" width="80" height="80" density="1.6" crop="true" output="tag" />
</div>
<div class="item-desc">
<a href="/shop/products/<perch:shop id="slug" type="slug" />/">
<perch:shop id="title" type="text" />
</a>
<perch:if not-exists="has_variants">
<perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
<perch:input id="product" type="hidden" value="<perch:shop id="productID" env-autofill="false" />" />
<perch:input type="submit" value="Add to cart" />
</perch:form>
</perch:if>
</div>
</div>
</li>
<perch:after>
</ul>
</div>
</div>
</perch:after>
Make sure that the image sizes in your list template match those in your master template. If you're getting a full size image, it's an indication that the resized variant can't be found.
Why would some of the images resize correctly, but others don't? This happened when I updated one image. I then tried saving the details on another product, and I then had the same image resize issue, even though I didn't change the image.
Are you able to reproduce the steps that cause this?
Yes. If I go into the CMS, and open "product details" for any product and save. I don't have to make any changes. Just clicking save seems to update some sort of setting, and causes the image resize issue. The "products" that I created two days ago still appear correctly...unless I re-save them.
The template looks fine, so I'm slightly at a loss. What changed between when it was working and when it wasn't?
The template is the same as it was when it was working correctly. The only thing that changed was that I wanted to add the option to upload two images for a product. I made a change to the master template to see how it would affect things. Once I realized that wouldn't work, I changed the template back to what it had been. However, I now have this issue. So, I don't know if somehow there's a caching type issue within Perch.
What change did you make? The more information you can give me, the more chance I have of deducing what's wrong and what needs to be done to fix it.
I added this line of code, I think. I don't remember exactly what I added, but I believe this is it. I later removed this line.
If you upload a new image, what happens to that?
It has the same problem.
Here is the code that is output on the images that look correct.
Here is the code that is output when it appears incorrectly
Can you show me your diagnostics report?
It looks like you're working on a live server - is there any chance that your modified files haven't fully deployed or are cached?
That was the problem. I remembered that Perch caches different items, so I changed the config.local.php to development mode by adding
It is now working. I thought it might be a cache issue, but I couldn't remember how to clear the cache. It looks like that did the trick. Thanks!
It's actually PHP that caches the files. Glad you got it sorted.