Option Image Size Setting?

Developers Frontend
1

Where would I find the location to set the size of the generated Image for Option variants?

It seems to be set to 50 but thers nothing under Admin>Settings>Thumbnails

Hope this is an easy one?

2
.ty-product-options__image {
  1. display: inline-block;
  2. margin: 2px 0;
  3. border: 2px solid #fff;
  4. cursor: pointer;
  5. min-height: 52px;
}
You can change the min-height to suit
3

Hi Johnbol1,

Thats not actually what I was asking.

To clarify, the Image of an option varient is created on the backebd, and currently saved under /thumbnails/50/50.

The thumbnail is resized to 50x50px when it is created.

Then in the storefront, it is set to min-width by css as you point out.

What I want to set is the size of the thumbnail to something like 70px when it is created.

If I just set the minimum size in css to 70px, the 50px image is blow up to 70px which looks blurry.

Annoyingly there is no setting for this in Admin that I can see.

4

Please check the following file: design/themes/THEME/templates/views/products/components/product_options.tpl

{include file="common/image.tpl" class="$_class ty-product-options__image" images=$var.image_pair image_width="50" image_height="50" obj_id="variant_image_`$obj_prefix``$id`_`$po.option_id`_`$var.variant_id`" image_onclick="fn_set_option_value('`$obj_prefix``$id`', '`$po.option_id`', '`$var.variant_id`'); void(0);"}
5

This should work, however make sure it does not break mobile view, google may drop pages from index if everything does not fit nicely..

Please check the following file: design/themes/THEME/templates/views/products/components/product_options.tpl

{include file="common/image.tpl" class="$_class ty-product-options__image" images=$var.image_pair image_width="50" image_height="50" obj_id="variant_image_`$obj_prefix``$id`_`$po.option_id`_`$var.variant_id`" image_onclick="fn_set_option_value('`$obj_prefix``$id`', '`$po.option_id`', '`$var.variant_id`'); void(0);"}
6

Ok ecl, thanks for the info,

Sad that this is hardcoded when other thumbnail settings are configured in admin.

Ill probably set .ty-product-options__image {heigth:70px;} and have the thumbnails created at image_width="140" image_height="140".

They will look crisper that way, and easier to adjust again in css later.

Interesting that the option image thumbnails are created by a storefront file rather than a backend file!

Thanks.

7

Ok, I made changes to the frontend file:

design/themes/responsive/templates/addons/my_changes/overrides/views/products/components/product_options.tpl

And I see that the thumbnails are generated only when the product page is loaded in the frontend., so that explains why the thumbnail creation is done by a frontend template.

However the changes are not effected, the thumb's are still created under /images/thumbnails/50/50/variant_image// and are still 50x50px.

The override product_options.tpl file is working as other changes within it work fine.

Even edited the core design/themes/responsive/templates/views/products/components/product_options.tpl template just to confirm.

Yep, Cleared the local and server caches with &cc&ctpl and within admin. Also cleaned up the thumbnails.

Any ideas why the new settings are not implementing?

Note to cscart architects -- I would expect these settings to be included under admin>settings>thumbnails !

8

Try to delete the var/cache directory manually

9

Thanks again ecl, I bet you tire of giving that instruction.

I just keep falling for this every time. Trouble with removing the /var/cache via ssh is that the new files and folders are randomly created with root:root ownership, which requires ssh login and issuing of all the chown and chmod commands under sudo. What a pain,

Anyway, Done, and fixed.

10

Thanks again ecl, I bet you tire of giving that instruction.

I just keep falling for this every time. Trouble with removing the /var/cache via ssh is that the new files and folders are randomly created with root:root ownership, which requires ssh login and issuing of all the chown and chmod commands under sudo. What a pain,

Anyway, Done, and fixed.

I am glad to hear that the issue is solved :)

11

Can anyone tell me similar for 4.10

the variations images under the variant.

I see this when I inspect

we have a lot of colour images and they are too big

https://prnt.sc/ow0h67

thanks

12

Can anyone tell me similar for 4.10

the variations images under the variant.

I see this when I inspect

we have a lot of colour images and they are too big

https://prnt.sc/ow0h67

thanks

templates/views/products/components/product_options.tpl

{include file=“common/image.tpl”

class=“$class ty-product-options__image"

images=$var.image_pair

image_width=“50”

image_height=“50”

obj_id="variant_image$obj_prefix``$id$po.option_id$var.variant_id”

image_onclick=“fn_set_option_value(‘$obj_prefix``$id’, ‘$po.option_id’, ‘$var.variant_id’); void(0);”

}