Product Image Previewer - how do I change the image size?

General General Questions
1

I need to increase the size of these thumbnails but it’s not done through the admin. I checked js/previewer.js and didn’t see an option to set the dimensions.







Didn’t find it in views/products/components/product_images.tpl or in common_templates/image.tpl, and certainly not in common_templates/previewer.tpl.



Who knows how to change this? It appears to be a quick fix if only I can find where to modify.



Thanks in advance. (Running 2.0.10, by the way)

2

In:



skins/your-skin/customer/views/products/components/product_images.tpl



Change:


{include file="common_templates/image.tpl" images=$image_pair_var object_type="product" link_class="cm-thumbnails-mini cm-cur-item" image_width=$th_size show_thumbnail="Y" show_detailed_link=false}



To:


{include file="common_templates/image.tpl" images=$image_pair_var object_type="product" link_class="cm-thumbnails-mini cm-cur-item" image_width=100px show_thumbnail="Y" show_detailed_link=false}



And change:


{include file="common_templates/image.tpl" images=$image_pair object_type="product" link_class="cm-thumbnails-mini" image_width=$th_size show_thumbnail="Y" show_detailed_link=false}



To:


{include file="common_templates/image.tpl" images=$image_pair object_type="product" link_class="cm-thumbnails-mini" image_width=100px show_thumbnail="Y" show_detailed_link=false}



Basically all your doing is setting the image width. I used 100px for this example, but I would imagine that you could change it to pretty much whatever you wanted.



I hope this helps,



Brandon

3

Thank you, Brandon. That worked perfectly.



4

That’s good to know. Thank you!

5

Thanks, Brandon!

6

There is some Hook for this?

7

This don’t work in 2.1.4, the code is diferent.



My Solution for diferent width and height

i change to this this



{assign var=“thw_size” value=“120”}

{assign var=“thh_size” value=“90”}



skins/your-skin/customer/views/products/components/product_images.tpl

Full code below

[QUOTE]

{* $Id: product_images.tpl 11193 2010-11-11 13:32:22Z alexions $ *}



{assign var=“thw_size” value=“120”}

{assign var=“thh_size” value=“90”}



{include file=“common_templates/previewer.tpl”}

{if $product.main_pair.icon || $product.main_pair.detailed}

{assign var=“image_pair_var” value=$product.main_pair}

{elseif $product.option_image_pairs}

{assign var=“image_pair_var” value=$product.option_image_pairs|reset}

{/if}

{include file=“common_templates/image.tpl” obj_id=$product.product_id images=$image_pair_var object_type=“detailed_product” class=“cm-thumbnails” show_thumbnail=“Y” image_width=$settings.Thumbnails.product_details_thumbnail_width image_height=$settings.Thumbnails.product_details_thumbnail_height}



{foreach from=$product.image_pairs item=“image_pair”}

{if $image_pair}

{if $image_pair.image_id == 0}

{assign var=“image_id” value=$image_pair.detailed_id}

{else}

{assign var=“image_id” value=$image_pair.image_id}

{/if}

{include file=“common_templates/image.tpl” images=$image_pair object_type=“detailed_product” class=“cm-thumbnails hidden” show_thumbnail=“Y” detailed_link_class=“hidden” obj_id=“$product.product_id_$image_id” image_width=$settings.Thumbnails.product_details_thumbnail_width image_height=$settings.Thumbnails.product_details_thumbnail_height}

{/if}

{/foreach}



{if $image_pair_var && $product.image_pairs}

{if $settings.Appearance.thumbnails_gallery == “Y”}



{strip}



{/strip}



{script src=“js/jquery.jcarousel.js”}



{else}



{strip}

{include file=“common_templates/image.tpl” images=$image_pair_var object_type=“detailed_product” link_class=“cm-thumbnails-mini cm-cur-item” image_width=$thw_size image_height=$thh_size show_thumbnail=“Y” show_detailed_link=false obj_id=“$product.product_idmini" make_box=true}

{foreach from=$product.image_pairs item=“image_pair”}

{if $image_pair}

{if $image_pair.image_id == 0}

{assign var=“image_id” value=$image_pair.detailed_id}

{else}

{assign var=“image_id” value=$image_pair.image_id}

{/if}

{include file=“common_templates/image.tpl” images=$image_pair object_type=“detailed_product” link_class=“cm-thumbnails-mini” image_width=$thw_size image_height=$thh_size show_thumbnail=“Y” show_detailed_link=false obj_id="$product.product_id$image_id_mini” make_box=true}

{/if}

{/foreach}

{/strip}



{/if}

{/if}



[/QUOTE]

There is some way to do this in my_changes?
8

Change the size in the lightbox window and buttons



#viewer {

height: 120px;

}



.jcarousel-prev-horizontal, .jcarousel-next-horizontal, .prev-horizontal, .next-horizontal {

height: 98px;

}



.prev-horizontal, .next-horizontal {

margin-top:-19px;

}