Build a responsive website [Responsive Design]: Flexible Images part 2 help!

Question

I've watched the part 2 of flexible images (raster images) in the Build a Responsive Website project and followed all the coding that was needed. I pasted the all the necessary folders and files from the project files into my directory in the correct places. I downloaded the picturefill and pasted it into the right place too, and the html data-src link to the imgs folder is correct, but none of the images are showing up.

I've been trying to work this out for awhile with no luck.... am I supposed to change something in the CSS?

Answer 1 · 2013-07-08T05:18:40Z

July 8, 2013 5:18am

Hi Cameron,

I added the two js links in the header section:

     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Smells Like Bakin' Cupcake Company</title>
     <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
     <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
     <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
     <script src="external/matchmedia.js"></script>
     <script src="picturefill.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale= 1.0, user scalable = no">
     </head>

Then this is what I did for the avocado cupcake image:

      <div id="featured-cupcake" class="grid_7">
      <h2>Cupcake of the Week</h2>
      <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavours will kick your taste buds into fiesta mode!</p>
      <div data-picture data-alt="Avocado Chocolate Cupcake">
      <div data-src="external/imgs/avocado-small.jpg"></div>
      <div data-src="external/imgs/avocado-medium.jpg" data-media="(min-width: 400px)"></div>
      <div data-src="external/imgs/avocado-large.jpg" data-media="(min-width: 800px)"></div>
      <div data-src="external/imgs/avocado-extralarge.jpg" data-media="(min-width: 1000px)"></div>

      <!-- Fallback content for non-JS browsers. Same img src as initial, unqualified source element. -->
      <noscript>
        <img src="external/imgs/avocado-small.jpg" alt="Avocado Chocolate cupcake">
      </noscript>
      </div>
      </div>

The other two images follow the same code. I didn't change any of the CSS... Do you see anything I've done wrong here? Thanks for your help.

Answer 2 · 2013-07-07T18:50:37Z

July 7, 2013 6:50pm

Could I have you post your code please?

Answer 3 · 2013-07-08T06:03:37Z

July 8, 2013 6:03am

Tania,

I added those two lines of code in the head like you did and my images are working just fine. Were the images loading prior to your adding the JavaScript calls? If not you should probably check your dev tools to see if you have files that are not loading properly.

If you are still not able to figure out exactly why your code is not working I would recommend downloading a new copy and trying again.

I am really sorry I cannot be of more assistance.

-Cameron

Answer 4 · 2014-04-19T12:18:46Z

April 19, 2014 12:18pm

I am having the same problem here is my index.html page. I have changed my div's to span's but no success: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'> <script src="external/matchmedia.js"></script> <script src="picturefill.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </head>

<body>

