FREELessons: 9Length: 48 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Modifying Images

You can replace any image in a site via VisBug, whether it’s a regular or background image. You can also replace multiple images simultaneously. We’ll look at how you can work with images via VisBug in this video.

2.5 Modifying Images

Welcome back to VisBug Quick Start. In this video, we're gonna look at working with VisBug to modify the images in your site. So in this example here, we've got just a bunch of placeholder images. And VisBug can replace any image, whether it's a regular IMG tag or a background image, with any other image that you provide. This is probably one of my favorite features in this extension. So let's say that you're trying to find an image to form part of a template that you're designing, or something along those lines. And you've got a few lined up and you don't know which one is going to look best in that position. All you need to do is have some sort of placeholder image in there, then you can just simply grab your image from your File Explorer, drag and drop, and that's it. That's all you have to do, it's super, super easy, and super, super useful. So you can either drag and drop your images in one at a time, like this, or, just refresh, or you can also select a bunch of placeholder images at once. So in this case, I'm just gonna click this image element here to select all of these images. Now, I'm gonna select all four of my images in my File Explorer, and then I'm just gonna drag and drop, and bang, it just populates the whole lot all at once, it's really, really cool. But sometimes, you might have a heap of placeholder images, say, for example, in a placeholder gallery, and you might not have enough images to fill up all of those slots. So I'll just refresh again, and select all of these images, and this time, I'm only gonna select two of my images from my File Explorer. I'm gonna drag and drop, and then it just takes those images that you've provided and repeats them until it fills up all of the slots you had selected. So the ways that this can save you time when you're putting together designs, or you're testing out content, are really, really promising. There's actually not too much else that I can show you about working with images, because it's just a really straightforward, simple way of working. But it's so powerful and it's so useful that it really did deserve its own video. So when you're going through and you're trying to find that perfect image for your hero unit that really sets off your whole site. Or when you're trying to setup a bunch of placeholder content without taking ages doing it, this is gonna make what would otherwise be a more tedious job into something that can be so much quicker. So we've now covered all five of the key areas of working with VisBug, inspecting and selecting, modifying color, modifying type, modifying layout, and modifying images. But of course, all of this is not necessarily going to help you a lot unless you have some way to preserve changes that you've made. I mentioned earlier that there are built-in ways coming to VisBug to save out the changes that you've made to preserve them. But you don't have to wait for those features to be finished and deployed to be able to preserve the changes that you're already making using VisBug. So in the next lesson, which will be the last lesson of the course, we're gonna go over four ways to take the modifications that you've made. And either preserve the code, or capture that set of changes so that you can pass them on to a developer, or whoever else needs to know about the modifications that you wanna make to the design. So we're gonna go through what to do after making changes via VisBug in the next lesson, I'll see you there.

Back to the top