FREELessons: 11Length: 32 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Lorem Pixel

In this lesson, I will demonstrate a plugin that gives you a dialog box for making quick and easy use of the Lorem Pixel image placeholder service.

Related Links

2.5 Lorem Pixel

Hello, and welcome back. In a previous tutorial, we talked about using the Emmet plugin to create Lorem ipsum text. And this serves as placeholder text, in case we don't yet have the actual text that's gonna go on a website. Well, we can do something similar with images, using a plugin called Lorem Pixel. So let's do that. Let's jump over to our extensions button. And then we'll do a search here for lorem pixel. And we can see the second option down here for Lorem Pixel. I'm going to install that. And then we'll close, and it will reload. And once we have that installed, you'll notice there's an extra icon over here on the right. So in order to use this, we first need to create an image element. So let's create an image tag here. We can do it using Emmet, using the img shorthand and just hitting tab. That way it'll give us a src and alt attribute. And with our cursor still inside the quotation marks for that src attribute, I'm gonna come over here to this Lorem Pixel icon, and click on it. And it will give us a dialog where we can enter in a width and a height. We can choose a theme. There's a number of different themes. And we can choose whether we want it to be grayscale or not. So let's say we want an image, let's just enter it in. Let's say it's 600 pixels wide, and we want it to be 400 pixels tall. We can enter those in here. And then if we wanted a certain theme, we could choose Fashion, and this is the URL that it generates for us. Now this Lorem Pixel service is basically just a website where you can create an image tag with a certain URL in it, and it will spit that image out. So you don't have to have this plugin in order to use these images from the Lorem Pixel website. All you need to know how to do, is how to construct these URLs. So we have lorempixel.com/width/height/theme, if you want a theme. If you don't put a theme there, it's just going to randomize it. So again, this particular plugin is not really needed in order to use these images. It just gives us an easy dialog to construct that URL very quickly, so that we don't have to remember how that URL is supposed to be structured ourselves. So once we've constructed the URL we need, we'll just click on Insert at caret position, and it will insert that URL for us. So let's save our file, and I'm gonna open this file up in a browser window just to prove to you that this works. And here we go, so we can see a random image here. And if we were to refresh the page, I believe it will show us a different image. Yeah, so it's gonna show us a different image inside that particular topic that we chose. And we choose fashion here, so we could change that to, I think to one of them was cats, if we wanted to. I don't know why you would wanna do that, but there you go. Every time you reload the page, it'll show you a different cat image. Now obviously this isn't designed to be the final image that's gonna show up on your page, it's designed to be a placeholder. But that's how you would use this particular plugin to get that placeholder image. So thank you for watching, and I'll see you in the next lesson.

Back to the top