{"id":8548,"date":"2011-06-17T04:42:02","date_gmt":"2011-06-17T08:42:02","guid":{"rendered":"http:\/\/info.template-help.com\/?p=8548"},"modified":"2015-01-26T07:42:15","modified_gmt":"2015-01-26T12:42:15","slug":"how-to-manage-product-images-in-zencart","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-manage-product-images-in-zencart.html","title":{"rendered":"ZenCart. How to manage product images dimensions"},"content":{"rendered":"

In this tutorial you will learn how to manage product images dimensions in ZenCart template(s).<\/p>\r\n\r\nZenCart. How to manage product images dimensions<\/a>\r\n\r\n

Small – Thumbnail images displayed on the home page and product listing pages.<\/p>\r\n

Medium \u2013 Displayed on the individual Product Info pages.<\/p>\r\n

Large \u2013 The image which is accessed by clicking the \u2018larger image\u2019 link on the Product Info pages. <\/p>\r\n\r\n

    \r\n

  1. You can change the sizes in your admin panel in Admin > Configuration > Images<\/strong>.<\/p><\/li>\r\n

  2. Options available to change the thumbnail size are the following:<\/p>\r\n\r\n

      \r\n\t

    1. Small Image Width<\/p><\/li>\r\n

    2. Small Image Height<\/p><\/li>\r\n

    3. Product Listing Width<\/p><\/li>\r\n

    4. Product Listing Height<\/p><\/li>\r\n

    5. Product New Listing Width<\/p><\/li>\r\n

    6. Product New Listing Height<\/p><\/li>\r\n

    7. New Products Width<\/p><\/li>\r\n

    8. New Products Height<\/p><\/li>\r\n

    9. Featured Products Width<\/p><\/li>\r\n

    10. Featured Products Height<\/p><\/li>\r\n

    11. Product All Listing Width<\/p><\/li>\r\n

    12. Product All Listing Height<\/p><\/li>\r\n\r\n\t\t<\/ol>\r\n\t\t\r\n

      IMPORTANT: All width values and all the height values must be same. Specifically, options 1,3,5,7,9 and 11 must be the same. And, 2,4,6,8,10 and 12 must be the same.<\/p>\r\n\t\t\r\n<\/li>\r\n\r\n\r\n

    13. Change your images size and save changes using update<\/strong> button:<\/p>\r\n\r\n\"zencart_img_size1\"<\/a>\r\n\r\n<\/li>\r\n

    14. Open the product info page from the front end of your site in the Firefox browser with Firebug<\/a> installed. Using Firebug you need to determine what height the new image should be and what line in .css should be edited for that.<\/p>\r\n<\/li> \t\r\n\r\n

    15. Open the Firebug window by clicking on its icon at the top right corner of your Firefox browser.<\/p><\/li>\r\n

    16. Select Click an element in the page to inspect.<\/p><\/li>\r\n

    17. Click the image frame and manually change its height in Firebug.<\/p><\/li>\r\n\r\n

    18. Right click on the name of the .css file in Firebug and select Copy location: <\/p>\r\n\r\n\"zencart_img_size2\"<\/a>\r\n\r\n<\/li>\r\n\r\n

    19. It should be a stylesheet_main.css<\/strong> located in the \/includes\/templates\/themeXXX\/css\/<\/strong> folder on your FTP, but sometimes a different file\/location depending on your particular template design.<\/p>\r\n\r\n<\/li>\r\n

    20. Change image width\/height to fit your needs.<\/p><\/li>\r\n

    21. Save the changes made to the .css<\/strong> file and re-upload it to the server.<\/p><\/li>\r\n\r\n

    22. Refresh the product page again. Your images should have the desired size.<\/p><\/li>\r\n<\/ol>\r\n\r\n

      Thank you. Now you know how to manage product images dimensions in ZenCart template(s).<\/p>\r\n\r\n

      Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nZenCart. How to manage product images dimensions<\/a>","protected":false},"excerpt":{"rendered":"

      In this tutorial you will learn how to manage product images dimensions in ZenCart template.<\/p>\n","protected":false},"author":12,"featured_media":43276,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[734],"tags":[1724,804,537,949,2408],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/8548"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=8548"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/8548\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/43276"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=8548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=8548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=8548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}