We're also going to style them so that they don't overtake the entire screen like we saw in the last guide, so let's get started with that. I'm gonna open up Visual Studio Code and there are a couple of things I wanna do before we go and start populating the rest of this.

I first want to wrap up this image in a div, so this image or this div is going to hold the image which we're going to style and then it's also going to hold eventually, a delete link because we want the ability to delete one of these images if we're no longer using it.

So, I'm going to create a div here, I'm gonna give it a className of something descriptive like portfolio-manager-image-wrapper and then I'm going to close that div tag off. And now we have a template that we can go and we can populate for the rest of the dropzone components.

So we're going to first just grab everything up to where this colon is and then I'm going to come down here and I'm gonna give us a little bit of space in between each one of the dropzone components just so we don't run into them. And then I'm going to paste this in, and then come to the end of the banner dropzone component and I'm just going to close off that ternary operator.

Let's see, it looks like it's saying that there is an error here, so let's see exactly what that is. So, let me close this off, okay, we have everything here. Oh and you know what it is? It's because we don't just need a curly bracket, we also need a closing paren and there we go. If you hit save now, now this is all working.

Now we just need to update the conditional. So it's not gonna say thumb image, this is gonna say if this.state.banner_image and this.state.editMode then I want you to show this image except now we want the banner image and that's all we need to do and everything else should work properly.

Now let's go and do the same thing to the logo. So I'm going to paste this in and at the end of the dropzone component, give yourself a line and close off the ternary operator with a paren and then a closing curly bracket, hit save and then make the change so this is going to say, if this.state.logo and then we want to call this.state.logo.

{this.state.logo && this.state.editMode ? (
  <div className="portfolio-manager-image-wrapper">
    <img src={this.state.logo} />
  </div>
) : (
  <DropzoneComponent
    ref={this.logoRef}
    config={this.componentConfig()}
    djsConfig={this.djsConfig()}
    eventHandlers={this.handleLogoDrop()}
  >
    <div className="dz-message">Logo</div>
  </DropzoneComponent>
)}

Okay, hit save, and let's test this out just to make sure we don't have any syntax errors or anything that the IDE did not catch. So go open up Chrome and none of these test images have all three images so I'll go down to one that does have that. So I'm going to click on edit and it's kinda hard to see right now because each one of these images is taking up so much space but I think you can kinda tell that we do have three images.

You can definitely see the logo and then it appears that we have the two images right there. So that means that we have populated all of the data properly. So now let's get going on putting all of this content into its own little box.

So, let's open up Visual Studio Code again. I'm going to copy this className of portfolio-manager-image-wrapper and let's go into the portfolio form style sheet. And inside of image uploaders, we can nest to this so I'm going to paste this class in and then let's just add some styles.

So I want to select the image and then inside of this image, I wanna give it a width of 100% and that's going to be what slides that width together. So it's only going to take up as much space as the grid allows which we know because we built it is 200 pixels.

So the width is going to be 100%, let's give it a height of 120 pixels and then we want to make sure this fits in so I'm going to use the object-fit rule and I'm gonna use cover as a value and then let's also add a border-radius just so the images have a nice little rounded edges, so I'm going to say border radius of 5 pixels, hit save.

portfolio-form.scss

.portfolio-manager-image-wrapper {
  img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 5px;
  }
}

Now let's go test this out, so this is looking much better.

It's kinda hard to see the logo because it's a white on a white background essentially but I can definitely tell it's there if you select over it, and then you can see our thumb and our banner images are now styled appropriately.

And if you come down to one of the other ones like quip, if you come up here, you can see that is now swapping it out so all of those objects, all of those items are being cleared out every time that we click on edit which is exactly what we're wanting so that works for the text.

Now it's also working for the images. So now that we have all this in place and the styles are looking good, in the next guide, we're gonna see how we can delete a record and delete an image if we no longer need it.

Resources

• Source code