{"id":34606,"date":"2014-05-29T07:56:49","date_gmt":"2014-05-29T11:56:49","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=34606"},"modified":"2016-02-18T06:51:10","modified_gmt":"2016-02-18T11:51:10","slug":"opencart-how-to-change-slider-dimensions","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-how-to-change-slider-dimensions.html","title":{"rendered":"OpenCart 1.5.x. How to change slider dimensions"},"content":{"rendered":"

<\/p>\r\n

This tutorial is going to show you how to re-size slider images on your OpenCart template.<\/p>\r\n

OpenCart. How to change slider dimensions<\/a><\/p>\r\n

For instance, you have a 1200 X 831 px image and you would like to use it for the banner so its dimensions are kept.<\/p>\r\n

    \r\n
  1. \r\n

    Log into your OpenCart administration panel and go to the “Extensions” -> “Modules” menu<\/strong>.<\/p>\r\n

    \"opencart_slider_image_resizing_1\"<\/a><\/p>\r\n<\/li>\r\n

  2. \r\n

    Look for a module\u00a0called “Newcarousel”<\/strong> and click “Edit.”<\/strong><\/p>\r\n

    \"opencart_slider_image_resizing_2\"<\/a><\/p>\r\n<\/li>\r\n

  3. \r\n

    On the next page change the default dimensions (W + H) to those of your new image (i.e. to 1200 X 831 px). Click “Save.”<\/strong><\/p>\r\n

    \"opencart_slider_image_resizing_3\"<\/a><\/p>\r\n<\/li>\r\n

  4. \r\n

    \u00a0Go to the System -> Design -> Banners<\/strong> menu.<\/p>\r\n

    \"opencart_slider_image_resizing_4\"<\/a><\/p>\r\n<\/li>\r\n

  5. \r\n

    Find “slideshow”<\/strong> and click “Edit.”<\/strong><\/p>\r\n

    \"opencart_slider_image_resizing_5\"<\/a><\/p>\r\n<\/li>\r\n

  6. \r\n

    On the next page click “Browse”\u00a0<\/strong> under the image you want to replace. In the window that will pop up, click “Upload”<\/strong> and navigate to the directory where the new image is located. Select the image and click “Open.”<\/strong><\/p>\r\n

    \"opencart_slider_image_resizing_6\"<\/a><\/p>\r\n<\/li>\r\n

  7. \r\n

    Once the image is uploaded, you should see this message:<\/p>\r\n

    \"opencart_slider_image_resizing_7\"<\/a><\/p>\r\n<\/li>\r\n

  8. \r\n

    Look for the image in the Image Manager<\/strong> and double click on\u00a0 it.<\/p>\r\n

    \"opencart_slider_image_resizing_8\"<\/a><\/p>\r\n<\/li>\r\n

  9. \r\n

    The thumbnail of the original image will be changed to that of your image. Click “Save”<\/strong> at the top right.<\/p>\r\n

    \"opencart_slider_image_resizing_9\"<\/a><\/p>\r\n<\/li>\r\n

  10. \r\n

    Open the front page of your site in Mozilla Firefox with the Firebug<\/a> plugin installed.<\/p>\r\n<\/li>\r\n

  11. \r\n

    In Firebug,\u00a0look for <div id="camera_wrap"><\/strong> as shown below (the div id may differ depending on your template number):<\/p>\r\n

    \"opencart_slider_image_resizing_10\"<\/a><\/p>\r\n<\/li>\r\n

  12. \r\n

    For instance, it has the following styles:<\/p>\r\n

    \r\n.camera_wrap {\r\ndisplay: none;\r\nfloat: left;\r\nposition: relative;\r\nz-index: 0;\r\n}\r\n<\/pre>\r\n<\/li>\r\n
  13. \r\n
    Add a new property to this class selector like width: 1200px ! important;<\/strong> (where 1200px is the width of your new banner image). This will prevent your  image from looking stretched.<\/p>\r\n
    \"opencart_slider_image_resizing_11\"<\/a><\/p>\r\n<\/li>\r\n
  14. \r\n
    Remove  float: left; <\/strong>and <\/strong>add one more property to the same class selector  like margin: 0 auto; <\/strong>in order to center  your image.<\/p>\r\n<\/li>\r\n
  15. \r\n
    Now you need to copy the edited  class selector from Firebug and replace the original one in catalog\/view\/theme\/theme###\/stylesheet\/camera.css<\/strong> with it:<\/p>\r\n
    \"opencart_slider_image_resizing_12\"<\/a><\/p>\r\n
    \r\n.camera_wrap {\r\nwidth: 1200px ! important;\r\nmargin: 0 auto;\r\ndisplay: none;\r\nposition: relative;\r\nz-index: 0;\r\n}\r\n<\/pre>\r\n<\/li>\r\n
  16. \r\n
    Save the changes made to the camera.css <\/strong>file<\/strong>.<\/p>\r\n<\/li>\r\n
  17. \r\n
    Open the newcarousel.tpl <\/strong>\u00a0file located in catalog\/view\/theme\/theme###\/module\/<\/strong>\u00a0with Adobe Dreamweaver or any code editor. Look for the initializing script between the two <script><\/script><\/strong> tags:<\/p>\r\n
    \"opencart_slider_image_resizing_13\"<\/a><\/p>\r\n<\/li>\r\n
  18. \r\n
    Since your new image width is 1200px and its height is 600px, the new percentage should be 69.25%  (831\/1200*100=69.25)<\/em><\/strong>. Change height: ’32.86%’ to height: 69.25%’, and save the  changes.<\/p>\r\n<\/li>\r\n
  19. \r\n
    Your banner image should now be  displayed with its dimensions changed.<\/p>\r\n
    \"opencart_slider_image_resizing_14\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    OpenCart. How to change slider dimensions<\/a><\/p>\r\n
    <\/p>\r\n
    <\/p>\r\n
    <\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial is going to show you how to re-size slider images on your OpenCart template.<\/p>\n","protected":false},"author":30,"featured_media":34624,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[1183,1267,1157,816],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/34606"}],"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\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=34606"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/34606\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/34624"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=34606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=34606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=34606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}