Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

How Do You Add Software To A Text Editor???

How Do You Incorporate Software Into Your Design On Your Text Editor???

I Have JPG Images That Need To Be Made Responsive With Picturefill The Only Thing That I Have Done So Far Is Coding In HTML And CSS

4 Answers

Dino Paškvan
PLUS
Dino Paškvan
Courses Plus Student 44,108 Points
Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Usually, you'd copy/save your images to a subfolder inside your project folder. You can call it images or img or pictures, whatever suits you, although the first two names are most common.

After that, you can include your pictures by using the <img> tag, or in the case of picturefill, this is an example of the markup you'd use:

<span data-picture data-alt="My Image">
    <span data-src="img/small.jpg"></span>
    <span data-src="img/medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="img/large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="img/extralarge.jpg" data-media="(min-width: 1000px)"></span>
</span>

You can find additional examples and more details for Picturefill on this page: https://github.com/scottjehl/picturefill/blob/master/README.md

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

Hello Dino, So Your Saying That I Should Create Another Img Folder And Use These Picturefill Commands In My HTML And That They Will Be Sorted Out Or Added To The New Img Folder By Picturefill???

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

You should copy the pictures to your project folder, where all the HTML and CSS files are saved, and then add the HTML code that will point to those pictures. The images won't copy themselves, you have to get them to the folder in the first place.

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

I Have Copied The Photos And Created The Folder, Getting Ready To Add The HTML And Use The Photos From The Extra Folder.

Thanks For Calming Me Down Dino...LOL

Your A Life Saver :-)

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

Everything Worked Great Before, I Could Resize Chrome And Everything Fit, I Just Need The Responsive Photos To Cooperate, In Case People Have Touch Sevices...LOL

The Only Thing That Shows Up Is A Blue Square ( Photo Border), I Even Copied The Same Photo 4 Times And Name Them Small, Medium, Large And ExtraLarge. I Found A Picturefill.js File That I Put In The CSS Folder.

/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with divs). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */

(function( w ){

    // Enable strict mode
    "use strict";

    w.picturefill = function() {
        var ps = w.document.getElementsByTagName( "div" );

        // Loop the pictures
        for( var i = 0, il = ps.length; i < il; i++ ){
            if( ps[ i ].getAttribute( "data-picture" ) !== null ){

                var sources = ps[ i ].getElementsByTagName( "div" ),
                    matches = [];

                // See if which sources match
                for( var j = 0, jl = sources.length; j < jl; j++ ){
                    var media = sources[ j ].getAttribute( "data-media" );
                    // if there's no media specified, OR w.matchMedia is supported 
                    if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
                        matches.push( sources[ j ] );
                    }
                }

            // Find any existing img element in the picture element
            var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];

            if( matches.length ){           
                if( !picImg ){
                    picImg = w.document.createElement( "img" );
                    picImg.alt = ps[ i ].getAttribute( "data-alt" );
                    ps[ i ].appendChild( picImg );
                }

                picImg.src =  matches.pop().getAttribute( "data-src" );
            }
            else if( picImg ){
                ps[ i ].removeChild( picImg );
            }
        }
        }
    };

    // Run on resize and domready (w.load as a fallback)
    if( w.addEventListener ){
        w.addEventListener( "resize", w.picturefill, false );
        w.addEventListener( "DOMContentLoaded", function(){
            w.picturefill();
            // Run once only
            w.removeEventListener( "load", w.picturefill, false );
        }, false );
        w.addEventListener( "load", w.picturefill, false );
    }
    else if( w.attachEvent ){
        w.attachEvent( "onload", w.picturefill );
    }

}( this ));

Here Is The HTML

 <div class="grid_4">
              <img data-src="EXTERNAL/IMGS/Dr. Maggie Wincher-small.jpg"></img>
              <img data-src="EXTERNAL/IMGS/Dr. Maggie Wincher-medium.jpg"     data-media="(min-width: 480px)"></img>
              <img data-src="EXTERNAL/IMGS/Dr. Maggie Wincher-large.jpg"      data-media="(min-width: 640px)"></img>
              <img data-src="EXTERNAL/IMGS/Dr. Maggie Wincher-extralarge.jpg" data-media="(min-width: 768px)"></img>
              <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
              <noscript>
                  <img src="EXTERNAL/IMGS/Dr. Maggie Wincher-small.jpg" alt="Dr. Maggie Wincher">
                  <em><h4>Dr. Maggie Wincher</h4></em>  
              </noscript>             

          </div>

Here Is The CSS

/*global*/