<div class="container clearfix">
    <div id="logo" class="grid_4">
        <object data="img/logo.svg" type="image/svg+xml" class="chart">
            <a href="img/logo.svg">
                <!--[if lte IE 8 ]-->
                    <img src="img/logo.gif" alt="Smells Like Bakin'">
                <!--[endif]-->
            </a>
        </object>
    </div>
    <div id="nav" class="grid_8 omega">
        <ul>
            <li class="about"><a href="#">About</a></li>
            <li class="pricing"><a href="#">Cupcakes & Prices</a></li>
            <li class="locations"><a href="#">Locations</a></li>
            <li class="contact"><a href="#">Contact Us</a></li>
        </ul>
    </div>

    <div id="intro" class="grid_9">
        <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts. </h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div>
    <div id ="intro-img" class="grid_3">
        <object data="img/you-bake-me-blush.svg" type="image/svg+xml" class="chart">
            <a href="img/you-bake-me-blush.svg">
                <!--[if lte IE 8 ]-->
                    <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
                <!--[endif]-->
            </a>
        </object>
    </div>


    <div id="featured-cupcake" class="grid_7">
        <h2>Cupcake of the Week</h2>
        <p>This week’s featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. It’s flavors will kick your taste buds into fiesta mode!</p>
            <span data-picture data-alt="Avocado Chocolate Cupcake">
                    <span data-src="external/imgs/avocado-small.jpg"></span>
                    <span data-src="external/imgs/avocado-medium.jpg"  data-media="(min-width: 400px)"></span>
                    <span data-src="external/imgs/avocado-large.jpg"  data-media="(min-width: 800px)"></span>
                    <span data-src="external/imgs/avocado-extralarge.jpg"  data-media="(min-width: 1000px)"></span>
                    <!-- <div data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></div> -->
                <!-- Fallback content for non-JS browsers.  Same img src as the initial, unqualified source element. -->
                <noscript>
                    <img src="external/imgs/avocado-small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
                </noscript>
            </span>
    </div>

    <div id="new-cupcakes" class="grid_5 omega">
            <h2>Fresh Out the Oven</h2>
            <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>. </p>
        <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="img/new-cupcake-jalapeno.jpg" alt="Spicy Lime">
    </div>

        <div id="about" class="grid_7">
            <h2>Inside the Kitchen</h2>
            <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
            <p><a href="#" class="btn-small">Read More</a></p>
        </div>


    <div class="grid_5 omega">
        <h2>Get Bakin’ with Us</h2>

        <div id="contact">
            <p>Call us: <span>1-800-CUP-CAKE</span><br>
            Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
        </div>

        <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
        <object data="img/facebook.svg" type="image/svg+xml" class="chart">
            <a href="img/facebook.svg">
                <!--[if lte IE 8 ]-->       
                    <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
                <!--[endif]-->
            </a>
        </object>
        <object data="img/twitter.svg" type="image/svg+xml" class="chart">
            <a href="img/twitter.svg">
                <!--[if lte IE 8 ]-->
                    <a href="https://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>
                <!--[endif]-->
            </a>
        </object>
    </div>

    <div id="copyright" class="grid_12">
        <p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>

</div>

</body> </html>

Answer 5 · 2014-04-19T12:20:20Z

April 19, 2014 12:20pm

https://www.dropbox.com/sh/sd4jw621q1om5x1/8XeZk9BGED

Answer 6 · 2014-04-19T18:51:17Z

April 19, 2014 6:51pm

Jay,

The problem is that you are using the wrong version of the Picturefill.js. The version that you provided is version 2.0 which uses an entirely different format to construct. The version that you want is 1.2.1 which you can find here.

Try changing that out and let me know if you have any other issues.

Cameron

Answer 7 · 2014-04-19T22:56:46Z

April 19, 2014 10:56pm

Thanks! That worked. I did try with the latest version and using div's but that never worked. Do you have any idea? I just changed the <span> tags to <div> tags. I would really like to know why the div's didn't work with the latest picturefill.

Thanks again!

Answer 8 · 2014-04-20T00:02:37Z

April 20, 2014 12:02am

Absolutely, happy to hear that it's working now.

The problem was that version 2.0 is meant to follow the upcoming <picture> element so the syntax it was looking for did not allow for <div> tags at all. Instead the syntax it was looking for was:

<picture>
    <source srcset="external/imgs/avocado-extralarge.jpg" media="(min-width: 1000px)">
    <source srcset="external/imgs/avocado-large.jpg" media="(min-width: 800px)">
    <source srcset="external/imgs/avocado-medium.jpg" media="(min-width: 400px)">
    <source srcset="external/imgs/avocado-small.jpg">
    <img srcset="external/imgs/avocado-small.jpg" alt="text">
</picture>

Version 1.2.1 on the other hand wants the structure to use spans specifically and will not work with divs. This is probably due to the fact that divs are block level and can interfere with your design, whereas spans are inline and cannot (unless you tell them to).

Hope this helps.

Cameron

Welcome to the Treehouse Community

Looking to learn something new?

Tata Cheng

Tata Cheng

Build a responsive website [Responsive Design]: Flexible Images part 2 help!

8 Answers

Tata Cheng

Tata Cheng

Cameron Cottle

Cameron Cottle

Cameron Cottle

Cameron Cottle

Tata Cheng

Tata Cheng

Cameron Cottle

Cameron Cottle

Cameron Cottle

Cameron Cottle

Jay Thompson

Jay Thompson

Jay Thompson

Jay Thompson

Cameron Cottle

Cameron Cottle

Jay Thompson

Jay Thompson

Cameron Cottle

Cameron Cottle