[Skip to main content](#vessel-content) # Layout Bug - Product Page and Thumbnails ## - **[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")** - [![gteigland's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4840-gteigland "View gteigland's Profile") Topic Author - [ Offline](/forum/user/4840-gteigland) Less More - Posts: 41 - Thank you received: 0 - - 13 years 11 months ago [\#81691](#81691) by [gteigland](/forum/user/4840-gteigland "View gteigland's Profile") *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#81691 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* was created by *[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")* I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND <div style="height:<?php echo $divHeight+20;?>px;text-align:center;clear:both;" class="hikashop_product_main_image"> I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks - [ ![hikashop_thumbnail_issue.jpg](/forum/attachment/7531) ](/forum/attachment/7531 "...nail_issue.jpg") [ ](/forum/attachment/7531?download=1 "...nail_issue.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26400 - Thank you received: 4080 - - [](http://obsi.dev) - 13 years 11 months ago [\#81771](#81771) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#81771 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* Hi, This bug has been fixed in the latest HikaShop package. There is a french topic which explain the bug fix: [ www.hikashop.com/en/forum/5-support-en-f...-le-texte.html#80912](http://www.hikashop.com/en/forum/5-support-en-francais-french-support-/76510-image-produit-sur-le-texte.html#80912) Here the "translated" version: > This fix has to be apply on the view "product \| show\_block\_img" of your front-end template. > It is a classical override which would replace: > > Code: > > <div style="height:<?php echo $divHeight+20;?>px;text-align:center;clear:both;" class="hikashop_product_main_image"> > > > > By: Code: > > <div style="<?php if(!empty($divHeight)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image"> Regards, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. The following user(s) said Thank You: [gteigland](/forum/user/4840-gteigland "View gteigland's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")** - [![gteigland's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4840-gteigland "View gteigland's Profile") Topic Author - [ Offline](/forum/user/4840-gteigland) Less More - Posts: 41 - Thank you received: 0 - - 13 years 11 months ago [\#81784](#81784) by [gteigland](/forum/user/4840-gteigland "View gteigland's Profile") Replied by *[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")* on topic *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#81784 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* Worked great! Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")** - [![gteigland's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4840-gteigland "View gteigland's Profile") Topic Author - [ Offline](/forum/user/4840-gteigland) Less More - Posts: 41 - Thank you received: 0 - - 13 years 10 months ago [\#82232](#82232) by [gteigland](/forum/user/4840-gteigland "View gteigland's Profile") Replied by *[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")* on topic *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#82232 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* Now I discover a new problem but related. If the thumbnail is smaller then what I set then in the category view with all the products, it blows up the image and then affects all the other ones after it. See image attached. Is there a code that needs to be replaced in category view as well. Thanks! - [ ![category-issue.jpg](/forum/attachment/7600) ](/forum/attachment/7600 "...gory-issue.jpg") [ ](/forum/attachment/7600?download=1 "...gory-issue.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26400 - Thank you received: 4080 - - [](http://obsi.dev) - 13 years 10 months ago [\#82439](#82439) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#82439 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* Hi, Could you provide a link to your store ? I think there is a file access problem because you have some missing images. Regards, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")** - [![gteigland's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4840-gteigland "View gteigland's Profile") Topic Author - [ Offline](/forum/user/4840-gteigland) Less More - Posts: 41 - Thank you received: 0 - - 13 years 10 months ago [\#82441](#82441) by [gteigland](/forum/user/4840-gteigland "View gteigland's Profile") Replied by *[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")* on topic *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#82441 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* Actually I know it's not a file url problem. Because for example on this page: [ new.furnitureandthings.com/browse-produc...57-occasional-tables](http://new.furnitureandthings.com/browse-products/category/57-occasional-tables) The "Chairside Cabinet" is causing the problem. When I resize that image to what I set for thumbnails (150px or above) then everything works fine. Right now that image for Chairside Cabinet is smaller then 150px which for whatever reason is messing up the rest of the products on that page. It's a similar problem showing up on the category page. Does that make sense? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 13 years 10 months ago [\#82548](#82548) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#82548 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* The link provided doesn't work. Could you check that ? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")** - [![gteigland's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4840-gteigland "View gteigland's Profile") Topic Author - [ Offline](/forum/user/4840-gteigland) Less More - Posts: 41 - Thank you received: 0 - - 13 years 10 months ago [\#82591](#82591) by [gteigland](/forum/user/4840-gteigland "View gteigland's Profile") Replied by *[gteigland](/forum/user/4840-gteigland "View gteigland's Profile")* on topic *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#82591 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* Sorry.. This should work. [ furnitureandthings.com/index.php?option=...al-tables&Itemid=389](http://furnitureandthings.com/index.php?option=com_hikashop&ctrl=category&task=listing&cid=57&name=occasional-tables&Itemid=389) YOU HAVE TO GO TO PAGE 5 in that category to see the issue. Thanks Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86555 - Thank you received: 14304 - - 13 years 10 months ago [\#82863](#82863) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Layout Bug - Product Page and Thumbnails](/forum/3-bug-report/76684-layout-bug-product-page-and-thumbnails#82863 "I isolated the problem but can't figure out a solution. 1. Set thumbnail size to 250px on width only in Configuration/files 2. If I load an image that is smaller then 250px in width then the description text is behind the image. 3. When I use firebug it says the div "hikashop_product_main_image" height: 20px 4. I went into file show_block_img.php and noticed these codes: $style = ' style="height:' . ($height +20) . 'px;"' AND I'm assuming that "20" is where it's getting that css. So Im assuming when there is no image that's what it puts in but like I said earlier this css pops in when I load an image that is smaller then what I sent for thumbnails size. I have a large catalog and image sizes are all over the place. For example this image I loaded has a width of 225px. You can see what happens to the description. If I change the settings in configuration/files to 225px then it works fine. But I need to have that setting at 250px since I have images sizes all over the place. Thanks")* Ok, I see what it the problem. It's because the system uses the first image of the listing in order to decide of the ideal size when you don't specify one of the dimensions for the thumbnails and since the normal image of your product is smaller that the dimension that you specified for the thumbnails, the system ignores it and it considers that no thumbnails are necessary for the images. Please change the code: Code: if(empty($width)){ list($width, $height) = $this->scaleImage($theImage->width, $theImage->height, 0, $height); } if(empty($height)){ list($width, $height) = $this->scaleImage($theImage->width, $theImage->height, $width, 0); } to: Code: if(empty($width)){ if($theImage->height >= $height){ list($width, $height) = $this->scaleImage($theImage->width, $theImage->height, 0, $height); }else{ $width=$this->image->main_thumbnail_x; } } if(empty($height)){ if($theImage->width >= $width){ list($width, $height) = $this->scaleImage($theImage->width, $theImage->height, $width, 0); }else{ $height=$this->image->main_thumbnail_y; } } in the file administrator/components/com_hikashop/helpers/image.php and that should avoid that issue. The following user(s) said Thank You: [gteigland](/forum/user/4840-gteigland "View gteigland's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC83NjY4NC1sYXlvdXQtYnVnLXByb2R1Y3QtcGFnZS1hbmQtdGh1bWJuYWlscz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.076 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)