2.4 Adding images - Video Tutorials & Practice Problems

<v Teacher>Looks like our index page</v> is coming into shape right now, but it's missing an absolutely essential element. Pretty much every website needs to have this. We don't have any images of cats. What's going on with that? So in this section, we're going to add an image of a cat, and then we'll add a few more images as well. Now let me show you the syntax for that first. Under the Learn Enough Story, let's add a little extra information just to get some context about the web. So HTML was created by the original web developer, as we mentioned before, computer scientist Tim Berners-Lee. Let's have a link to his Wikipedia page. It's not true that Sir Tim invented HTML in order to share pictures of his cat, but it would be cool if it were. So he has been knighted. He's Sir Tim Berners-Lee. And now we're going to add in an image. So this is the syntax for an image. It's the image tag, IMG, and then there's an attribute, you can actually see a list here. Adam is giving us some hints. It's the source attribute, SRC, source equals, and then the path to the image. In this case, let's put it in its own directory, and it'll be called kitten.jpg, jpg, and it's also required by the HTML standard to have what's known as the alt text. This is used by web spiders and by screen readers for the visually impaired. And then the image tag, like the meta tag is self-closing. So we just do this. There's no content. It's just all attributes. Now, of course, we don't actually have a kitten image anywhere. We don't even have an images directory, so let's take a look at what happens when there's a missing image. You can see here, there's a little broken image indicator and then the alt text. Now this behavior is browser dependent. Here's the page in safari. You can see in safari, it's just a question mark, but I like the behavior in Chrome. You can see here, it actually does have the alt text. But again, that's browser dependent; we shouldn't rely on that behavior. So let's get that image. It's on the Learn Enough CDN, the content distribution network. We'll curl it to our local disc. First, we need an images directory, and then we'll curl the output file name right into the images directory, and then we want -OL, L here will follow any redirects. See if that works. It looks promising. Let's refresh it, and there we are. So this is how to put an image on a webpage using the image tag. And you'll note that one of the things we did here was download the image to the local disc, and this is generally speaking, the best practice. Linking to live images on the web is considered poor form because it uses the bandwidth of the people who are hosting the images, and it also exposes you to some risk as a developer because the URL might change, it might break the image. But there are some situations where we do wanna use this practice, which is called hot linking. So I'm gonna give you an example of that by putting in images of the three founders of Learn Enough hosted at the Gravatar website. Now because they're actually pretty long, I'm gonna paste them in. Here they are. Actually let me just overwrite this. This'll be faster. Yeah, we can restore the lorem some text. So let's take a look at the structure of these. this is image here, source equals, and then https://, again, remember this is the secure version of HTTP, gravatar.com, this is a website that is dedicated to hosting these kinds of images, /avatar/, and then this here is a unique identifier. It's actually what's known as the hex digest of the email address of the person whose Gravatar this is. And then this here at the end is an option parameter that specifies the size, which in this case is 150. So all avatar images are square. So one parameter is efficient to determine their size. And then I've put in the alt text, which is, in this case, just my name and similarly for Lee and Nick. Let's see if that worked; save it, should show up right in here. There we go. Now you can see, actually, the text bumping right up against the images that's because these aren't in paragraph tags. So you could do this here, just copy this. I dunno why indented that much, but it's just the way it goes. This kind of formatting can be tedious, but it's a good practice to keep the formatting nice and clean. So if we do this here should work, save it, and refresh. There we go, that's what we expect. There's a special bonus for the screencast, I'm gonna show you where those identifiers come from. This is the identifier here. This is beyond the scope of the tutorial. This just an extra bonus. Don't worry about any of these commands. I'm just gonna jump to the Real Tutorial Sample App for the fourth edition, and I'm going to use the rails console. Again, don't worry about where any of this comes from if you haven't done rails before. So this string that we saw here is a hex digest, specifically, the MD5 Hash. That's digest::MD5.hex, I think that's what it is. Let's Take a look at this. I don't remember this syntax offhand. Again, this is real life development. I just wanna show you that I don't know all of these things offhand, even someone like me has to look it up sometimes. So this was in, where's the Gravatar? Here it is. This is how you do stuff in real life. Here it is, it's hex digest, Digest::MD5::hexdigest. I totally did not remember this syntaxes you just saw. So let's look at this, ::hexdigest, digest. Okay, so this is the hex digest of the string foo, comes out to be this thing. We'll take a look at this, [e-mail], huh, look at that. ffda et cetera, et cetera, copy that, paste it in. Aha, looks pretty familiar. So this is the hex digest associated with my email address. That's what Gravatar uses to make these avatars. So in real life, you would not hard code this URL. We've done it here, so we can see these Gravatar images, but in most real websites, what you would do is write a program to generate the URL for the Gravatar based on the user's email address, and that is covered in the Ruby on Real Tutorial. This is what it looks like. So just a little bit of a teaser for the future if you haven't done this before, which you probably haven't if you're watching this, but maybe you're watching the HTML video for review. In any case, it's nice to see how everything fits together. All right, we've made quite a few changes. It's time, I think now, to deploy to the live website. I've left this tab here as a reminder that it exists; still, hello, world. So let's push that up. You may recall this trick, cd - from learn enough command line to be dangerous, takes us back where we were. You don't have to remember where we were, just go back to the place we were. And now let's add everything. This is a reminder, oops, git status. We've got an images directory that hasn't been added, so we can't do git commit - am. We have to add everything. By the way, some people do get add., which is equivalent, but the -A is the one that's natively supported by Git. They both work, but it used to be git add. was the standard, and more recently, people have switched over to git add - A in the official documentation. It doesn't really matter. You can see git status, but you'll see both which is why I mention it. So there we go. You can see here, the untracked files were just the whole directory, and now we actually pick up that there's a kitten image here. So add some content and images. Oh, you know what, as you can see, I just put in git commit -am out of habit. It doesn't matter, the a doesn't do anything here. It doesn't cost us anything, but in order to be like officially correct, I guess we can put git commit -m. The a is unnecessary, but it doesn't do any harm. And now let's push it up, refresh. it's not quite ready yet. Sometimes it takes a little bit of processing, and there we go.