Thumbnail size for Options

I am using product options (Size, colors, etc).



I have removed (left blank) the thumbnail size settings in Administration > Settings > Thumbnails > Product thumbnail width, and Product thumbnail height



Initially, I set it to 225x300. But I realized the auto scaling doesn’t produce good results, so I removed this setting. It works fine now, except on the thumbnails for Product Options. They are still auto scaled to 225x300 on product options thumbnails… how come? I have deleted the thumbnails and reupload, have also tried rebuild combinations. The result is still the same.

Anyone has any tips?



I emailed support and got the following from support though:



Thank you for your request. Unfortunately, your technical support period is expired so now we cannot render you the assistance free of charge. If you want to continue using our support service, you need to order either support credits or a support period on the “Services” page in your Help Desk account.

I did try options picture last week and was first impressed first. Then I was unhappy since the picture sizes were out of my control. Then I tried text with the pictures.

(text without pictures does not display text). Now when i try to use the pictures, I can only see very small coloured area and not pictures. There must be a bug or needs future enhancement .

Edit and turn the picture 90 degree and upload. See if you get different thumbnail size on the admins and also on the home page.

Use sizes larger than 50px × 50px

look in manifest file

[quote name=‘deMarchi’]look in manifest file[/QUOTE]



What is a manifest file?.. sorry, this beats me. :slight_smile:

[quote name=‘alanpro’]What is a manifest file?.. sorry, this beats me. :)[/QUOTE]



All right, just did a search and found the manifest file. But it doesn’t have configuration for thumbnail sizes… it only have logo size configuration.

This problem is really annoying… no one knows where the settings are kept? I tried looking for the width x height (for thumbnails, for Options) settings in the database, but so far I have not found it. Too many tables…



Anyone can help? SOS SOS… :rolleyes:

The thumbnail settings are stored in the cscart_settings table. You can do a regexp search on the option_name field to get the following:


option_id option_name section_id subsection_id option_type value position is_global
14 thumbnail_width Appearance I 85 110 Y
7072 create_thumbnails Thumbnails C Y 10 Y
7114 resize_thumbnail Thumbnails C Y 20 Y
7073 product_thumbnail_width Thumbnails I 120 30 Y
7080 product_thumbnail_height Thumbnails I 120 40 Y
7074 category_thumbnail_width Thumbnails I 120 50 Y
7113 category_thumbnail_height Thumbnails I 120 60 Y
7095 thumbnail_background_color Thumbnails I #ffffff 70 Y




These should reflect what you are entered into the Appearance and Thumbnail settings.



Take a look at this code in /skins/YOURSKIN/customer/views/products/components/product_options.tpl

// images
pr_i[{$id}] = {$ldelim}{$rdelim};
{foreach from=$product.option_image_pairs item="imag" name="ii" key="_key"}
pr_i[{$id}][{$smarty.foreach.ii.iteration}-1] = {$ldelim}
'image_id': '{$imag.image_id}',
'detailed_id': '{$imag.detailed_id}',
'options': '{$imag.options}'
{$rdelim};
{if $imag.image_id}
pr_i[{$id}][{$smarty.foreach.ii.iteration}-1]['icon'] = {$ldelim}
'alt': '{$imag.icon.alt}',
'type': '{$imag.icon.type}',
'src': '{$imag.icon.image_path}',
[COLOR="Red"]'src-mini': '{$imag.icon.image_path|fn_generate_thumbnail:34}'[/COLOR]
{$rdelim};
{/if}
{if $imag.detailed_id}
pr_i[{$id}][{$smarty.foreach.ii.iteration}-1]['detailed'] = {$ldelim}
'image_path': '{$imag.detailed.image_path}'
{$rdelim};
{/if}
{/foreach}

{if $product.main_pair.icon}
{assign var="image_pair_var" value=$product.main_pair}
{elseif $product.option_image_pairs}
image_changed[{$id}] = "Y";
{assign var="image_pair_var" value=$product.option_image_pairs|reset}
{/if}
{if $image_pair_var}
default_image[{$id}] = {$ldelim}
'src': '{$config.no_image_path}',
'src-mini': '{$config.no_image_path|fn_generate_thumbnail:34}',
'alt': '{$image_pair_var.icon.alt|escape:javascript}'
{$rdelim};
default_href[{$id}] = '{$image_pair_var.detailed.image_path}';
{/if}





The product option thumbnails appear to be generated with a width of 34.



Bob

[quote name=‘jobosales’]

The product option thumbnails appear to be generated with a width of 34.



Bob[/QUOTE]



Width = 34pixels? I have the same code in my skin, but that 34 cannot be the width of the thumbnail, because the width of my thumbnails now is 225 pixels.



Let me explain this again. Previously I entered width:225, height:300 in Cs-cart system. Then I realized I don’t have thumbnails or pictures in this exact proportion, so I removed these settings and now all thumbnails following the picture’s physical dimension which is great, EXCEPT those thumbnails in Options - they still stick to 225x300 - so they get distorted slightly - UGLY!



My cscart_settings look like this:



option_id option_name section_id subsection_id option_type value position is_global
14 thumbnail_width Appearance I 110 Y
7072 create_thumbnails Thumbnails C Y 10 Y
7114 resize_thumbnail Thumbnails C N 20 Y
7073 product_thumbnail_width Thumbnails I 30 Y
7080 product_thumbnail_height Thumbnails I 40 Y
7074 category_thumbnail_width Thumbnails I 120 50 Y
7113 category_thumbnail_height Thumbnails I 120 60 Y
7095 thumbnail_background_color Thumbnails I #ffffff 70 Y




