ArtcoInc Posted August 5, 2015 Share Posted August 5, 2015 (234bs) Can someone confirm this for me ... If I have set my Small Image Width too wide (say, 500 px), when I am viewing the Shopping Cart, and as I shrink the screen size, when it hits the width of the image of the item(s) in the cart, the images do not rescale responsively. Instead, a horizontal scroll bar is displayed at the bottom of the screen, or stuff disappears off the right side of the screen. How can I enable the images in the Shopping Cart to rescale if the screen width is very narrow? Malcolm Link to comment Share on other sites More sharing options...
Hotclutch Posted August 5, 2015 Share Posted August 5, 2015 i tested with width = 500 and height = 400, and it scales down without a problem. I tested with this site: http://mobiletest.me/ Link to comment Share on other sites More sharing options...
♥Tsimi Posted August 6, 2015 Share Posted August 6, 2015 @@Hotclutch @@ArtcoInc Ashley, he is right when you set the images to 500x400 and add a product to the cart and look at the shopping_cart.php it doesn't scale the image down. It does scale down the image when you look at the product listing or start page but not when looking at the cart. Malcolm, just use a smaller image size, 500x400 is a large size for thumbnails. Link to comment Share on other sites More sharing options...
burt Posted August 6, 2015 Share Posted August 6, 2015 Works fine for me when resizing using a 500x400 image. Have you made changes in the shopping_cart page? Link to comment Share on other sites More sharing options...
Hotclutch Posted August 6, 2015 Share Posted August 6, 2015 @@Hotclutch @@ArtcoInc Ashley, he is right when you set the images to 500x400 and add a product to the cart and look at the shopping_cart.php it doesn't scale the image down. It does scale down the image when you look at the product listing or start page but not when looking at the cart. Malcolm, just use a smaller image size, 500x400 is a large size for thumbnails. View cart is the page shopping_cart.php right? Appears fine on the smallest device i could find on that site, Samsung Galaxy Y Link to comment Share on other sites More sharing options...
ArtcoInc Posted August 6, 2015 Author Share Posted August 6, 2015 @@Tsimi I realize that 500 px is too wide for a thumbnail image ... I will sometimes use extreme examples when doing testing. o:) My product images all vary in aspect ratio. I resized all of the images to a consistent width (500px), and the heights varies. In Admin, I have the Small Image Height set to 70, and the Small Image Width set to 0 (to ensure that all images (and boxes) are the same height in whats_new, etc.) If I have a narrow image (ie: in portrait mode), the resulting image is narrow enough to not cause a problem when I shrink the screen. But, if the image is wide (ie: in landscape mode), that's when I have this problem. @@burt Yes, I have made a number of changes to shopping_cart.php. But, not to the code that displays the image: $products_name .= ' <td valign="top" align="center"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products[$i]['id']) . '">' . tep_image(DIR_WS_IMAGES . $products[$i]['image'], $products[$i]['name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></td>' . ' <td valign="top"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products[$i]['id']) . '"><strong>' . $products[$i]['name'] . '</strong></a>'; (yes, I'm still using FILENAME_ ) This calls tep_image(), which begins ... // The HTML image wrapper function function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $responsive = true, $bootstrap_css = '') { If I read this correctly, $responsive defaults to TRUE, and, in fact, * class="img-responsive" * IS being added to the generated HTML code. Below is a snippet of the generated HTML code from my in-house test server: <tr> <td align="center" valign="top"> <a href="http://192.168.1.51/catalog-g31/product_info.php?products_id=87"> <img src="images/KT 870-18 - A.jpg" alt="KT 870-18" title="KT 870-18" class="img-responsive" height="70" width="239"></a></td> <td valign="top"><a href="http://192.168.1.51/catalog-g31/product_info.php?products_id=87"> <strong>KT 870-18</strong> </a> <br> <input name="cart_quantity[]" value="1" style="width: 45px;" onchange="DoSubmission();" class="form-control" type="text"> <input name="products_id[]" value="87" type="hidden"> <button type="submit" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-refresh"></span> </button> <a id="btn5" href="http://192.168.1.51/catalog-g31/shopping_cart.php?products_id=87&action=remove_product" class="btn btn-danger btn-xs"> <span class="glyphicon glyphicon glyphicon-trash"></span> </a> </td> <td align="right" valign="top"> <strong>$5.50</strong> </td> </tr> (yes, I changed the delete icon to a trash can B) ) You can see the results here: http://www.glovesforglassblowers.com/catalog/product_info.php?cPath=26_41&products_id=87 Add this item to the shopping cart, and then, while viewing the shopping cart, shrink the screen size. Watch what happens when the screen gets narrower than about 380px. I am trying to get the store to display properly down to about 320px, which is what is typically recognized as the narrowest screen width to support. @@Hotclutch I have tested this on the site you referenced, and I obtained the same results. Yes, I could alter the offending images to hide this problem, but my question remains: why aren't the images rescaling? Malcolm Link to comment Share on other sites More sharing options...
Hotclutch Posted August 6, 2015 Share Posted August 6, 2015 I don't follow what you mean by shrinking the screen size. The page you give above tests fine on mobile devices. Link to comment Share on other sites More sharing options...
ArtcoInc Posted August 6, 2015 Author Share Posted August 6, 2015 *** Update *** Chrome *does* rescale the image correctly. IE-11 and Firefox do not. Malcolm Link to comment Share on other sites More sharing options...
ArtcoInc Posted August 6, 2015 Author Share Posted August 6, 2015 @@Hotclutch Use the test site you referenced above: http://mobiletest.me/ 1) Select the Samsung Galaxy Y 2) Enter the url: www.GlovesForGlassblowers.com 3) Click on the Menu dropdown 4) Click on Products 5) Click on Sleeves 6) Click on Kevlar, Knit 7) Scroll down to the first item (KT 870-18). Click on the green Add To Cart button. 8) You are now in the Shopping Cart. Notice the scroll bar across the bottom of the (simulated) screen. This because the image did not rescale. Malcolm Link to comment Share on other sites More sharing options...
Hotclutch Posted August 6, 2015 Share Posted August 6, 2015 @Artcolnc Nope i have followed your way, and it does resize. Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted August 6, 2015 Share Posted August 6, 2015 I'm not using BS but materializecss that has a siimilar construction using a class for responsive images and I noticed just earlier today that it wouldn't stay within the TD container. I think you might have the same issue here as I see a table cell in your code extract KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
ArtcoInc Posted August 6, 2015 Author Share Posted August 6, 2015 @Artcolnc Nope i have followed your way, and it does resize. When I run it through the test site using Firefox, it creates a scrollbar across the bottom of the simulated screen. When I run it through the test site using Chrome, it does indeed resize. So, it seems that this is a browser issue. Malcolm Link to comment Share on other sites More sharing options...
burt Posted August 6, 2015 Share Posted August 6, 2015 *** Update *** Chrome *does* rescale the image correctly. IE-11 and Firefox do not. Malcolm Resizes correctly in the new IE Edge, and in Chrome. But why are you concerned about these ? Resizing in such browsers is just a developer/shopowner trick to guesstimate the size of a mobile/tablet - what sort of shopper would do this in real life? Open the site in (eg) a mobile phone or a tablet and see if it looks good. Can confirm for you that it looks very well on a Kindle Fire tablet, both in Portrait and Landscape mode.. Link to comment Share on other sites More sharing options...
ArtcoInc Posted August 6, 2015 Author Share Posted August 6, 2015 @@burt The site displays fine on the tablet I have here (Android w/Chrome). Then again, I'm not trying to display this on a screen that is only 320px wide. I don't have a phone right now with which to test this, but the one I could borrow (Samsung Galaxy Light) would also be Android/Chrome. Since this *seems* to be a browser issue, I guess the only issue would be with customers using a phone with either IE (a Windows phone), or if they have Firefox installed on their phone. In this day and age, I suppose that that is probably not a large enough demographic to worry about. Malcolm Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted August 6, 2015 Share Posted August 6, 2015 did you try the standard Android browser - that one has given me some strange results with flexbox. I also learned that fixed position (like in headers) give funny results on some browsers and old macbook. I used modernizr to sniff for flexbox support and supplied an alternate format when flexbox is not supported, and use some css to show/hide where relevant. anyhow, on my site, getting rid of the (unnecessary) table structure on the article info page fixed the responsive image issue. KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
♥14steve14 Posted August 7, 2015 Share Posted August 7, 2015 Just tried that product on a windos phone with 8.1 and IE installed and looks fine in shopping cart. Hope that helps. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.