body {
font-family: 'Nunito', sans-serif;
color: #4169E1;
background: #420600 url('img/bg-texture.jpg') repeat;
}


  .container {
  border: 1.5625em outset #ADD8E6; margin: 6.25em; 
  background: #ADD8E6;
      }

  img, object { 
  max-width: 100%;
}


/*typography*/

h1 {
font-size: 1.750em;
letter-spacing: -1.5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}



h2 {
font-size: 1.500em;
color: #4169E1;
}


/*buttons*/

a.btn {
color: #4169E1;
background: #4FB69F url('img/texture.png') no-repeat right top;
padding: 0.46875em 0.9375em;
margin: 1.25em 0px;
border-radius: 1.5625em;
text-transform: uppercase;
}

.btn:hover {
background-color: #4CC4A7;
}

#copyright {
border-top: 0.0625em solid #2A0400;
padding: 0.625em 0px;
margin: 0.9375em 0px;
text-align: center;
}


/*navigation*/

 a:link {  
  color: #4169E1;
  text-decoration: none;
  }




/*content*/

  img {
  border: 0.5em solid #4169E1;
  margin: 0 0 1.25em 0;
  max-width:100%;
    }



/*media queries*/
/*Small Resolution -----------*/
@media screen and (max-width: 480px) {

.grid_1,
.grid_2, 
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    width: 100%;
}
 #nav a {
  margin: 5% 0;
  }

   #nav a {
  -webkit-user-select: none;
  }

  #nav a.O.I.C.C. {
  width: 100%;
  } 
  #nav a.Edwin_and_Walter_Hawkins {
  width: 100%;
  }
  #nav a .Other_Gospel_Artist {
  width: 100%;
  }
  #nav a.A_Grammy_Nominee {
  width: 100%;
  }
  #nav a.Doctorate_In_Music {
  width: 100%;
  }
  #nav a.Music_Ministry_Request {
  width: 100%;
  }
   #nav a.Beliefs {
  width: 100%;
  }
   #nav a.Music_Biography {
  width: 100%;
  }
   #nav a.Praise_Report_Form {
  width: 100%;
  }
   #nav a.Prayer_of_Salvation {
  width: 100%;
  }
   #nav a.Prayer_Request_Form {
  width: 100%;
  }
   #nav a.News_and_Events {
  width: 100%;
  }
}



/*media queries*/
/*Meduim Resolution -----------*/
@media screen and (max-width: 640px) {

.grid_1,
.grid_2, 
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    width: 100%;
}
 #nav a {
  margin: 5% 0;
  }

   #nav a {
  -webkit-user-select: none;
  }

  #nav a.O.I.C.C. {
  width: 100%;
  } 
  #nav a.Edwin_and_Walter_Hawkins {
  width: 100%;
  }
  #nav a .Other_Gospel_Artist {
  width: 100%;
  }
  #nav a.A_Grammy_Nominee {
  width: 100%;
  }
  #nav a.Doctorate_In_Music {
  width: 100%;
  }
  #nav a.Music_Ministry_Request {
  width: 100%;
  }
   #nav a.Beliefs {
  width: 100%;
  }
   #nav a.Music_Biography {
  width: 100%;
  }
   #nav a.Praise_Report_Form {
  width: 100%;
  }
   #nav a.Prayer_of_Salvation {
  width: 100%;
  }
   #nav a.Prayer_Request_Form {
  width: 100%;
  }
   #nav a.News_and_Events {
  width: 100%;
  }
}


/*media queries*/
/*Large Resolution -----------*/
@media screen and (max-width: 768px) {

.grid_1,
.grid_2, 
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    width: 100%;
}
 #nav a {
  margin: 5% 0;
  }

   #nav a {
  -webkit-user-select: none;
  }

  #nav a.O.I.C.C. {
  width: 100%;
  } 
  #nav a.Edwin_and_Walter_Hawkins {
  width: 100%;
  }
  #nav a .Other_Gospel_Artist {
  width: 100%;
  }
  #nav a.A_Grammy_Nominee {
  width: 100%;
  }
  #nav a.Doctorate_In_Music {
  width: 100%;
  }
  #nav a.Music_Ministry_Request {
  width: 100%;
  }
   #nav a.Beliefs {
  width: 100%;
  }
   #nav a.Music_Biography {
  width: 100%;
  }
   #nav a.Praise_Report_Form {
  width: 100%;
  }
   #nav a.Prayer_of_Salvation {
  width: 100%;
  }
   #nav a.Prayer_Request_Form {
  width: 100%;
  }
   #nav a.News_and_Events {
  width: 100%;
  }
}