Any idea??



Thanks. :slight_smile:

The 34 pixel images are the mini-thumbs used for the additional images (the ones you click on to change the main image shown).



The images for product options (the ones in the product block that change the option when you click on them) are 50 pixels. It appears that the 50 is hard-coded somewhere but I have not found it yet. Are these the images that are still 225x300 for you?



Do you have a link to a product that demonstrates the problem?



Bob

[quote name=‘jobosales’]

The images for product options (the ones in the product block that change the option when you click on them) are 50 pixels. It appears that the 50 is hard-coded somewhere but I have not found it yet. Are these the images that are still 225x300 for you?



Do you have a link to a product that demonstrates the problem?



Bob[/QUOTE]



I am a little confused… not sure where/what do you mean by “the ones in the product block that change the option when you click on them”…



Anyway, my problem is with the product images that are displayed when I select from the drop down options. I use color options. So, when I select a different color (from the drop down option list), the main product image changes to the relevant image, but instead of following the thumbnail picture’s physical size, it seems to fix at 225x300.



Clicking on this thumbnail picture, a popup comes up showing the larger picture.



There is another row of very small thumbnails at the bottom which is in 30 or 50 pixels width – this is fine.



(So far, I may have confused you with my term thumbnail, my thumbnail is actually the medium sized images. There are “Very small thumbnails”, then “thumbnails”, then “big images”.).


  1. Very small thumbnails (at the bottom)
  2. Thumbnails (the main images)
  3. Big images, which popup



    It’s the thumbnails that are having problem, with size seems to be fixed at 225x300.



    Sorry, my site is not meant to be live yet. So can’t show you a link having the problem.

I think those images are stored in the /images/product directory rather than the thumbnail directory. You could check images in the /images/product directory to see if they are 225x300. If they are, you might want to backup the /images/product directory and then delete all the items in there to see if the images are regenerated without the scaling.



Bob

[quote name=‘jobosales’]I think those images are stored in the /images/product directory rather than the thumbnail directory. You could check images in the /images/product directory to see if they are 225x300. If they are, you might want to backup the /images/product directory and then delete all the items in there to see if the images are regenerated without the scaling.



Bob[/QUOTE]



Images are stored in images/product_option/ folder. I can see it in the properties (right click on the image and select properties). Also can see this:-



225px × 330px (scaled to 225px × 300px)



This means the physical image’s size is 225px × 330px. Anymore idea?



Thanks.

I do not have the /images/product_option directory. Also, the main image does not change when I select a different option from the dropdown menu which is the same way that it works on the demo site. Maybe I am missing a setting somewhere.



Not that it should make a difference since you have removed the thumbnail dimensions, but have you tried unchecking the “Resize original thumbnail” checkbox in Settings>Thumbnails? Maybe that would help.



Other than that, I am out of ideas.



Bob

[quote name=‘jobosales’]I do not have the /images/product_option directory. Also, the main image does not change when I select a different option from the dropdown menu which is the same way that it works on the demo site. Maybe I am missing a setting somewhere.

[/QUOTE]



I think you have missed a setting or two. Not sure which setting you have missed, but this is what I have done →



In “Pricing / inventory” section, in the Inventory field, select “Track with options”.



Then in Options, add some options, such as Colors or Sizes…



Then, in “Option combinations”, add a different image for the different options. If didn’t see anything in “Option combinations”, click on “Rebuild combinations”.



After this is done, selecting the different options will show the different images you entered in “Option combinations”.


[quote name=‘jobosales’]

Not that it should make a difference since you have removed the thumbnail dimensions, but have you tried unchecking the “Resize original thumbnail” checkbox in Settings>Thumbnails? Maybe that would help.

[/QUOTE]



I already have “Resize original thumbnail” unchecked.

I believe the size setting is saved in the mysql database. But question is which table and which field. Is there a way to search for a “string” in all the fields of all the tables in a database?

I have narrowed down in the script where the thumbnails are displayed.



The file is skins/[skin]/customer/views/products/components/product_images.tpl

There is a line that goes:

{include file=“common_templates/image.tpl” obj_id=$product.product_id images=$image_pair_var object_type=“product” class=“cm-thumbnails”}



Apparently this code includes the file “common_templates/image.tpl”… but the weird thing is no matter what I change in image.tpl, the result is the same. Am I changing the wrong image.tpl?



Weird…



But when I changed the line sligtly, for example, change the class name to cm-thumbnails111, it’s reflected in the final html generated on the website. So, definitely is this line.



{include file=“common_templates/image.tpl” obj_id=$product.product_id images=$image_pair_var object_type=“product” class=“cm-thumbnails111”}



Result: xxx



Gurus, any idea here?

I have the same problem, i cant found the code where is the 34 for the mini thumbs.

O.K, i have the solution from our great CS-Cart Support Team



Please let me explain.



In order to change the image size you need to find the following part of code in the “product_images.tpl” file located in the “skins/[CUSTOMER_ACTIVE_SKIN]/customer/views/products/components” directory:



{assign var="th_size" value="34"}
{include file="common_templates/previewer.tpl"}


and replace 34 with the desired value.



have fun!