Follow

Site Editor: Making an Image Responsive

Responsive websites are wonderful because your content is resized and rearranged to fit on any size screen or device. Images that you upload to your store products are designed to resize this way automatically, but unfortunately, this doesn't magically happen with your content images... yet!

There are two possible ways to make sure any image you add to your regular content pages will respond to screen size with the rest of your site; one uses the image tool, and the other necessitates going into the source code and editing the HTML markup. Depending on your comfort level, you may use either one for a similar result.

Use the corresponding responsive images on this page to view the outcome of this tutorial: http://www.smokingbarrelwines.com/responsive-image

PLEASE NOTE: You may click on images in this tutorial to make them larger.


 

Using the Image Tool:

  1. From the page you are adding the image to, click the Insert/Edit Image button.

  2. Navigate to (or upload) the image you want to add to the page by browsing your server.
    ri-s12.png

  3. Select and insert the image.
    ri-s3.png

    When you are returned to the Insert/Edit Image window, click OK to insert the image into your page.
    ri-s3a.png

  4. Now that the image has been added to your page, select the image by clicking on it, and click the Insert/Edit Image button again to edit. The edit window will open up with image size information in it. UNCHECK the "Constrain proportions" box and REMOVE the height (the right-hand box of the image dimensions). Leave the width (the left-hand box) as is.
    ri-s4.png

  5. Click on the Advanced tab at the top of the popup window and enter the style information in the Style field. This field is where you set the size, and where you make the image responsive. You may enter a "max-width" pixel value, which is a the maximum width you want your image to display, regardless of window/device size. The "width" value is a percentage, which determines how wide it will display once the window/device size is below the "max-width" you set. The width is a percentage rather than a fixed width so it will respond as the screen size changes. It is best practice to set the "width" to 100%, but you can play around with this.

    Enter the code in exactly this way, changing the values as you desire:
    max-width: 500px; width: 100%;

    If you want the image to always take up the entire width of your page*, no matter what size the screen/device is, there is no need to set the "max-width." You may just enter the width:
    width: 100%;

    *Be aware that if your image is smaller than the width of your page at its largest size, it will blow up to fill the space, which could cause image degradation. If this is the case, you should set the "max-width" to the pixel width of your image at its original size.
    ri-s5.png

  6. Click OK on the Insert/Edit Image popup window to return to your page, and view your image at the maximum width or width you set, in the case of this example, 500px wide.
    ri-s6.png

  7. Save your page and take a look on the front end of your website. As you change the width of the window, or look on a mobile device, the image should now be responsive.
    ri-s7a.png

    ri-s7b.png


Editing the Source Code:

  1. From the page you are adding the image to, click the Insert/Edit Image button.

  2. Navigate to (or upload) the image you want to add to the page by browsing your server.
    ri-s12.png

  3. Select and insert the image.
    ri-s3.png

    When you are returned to the Insert/Edit Image window, click OK to insert the image into your page.
    ri-s3a.png

  4. Now that the image has been added to your page, click the Source code button to edit the HTML.
    st4.png

  5. In the HTML Source Code window, find the code for your image, which will look something like this:
    <img src="http://www.smokingbarrelwines.com/assets/client/Image/backgrounds/01.jpg" alt="" width="1800" height="1200" />.
    st5a.png

    TIP: If you have lots of information on your page and are having trouble locating the image within the code, use your web browser's Find feature by clicking "control-f" (on a PC) or "command-f" (on a Mac). Once the find window appears (most commonly in the top right or bottom left of the browser window), enter <img into the box to find the opening of the image tag in the source code.


  6. Locate the "width" and "height" of the image:
    width="1800" height="1200"
    st5a_2.png

  7. Remove the "height" value, and change the "width" value to the maximum pixel width you want your image to display, regardless of window/device size. For this example, I have used 500px:
    width="500"
    st5b.png

    If you want the image to always take up the entire width of your page*, no matter what size the screen/device is, set the "width" value to "100%," including the % sign.

    *Be aware that if your image is smaller than the width of your page at its largest size, it will blow up to fill the space, which could cause image degradation. If this is the case, you should set the "max-width" to the pixel width of your image at its original size.

  8. Add a class to the image:
    class="img-responsive"
    st5c.png
    This class will make the image responsive, but will also set it as a block element, meaning it will stand alone on its own line. If you would like to center the image on the page, add an additional "center-block" class:
    class="img-responsive center-block"
    c-b.png

    For the purpose of this article, I will not keep the "center-block" class in the code for the finished product.

  9. Click OK on the HTML Source Code window to return to your page, and view your image at the maximum width or width you set, in the case of this example, 500px wide.
    ri-s6.png

  10. Save your page and take a look on the front end of your website. As you change the width of the window, or look on a mobile device, the image should now be responsive.
    ri-s7a.png

    ri-s7b.png


Congratulations! You have successfully made an image responsive.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk