4.2 Set Up a Scalable Tablet Image With a Low File Size

Hey, welcome back to XD code with Avocode 3. In this lesson, we're going to set up a tablet image that we have here. You remember that earlier we exported this image in two parts. We exported the screen as a JPEG and we exported the background as a PNG so that we can have transparent shadows. Another thing that we have to make work is positioning this screen on top of this tablet so that it looks like it's in the right place, it all looks like it's one unit. But we also need to make sure that the whole thing can be scalable. If we weren't trying to scale it, then we could just set the exact number of pixels that the screen image should be from the left side of the tablet. But because we're going to be scaling the image, the number of pixels that it should be offset by is gonna change, too. So what we have to do is figure out percentage values that we can use instead, so that our offsets continue to work no matter what size we have our image scaled to. Now, an important thing to note is that the numbers that need to be used in this section might be slightly different depending on exactly what size you exported these images at. So if you're using an image that's maybe ten pixels wider than mine, or offset ten pixels in a different direction, then you might need to adjust your numbers just a little bit until it looks right. Or if you want to use the exact numbers that I'm going to be using in the code in this lesson, then you can go into the source files that you will have received as part of this course. Look at the completed project, jump into the images folder there, and copy those files into the project that you're working on now. All right, so the first thing that we're gonna do is set up a div that's just gonna be designed to align this main portion of our tablet. Now the whole tablet background image with the shadows is actually quite wide. But even though this tablet image is quite wide, for alignment, we don't really care how far the shadow image goes out. All we care about is where the edge of this main body of the tablet is. So we're gonna set up a container, div, that represents the main body of this tablet, then we're gonna bring in our wide image of the tablet with the shadows and everything and we're gonna align it with this container. If that doesn't make sense yet, don't worry because we're gonna step through it all. Inside the div that's forming the first column in the panel that we're working on, we're gonna add a new element with the class tablet. And then we're gonna setup this style over here. And we're gonna start by putting fixed pixel values in and then we'll convert them to flexible percentage values later. So let's look and see how big this tablet body actually is. If you hover over it, you can see we get this screen outline with the select tool. So click on that, and then here we can see the width and height, 357 by 532. So we'll temporarily set the width to 357 pixels, and the height to 532. We're gonna use these fixed values to figure out where everything should be positioned. Then we'll make necessary calculations to change them over. Now I'm gonna add another div nesting in here, and we're gonna give it the class tablet_bg. And this is gonna hold that large background image with the shadows. So we'll setup this class as well, tablet_bg. Also to fix the height and width of this as well. And the height and width of this div should correspond with the size of the tablet_bg image. So in this case, that's 540 by 600, so we'll set width to 540 and height to 600. And now what we're gonna do is use absolute positioning to make this tablet background image line up the way we want inside the parent with the class tablet. So to do that, we're gonna need to set this position to absolute. And for that to work, the parent is going to need to be positioned relative. Of course, we need to set the background. We're gonna set it to image, so we'll say url, select our tablet_bg image. We're gonna set it to align left top and to have no repeat. Then we're also gonna set the background size, To contain so that it's always showing up at the right size. Just to show you quickly what we've got now. So you can see that we've got our tablet element here and it's the right size and it's in the right position. But the background element is pushed off to the right and down too far. So we're gonna move our tablet background element over until this main section of the tablet is aligned with this container element. So do that by setting left to a value of -95 pixels. And top, to a value of -15 pixels. Now when we take a look. Now the tablet is correctly positioned. And by setting the alignment and the positioning of this tablet class, now we no longer have to worry about where the shadows of the background element fall, they're always gonna be in the right place relative to the parent element. Now the next thing that we wanna do is make sure that this tablet image can scale as it needs to. The first thing we're gonna do is comment out the width and height lines for our tablet class. And instead we're gonna specify our width as a percentage. So, we want our tablet to take up about eighty percent of our available width. And this is a flexible number because the whole thing is going to be scalable. But for now, we'll stick with 80%. And now we're gonna use our padding top trick that we've been using so far to control aspect ratio. So we're gonna set the padding top, To 120%, that's gonna give us the right aspect ratio. Now to convert the width and height of our tablet_bg to percentages as well. So when we shrink the size of the tablet element, the tablet background is gonna shrink down, too. So what we want to know is what percentage is this width, 440 pixels, of this width. So to figure that out, we can say 540 divided by 357, 540 by 357. And then to get a percentage, multiply it by 100. So we get 151. So now let's change our width here to 151%. And we need to do the same thing for the height, so we'll say 600 divided by 532 times 100 is 112. So we can actually round that up so that our height can be 113%. We’ll do the same thing for our left and top positions. Now for these alignments, I found that doing an exact calculation didn’t quite get things right. So I actually eyeballed these percentages and what I came up with was -26.6%. And -2.8%. So now let's take a look. So now our image still looks like it's positioned the same. But if we start to shrink down, now we can see that it's able to scale. Before it just stayed at that the same size and would be pushed over to the right this way. But now that we do have that functionality. And sometimes this is not gonna be as tall as the column that it's sitting next to. We wanna vertically align it, so we'll go into our tablet class, and we'll set top to 50%. So that's gonna set its top edge down at the halfway mark vertically. Then we need to set it back up again so that it's actually probably vertically centered, which we'll do by using transform. And we're gonna use translate. We don't need to move it horizontally, so we'll set the first number to 0. We want to move it back up by half, so we'll set the second number to -50%. And now when we shrink down, the tablet image is gonna stay centered. Now let's go ahead and add an image for the screen. So we're gonna use an image element, we'll set it's source to images/tablet_screen and we'll give it an alt of tablet screen. Now let's target that image by using tablet_image. And we're just gonna go straight for percentage width and height values on our image. First let's look up and see how large the tablet image is. So looking at the image in image viewer, I can see that it's 322 by 429. So I'm just gonna make a little comment here to help me remember what the size is, so it's 322 by 429. This time we want these values to be calculated as a percentage of their immediate parent, which is tablet_bg. So for the width, we want to know what percentage 322 is of 540. So 322 divided by 540 times 100 equals 59.6%. Now, we actually don't need to calculate a percentage for the height value. Because we're using an image element here as opposed to a background, it has the innate ability to observe its aspect ratio. So, all we need to do to allow that to happen is set the height to auto, and then it will just keep its aspect ratio right relative to the width that we've just set. So, now this is gonna need to be positioned absolutely also. So for the top value, we've got 10.7% and for the left value we've got 20%. So, now let's check out what we've got. All right, so there we go. Now, our screen looks like it's a part of the tablet. Everything is unified and if we start shrinking down, then you can see that the screen shrinks down at the same rate as the background and it still looks like it's all part of the same edge. But you get that benefit of about half of the file size as you saw earlier when we exported the images. And just as a reminder, in the first course, about creating code-friendly design, we were trying to illustrate the error that can come with making a radial gradient like this, and then having a tablet image, like the one we have here, fused into that design, so that it cannot be scaled. You can see already, as we start shrinking this down, our radial gradient shrinks to fit the entire panel. It can squash, it can stretch, it can shrink. And this image here is able to scale independently of the background. Now obviously, the responsive functionality is not quite right there. You don't wanna have these teeny tiny little columns. So in the next lesson, we're gonna go through and add some more coding to our media queries to make this panel fully responsive. I'll see you there.