WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Bakery Shop => Topic started by: svsanchez on July 07, 2015, 12:45:09 AM

Title: Force thumb size in Item Detail
Post by: svsanchez on July 07, 2015, 12:45:09 AM

Hello, Bakery users, hopefully this one is easy and will be usefull to other users as well: currently, I think Bakery only allows to use a few preset sizes for the Thumbnail (from 40x40 pixels to 150x150 pixels).

I would like to force the thumbnail size ONLY in the Item Detail to be something like 400 pixels wide, so that when people click on it the lightbox shows it bigger.

How can I do this?

Title: Re: Force thumb size in Item Detail
Post by: Ruud on July 07, 2015, 10:43:12 AM

If you are using Bakery 1.6.x series, go to the modify_page_setting s.php and add on line 178

Code: [Select]

$SIZES['400'] = '400x400px';
When using Bakery 1.7.x series there is a config.php in the bakery directory.

Code: [Select]

$default_thumb_sizes['400'] = '400x400px';
(you could even remove the other sizes if you do not want those).
Be sure to save the page settings because the default setting will stay 100px after creating a new bakery page.

Title: Re: Force thumb size in Item Detail
Post by: svsanchez on July 07, 2015, 05:59:10 PM

Hello Ruud, the problem is that by doing this it will set all thumbnails to 400x400, EVEN THOSE IN THE OVERVIEW which won't look great. I only want to show the 400 pixeles wide image in the ITEM DETAILS page. Is there a way to force that thumbnail / image to the size I want? Some code in the item details page that would turn [IMAGE] to something like [IMAGE width='400'] ?

Or something like "item_detail_thumbna il_size['400'] = '400x400px'; ?

Title: Re: Force thumb size in Item Detail
Post by: Ruud on July 07, 2015, 10:14:40 PM

No, that is not possible. You cannot just "make up" new variables and functionality.

Just use css to style the thumbs in the overview to the size you want.
In the overview the image will have the class "mod_bakery_main_thu mb_f", in the detail page it will have the class "mod_bakery_item_thu mb_f".

This should do the trick:

Code: [Select]

.mod_bakery_item_thumb_f { max-width: 400px; }
.mod_bakery_main_thumb_f { max-width: 150px; }

Title: Re: Force thumb size in Item Detail
Post by: svsanchez on July 08, 2015, 03:09:22 AM

Hello Ruud, that sounds amazing, unfortunately I couldn't make it work as the image appears in full size instead of 400 px (see http://www.ddneuropa.com/pages/bakery/silla-mt1-11.php (http://www.ddneuropa.com/pages/bakery/silla-mt1-11.php)). I think I have to specify what you said: in the detail page the image will have the class "mod_bakery_item_thu mb_f" but I don't know how to do this.

This is what I have in the bakery item detail footer, is it here where I have to specify that class? How do I specify it?

Code: [Select]

[IMAGE]
<table border="0" cellspacing="0" cellpadding="5" class="mod_bakery_item_table_f">
<tr>
<td colspan="2" align="left" valign="top"><h2 class="mod_bakery_item_title_f">[TITLE]</h2></td>
</tr>
<tr>
<td align="left" valign="top"><span class="mod_bakery_item_price_f">[TXT_PRICE]:</span></td>
<td align="left" valign="top">[CURRENCY] [PRICE]</td>
</tr>
<tr>
<td align="left" valign="top"><span class="mod_bakery_item_shipping_f">[TXT_SHIPPING]:</span></td>
<td align="left" valign="top">[CURRENCY] [SHIPPING] </td>
</tr>

<tr>       
<td align="left" valign="top"><span class="mod_bakery_item_full_desc_f"><p>[TXT_FULL_DESC]:</p></span></td>
<td align="left" valign="top">[FULL_DESC]</td>
</tr>
<form action="[SHOP_URL]" method="post">
[OPTION]
<tr>     
<td align="left" valign="top"> </td>
<td align="left" valign="top">
<input type="text" name="item[ITEM_ID]"  class="mod_bakery_item_input_f" value="1" size="2" />
<input type="submit" name="add_to_cart" class="mod_bakery_bt_add_f" value="[ADD_TO_CART]" />
</td>
</tr>
</form>
</table>
[PREVIOUS] | <a href="[BACK]">[TXT_BACK]</a> | [NEXT]
</center>
<br />
Thanks a lot!

Title: Re: Force thumb size in Item Detail
Post by: Ruud on July 08, 2015, 11:16:27 AM

Your output uses [IMAGE] which is the fullsize main image.

Look at your Bakery help page for all options:

[IMAGE] - main image full size
[IMAGES] - all other images full size
[THUMB] - main image thumbnail
[THUMBS] - all other images thumbs

THUMB and THUMBS will generate the images in your 400px size with the correct classes to scale them by css.

Title: Re: Force thumb size in Item Detail
Post by: svsanchez on July 08, 2015, 08:12:44 PM

Hello Ruud, that's what I had done but it showed me the thumb in 100x100 pixels instead of 400x400 pixeles, so I changed it to [IMAGE]. The reason for this was that I had to recreate the thumbnails by uploading a new image, as just making those changes left the old thumbs I had in their original 100x100 pixels  :-o.

In case anyone else needs to do this, the solution provided by Ruud works fantastic, these would be the steps:

1. Add the following line in modify_page_setting s.php if you use Bakery 1.6.x:

$SIZES['400'] = '400x400px';

Or this line if you use Bakery 1.7.x:

$default_thumb_sizes['400'] = '400x400px';

Then change the thumnail size in the bakery page settings to 400x400.

2.  Change the frontend.css in modules/bakery to style the thumbs both in the overview and item details page:

.mod_bakery_item_th umb_f { max-width: 400px; } <---This is the image in the item details page
.mod_bakery_main_th umb_f { max-width: 150px; } <---This is the image in the overview page

3. Upload your products images so that their thumbs are generated with the 400x400 size.

ENJOY THE RESULTS  :lol:

Thanks a lot Ruud!!!!