Images6:27 with Wade Christensen
Displaying images in a document can be fun and add valuable information that can't be provided by text alone. In this video, we'll see how to add images to our documents. There's more good news. If you followed along with the video about links, formatting images will feel very familiar.
Code for images used in this video
Starter code for this video
Markdown provides a syntax for links that’s easy to remember. First, type the text you want to appear on the page in square brackets, then add the link in parenthesis. If I want to link to Treehouse, I would type
You also have the option to provide a title, which appears when you hover the mouse cursor over the link. Just type a space after the url and close the label in quotes. Both the url and the title should be inside the parenthesis.
What if you want to link to a reference at the bottom of a section or page like a footnote? Start with the text in square brackets, but don’t add the parenthesis. Instead, add a number to reference in another set of square brackets.
Now at another place in the document, add the reference number in square brackets and follow it with a colon, a space, and the link url. You can add an optional title with a space and quotes to this type of link too. Reference links don’t require parenthesis.
: https://teamtreehouse.com "Treehouse Reference Link"
Images work a lot like links, you just need link to the image and 0:00 then you add one special character, so that the image appears on the page. 0:03 Unlike in a word processing program you can't embed in image into a mark 0:07 down file. 0:11 You need to upload the image to the web somewhere, and 0:13 then you use a link to that image. 0:15 Think of images in a markdown document as being referenced by your document, 0:18 rather than embedded in your document. 0:22 You can use a service such as Flicker or 0:25 Imagur to upload your images then obtain a link. 0:28 If you're blogging, the blog engine may provide some service to obtain a link, but 0:32 all of this stuff is beyond the scope of this short course. 0:37 I'll assume that you can figure out how to upload your images somewhere, and 0:41 then I'll show you what to do after that. 0:44 We can use the q place holder images from placekitten for our example. 0:47 So, let's come over to our document. 0:51 And lead a heading, images. 0:54 To add an image to our document, you type a label for the image in square brackets. 0:59 On the web we call this type of label alt text, because it will be displayed as 1:04 an alternate if the image cannot be shown for any reason. 1:08 I have an image of kittens, so I'm going to type square brackets and 1:12 then kittens will be my alt text. 1:17 And then next, we would add parenthesis, and 1:21 then we would add the URL to our image. 1:25 So, this will be, Placekitten. 1:28 And lets see what we have in our preview. 1:39 Okay, we have a link to the image, now that makes sense, because 1:42 this is exactly how we would create a link ,but that's not what we want. 1:46 We want to actually display the image in the document. 1:50 To do that, you just type an exclamation mark at the beginning of all of this and 1:54 bang we have a kitten image. 1:59 So as you can see, adding an image to a document is a lot like adding a link. 2:02 Now what if you want your image to also behave as a link? 2:07 So for example, what if someone were able to click on the image and 2:11 then have that image take them somewhere? 2:15 Well we can do that. 2:18 You will first start with a new set of square brackets. 2:20 So square brackets will basically end up surrounding all of this code up here. 2:24 But we're gonna type it out from scratch for practice. 2:29 So you'll have a first set of square brackets, and then your exclamation mark. 2:32 And then the set of square brackets for your alt text. 2:38 Now, my image will be kittens again. 2:43 So we'll just type Kittens as our alt text, and 2:45 then outside of the alt text square bracket, but inside our surrounding 2:49 brackets we'll type parenthesis And our URL to the image. 2:54 Now, outside of all of this, so just beyond our closing square bracket, 3:08 we'll type another set of parentheses, and 3:13 this is where we'll type the URL that we want the image to link to. 3:16 So if someone were to click on the image, this is where it should take them. 3:21 For our example, we'll just take them to the main place kitten's homepage. 3:26 And let's see what we have in our preview. 3:35 Okay, so you can see if I were to hover over this image, nothing really happens. 3:39 When I hover over this one, I get this hand indicating that it's a link. 3:44 It can be clicked on, if I click on it. 3:48 We're taken to the placekitten's website. 3:50 Now let's come back to our document. 3:53 Now, images can have titles like links too. 3:57 You add them the same way. 4:00 After the image URL, you'd add a space and then put the title in quotes. 4:01 So let's do that. 4:05 So we would start with our exclamation mark. 4:07 Then our square brackets and our alt text. 4:10 Then parenthesis, and the link to our kitten image. 4:15 And then here, after the URL we type a space, our quotes. 4:29 And then our title. 4:35 Let's see what our kitten looks like. 4:36 How about, Curious Kitten, okay, 4:40 and now if I hover over this kitten, you can see I get this title, Curious Kitten. 4:45 Now what if you wanted to add a title to a more complex image, for 4:51 example this one up here. 4:55 Well that's totally possible, 4:57 you just add it in the same way after the URL for your image. 4:59 So, this is important,you have two URLs, 5:05 in an image formatted this way, one is actually a link to the image, 5:07 the other one is a link that your image will take you to if you click on it. 5:12 You will add the title inside this set of 5:17 parenthesis immediately after the link to your image. 5:19 So we type about,Fluffy kitten, now if I come over here, 5:22 all right, we have a title, Fluffy Kitten, and this is still a winked image. 5:33 Images are probably the most complex thing to add in any marked down document. 5:38 Let this cheat sheet be your friend until you get the hang of it. 5:43 I find it easiest to remember that formatting an image is just like 5:46 formatting a link. 5:50 You memorize the link chunk first, 5:51 then you just add an exclamation mark at the beginning. 5:53 I'll come down here and add a horizontal rule, and save. 5:57 And believe it or not, that is actually the end of our cheat sheet. 6:04 I will paste in some final conclusion text and a few more instructions in here, 6:07 for our final version, but you don't need to see me do all of that. 6:13 We do have one more video, but that will not be using this document. 6:16 We're gonna talk about some fun extra markdown things. 6:21 So I am looking forward to that, and I will see you there. 6:24
You need to sign up for Treehouse in order to download course files.Sign up