Image files (size method)
For every image uploaded to ShopWired, ShopWired creates 5 separate image files (the original and four resized versions).
ShopWired provides a that can be applied to image URLs to return a specifically sized image.
Four separate image sizes are available:
Size | Method argument | Image size |
---|---|---|
Small | small | no larger than 300px width |
Medium | medium | no larger than 500px width |
Large | large | no larger than 1000px width |
Extra large | extra-large | no larger than 1600px width |
To return an image in the required size, use the image method, e.g.
product.photo_url('small')
You can replace product.photo_url
with the variable for the image you want to return.
Image URLs
Each size version of an image has its own distinct URL, this is how ShopWired uses the specific image size.
For example, for an image with the URL
https://cdn.ecommercedns.uk/files/1/123456/1/123456789/nike-trainers.jpg
will display the original image uploaded. When the small version of the file is referenced in your theme, the image URL will be
https://cdn.ecommercedns.uk/files/1/123456/1/123456789/nike-trainers_small.jpg
Each image size has it's own URL, _small
, _medium
, _large
, _extra-large
.
These URL suffixes are part of the expected and normal behaviour in ShopWired and allow themes and the platform to serve the appropriately sized image for different contexts, improving loading times and user experience.