If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

OpenCart. How to change slider dimensions

This tutorial is going to show you how to re-size slider images on your OpenCart template.

OpenCart. How to change slider dimensions

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.

  1. Log into your OpenCart administration panel and go to the “Extensions” -> “Modules” menu.

    opencart_slider_image_resizing_1

  2. Look for a module called “Newcarousel” and click “Edit.”

    opencart_slider_image_resizing_2

  3. 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.”

    opencart_slider_image_resizing_3

  4.  Go to the System -> Design -> Banners menu.

    opencart_slider_image_resizing_4

  5. Find “slideshow” and click “Edit.”

    opencart_slider_image_resizing_5

  6. On the next page click “Browse”  under the image you want to replace. In the window that will pop up, click “Upload” and navigate to the directory where the new image is located. Select the image and click “Open.”

    opencart_slider_image_resizing_6

  7. Once the image is uploaded, you should see this message:

    opencart_slider_image_resizing_7

  8. Look for the image in the Image Manager and double click on  it.

    opencart_slider_image_resizing_8

  9. The thumbnail of the original image will be changed to that of your image. Click “Save” at the top right.

    opencart_slider_image_resizing_9

  10. Open the front page of your site in Mozilla Firefox with the Firebug plugin installed.

  11. In Firebug, look for <div id="camera_wrap"> as shown below (the div id may differ depending on your template number):

    opencart_slider_image_resizing_10

  12. For instance, it has the following styles:

    .camera_wrap {
    display: none;
    float: left;
    position: relative;
    z-index: 0;
    }
    
  13. Add a new property to this class selector like width: 1200px ! important; (where 1200px is the width of your new banner image). This will prevent your image from looking stretched.

    opencart_slider_image_resizing_11

  14. Remove float: left; and add one more property to the same class selector like margin: 0 auto; in order to center your image.

  15. Now you need to copy the edited class selector from Firebug and replace the original one in catalog/view/theme/theme###/stylesheet/camera.css with it:

    opencart_slider_image_resizing_12

    .camera_wrap {
    width: 1200px ! important;
    margin: 0 auto;
    display: none;
    position: relative;
    z-index: 0;
    }
    
  16. Save the changes made to the camera.css file.

  17. Open the newcarousel.tpl  file located in catalog/view/theme/theme###/module/ with Adobe Dreamweaver or any code editor. Look for the initializing script between the two <script></script> tags:

    opencart_slider_image_resizing_13

  18. Since your new image width is 1200px and its height is 600px, the new percentage should be 69.25% (831/1200*100=69.25). Change height: ’32.86%’ to height: 69.25%’, and save the changes.

  19. Your banner image should now be displayed with its dimensions changed.

    opencart_slider_image_resizing_14

Feel free to check the detailed video tutorial below:

OpenCart. How to change slider dimensions