I wonder if there is any way to set up image uploader that can automatically fill entire image on the product preview? I am testing my image uploader but I think I ran into a situation where the image is either not being fully displayed (partially cut) or the image size is too small to overlay entire preview area. I have tried to play with liquid code for the image position and image size, but it doesn’t seem to apply to all the images as they are all in different sizes. Does any one know any tips that can get the image uploader to display preview image more responsively ? Pictures below are for reference.
Thank you.
Hi @zakkyoung.business, I think the problem here is that you have the “free” crop option. In this case, the image’s aspect ratio may differ from the aspect ratio of your preview area, which makes it difficult to display the preview properly. Consider disabling the “free” option and keeping only one aspect ratio that’s equal to the ratio of this area (approx 16/9)
Thank your for responding to my question. Does it mean that the preview area has to be set at the same spot? I have some images that have a preview area set close to the center of it while others are set close to the top. As far as i know, the preview area can only be positioned at one particular area and may not apply to other images that have preview area positioned at a different spot.
Would it be possible that the image uploader can display or fit the image based on the transparent cutout area on the preview image other than displaying it at the fixed position on the image? (assuming the uploaded image does not need to be cropped or changed) Thank you.
The product preview on your product page is implemented using the CSS background property. You have a product image with a transparent area, and when a user uploads an image, your script takes its CDN URL and sets it as a background image for the product image. As a result, the transparent area gets filled with the uploaded image. Given that the transparent area has a fixed aspect ratio and the uploaded image doesn’t, there’s a chance of a mismatch. Also, your script sets a particular size and position of the background relative to the base image:
You may need to adjust these values to align them with the actual size and ratio of your product image’s preview area. Nevertheless, I think that setting a mandatory crop is the best way to make it work properly. Otherwise, you’ll have to recalculate the relative size/offsets for every image based on its aspect ratio.
with it being said, does it mean that the transparent area needs to be in a fixed position otherwise it may have mismatch issues on product images that has a transparent area set in a different position? Thank you.
Sorry I couldn’t reply sooner! Yes, that’s correct. For a basic implementation, you should use one image with a transparent area per product, and the position of the area must be fixed so that you can specify the parameters of the CSS background accordingly.
