OfferingTree Image Layering Wrap

[00:00] Hey Eddie, happy Monday. So, image wrapper for Webflow. I have a couple of versions of this built. Basically one that's kind of like an MVP for now, and then one for later.

[00:10] Or, kind of depending on how far we get, maybe some of them we can use the multi-image layering situation. So, just the way this works, if I hop over to the Figma real quick.

[00:20] I was just using this one as an example. Which basically, as it's built up, is I have a series of windows.

[00:30] And each of them are grouped, and then they're all in a frame. And the frame is set to 700 by 629.

[00:40] Somewhat arbitrary, it's supposed to be about 700 by 600 more or less. But ultimately this frame is going to be slightly different on every display anyway.

[00:50] So, it's really more about centering the object. But in any event, so this sort of MVP basic version is just to turn off the background. And export this whole thing as a PNG.

[01:00] Doing it at 1.5 times and without the background, or any background included basically.

[01:10] So, you can see there's no fill here. And that's going to give me a single PNG without all the background pieces. Then over here in Webflow, I've built up basically, you know, this is two versions.

[01:20] I'm going over the single version now. Where I also just created a feature block. I'm not sure exactly how the client first one does it. This is a really standard way of doing it.

[01:30] Is you sort of have a feature block that's a flex box. And then a left and a right. And they're pushing on each other basically all the time. And then inside of this one flex box is where this graphic lives.

[01:40] And this graphic basically always is pushing up and down. But is trying to be solidified in its width.

[01:50] So, going inside the graphic, you'll see that there's two divs. There's a background and then a layer. And so, the background is just a div that's set.

[02:00] It's positioned absolutely. So, it's just going to grab that whole thing. And then it has a color on it. It doesn't actually by default have a combo class for the color.

[02:10] It's just sort of following the way stuff works. And then inside that image wrap is basically this one image. And so, this image wrap right now is set to a block.

[02:20] Really, it should be a centered flex box. And that will keep that image in the center all the time. And you can see the image is there.

[02:30] And the image is set to be 100% by 100%. Which kind of makes it nice and clean. But the image fit is contained. Such that if the proportions change, the padding around the outside of the image will change as well.

[02:40] And so, you can see that basically reproduces the graphic that we have here. Now, to make it more layered, I have this layered version as well.

[02:50] So, if I jump down here, you'll see the setup is identical. With the one exception that instead of just having that background that's positioned absolutely.

[03:00] And the layer one that's positioned relatively. There's three more image layers that are positioned absolutely. With a step change in their Z depth going up.

[03:10] And then each one of them has the same graphic inside of it. That product graphic image.

[03:20] When it comes to the export of this, this is where it gets a little more procedural. Where you turn off the background. And then I basically exported that. And then that.

[03:30] And then that. And then that. And then I load them in to the individual images. Such that it's occupying the whole thing. But the frame size is the same.

[03:40] And that's how it stays lined up. And you might be like, why would you do this? Well, when it comes to actually loading the pages in the site. I set up a little test.

[03:50] Where basically I have an animation set. So that if you hover the mouse over, it will play the animation. So, you can imagine if you go on a page. We're going to have stuff like nicely load in and all of that. We could have it where it loads the whole image.

[04:00] Or you can have it where it kind of builds up a little. And I think the building up is a nice touch and feature. We can play with the timing of things.

[04:10] And so if you wanted one thing to come up and be a little more prominent. And then the other things to kind of take their time. That's doable and not terribly difficult. So, yeah.

[04:20] So those are in there. They're in a page right on the root. That's called image holder. And so inside I built that.

[04:30] They're just scrappy right now. Or just I should say individual pieces. If you want to wrap them in a component, that's totally fine. I have the animation set just by this specific object.

[04:40] Not by class. Because if you do put them in a component, it kind of will break things anyway. So, I figured I'll just let you determine how you want to deal with that. If it comes to the point where you're like, yeah, I want to do this.

[04:50] But we only have the time for the single layer image. I would still roll it out with all four images. All four image layers.

[05:00] Just without the, you know, the actual image file for 2, 3, and 4. But that way the divs exist and later we can add them if we need them. Or in one or two instances we were like, oh actually I want

[05:10] to be able to have an alert over here, or frankly it's a div so you can put anything over top of it. You have that ability. So yeah, so that's in there. Let me know if it needs any tweaking.