In the last video, we added an image view with a content mode of aspect film.

This means that the image view can scale the image to fill the bounds, but

it has to maintain the aspect ratio.

The reason our photo is really large is because in iOS 11,

which is the SDK we're running against in this course,

table views have self sizing cells enabled by default.

This means that absent any specific height values,

the cell resizes itself to fit all the content.

If this were a dynamic table view, we would need to

implement a delegate method and specify the height of this cell.

Since this is a static table view,

however, we can treat the cell defined in the storyboard scene as a plain old view.

Navigate to the scene, and select the cell in question,

which you might have to do from the document outline, and

then go to the size inspector and set a custom row height of 120 points.

Now if we run it again, The image should fit.

So let's select Camera.

Select an image from the camera roll.

We'll apply a filter to that.

And there we go.

Now we have an issue here.

It's obviously not fitting.

So what we might need to do is select the image and

select Clip to Bounds to make it fit.

Okay, let's do that again.

And now we select Camera.

Go through the same process.

Okay, there we go.

Now let's add the rest of our UI in.

So back in our table view we'll zoom in so we can see this better.

Next we want to allow the user to enter a caption.

So let's add add a text field to this first row.

Pin the top of the TextView to the top of the ImageView.

And you can do that by Ctrl+dragging and selecting Top.

And we're also going to pin the bottom edges or align them rather and

then give it a leading and trailing constraint, leading and

trailing space constraint of 8 points.

This should make it fit the area we want.

Let's make a few more tweaks though to improve the appearance.

Give it a placeholder text of Enter a caption.

Set the border style to none over here, and then under Control,

which if you keep scrolling down, there's a section labeled Control here.

In this vertical section, we're going to set it to top and

that puts the text right at the top, okay?

For the second row, let's add a text field, just drop it right in, and a label.

We're going to set the label's text to Tags.

We will center it vertically in the container and give it a leading space

constraint of 0 points and make sure you select Constraint to margins, okay?

Or you could not select Constraint to margins and then set it to 16 points.

That's some nuances there to the difference between those two but

it'll position it in the same place.

Okay, left align the text in the text field,

let's give it a placeholder text of something like beach, sand, sun...

We'll set the border to none again.

We're going to give it a leading and trailing space constraint of 8 points.

And then we'll vertically center in the container and that should be everything.

Now if you run the app you might notice that the caption image positioning doesn't

look the best.

And that's because we're not taking care of the finer points here.

Ideally we'd crop this image so that when it's square,

there's no white space on top depending on the image we select.

And we could give it a subtle border to distinguish between the background.

Well, no big deal.

Now we'll switch to the assistant editor.

Okay, look at that.

It brought up the PhotoMetadataController.

Let's create two outlets for the two text fields.

So first one, we already have an outlet for the image view.

We'll call this captionTextField, and

then the second one, we'll call it tagsTextField.

Getting the caption text is straightforward,

we'll just assume that user wants to save the entire string they type in over there,

so we're not gonna change anything.

Now for the tags, we're to do a tiny bit more work.

We're going to assume here that the user will enter different words separated

by commas like we've entered in the placeholder text.

When we hit Save, we'll get the entire string from the text field,

split it up into each word and then create individual tag objects out of it.

We're going to write a method that takes whatever text is in this text-field and

creates an array of strings where each value is going to be an individual tag.

So let's do that in the PhotoMetadataController,

and we'll do that as an extension.

Right here, so we'll say extension PhotoMetadataController,

and we'll call this method tags(from text: String).

And again, this is going to return an array of String.

We're going to assume that this text contains all the tags

as comma separated strings, so we need to split it up.

Now really, if we were doing this properly,

we would validate that there is actually some text and

handle this, or make sure that the user has entered commas, maybe they haven't.

Lots of things to take care of.

But here we're gonna keep it simple, so we'll say let commaSeparatedStrings

= text.split.

And the separator here is a comma.

And this now if you Option+click,

you see that it returns an array of string.subSequence or a substring.

We want actual strings out of that, so we'll map over this resulting array and

we'll pass each value to the string's init method.

And that should create a string out of each one

which results in an array of strings.

Okay, now this would be sufficient but we wanna clean up a few things.

When we start typing out tags, as you may notice,

the system is going to auto-capitalize that first tag.

It will also do this for certain proper nouns, so if you tag it with your name for

example.

We want to make sure that we store all our tags as lowercase strings.

This way if we create a, say, Beijing tag with an upper case B or

a lowercase b, they both get saved as the same tag and not two different ones.

So here we'll say let lowercaseTags = commaSeparatedStrings.map and

here we'll say $0.lowercased.

Let's clean up one more thing.

Typically when writing out sentences in certain languages,

we put a space after the comma.

This means that if we had two tags, beach and fun, where fun is the second tag.

When we split them up by a comma,

the second string will include a space as its first character.

So we'll get rid of all of this white space and

new line characters as the final thing before we return our array.

So here we'll say, return lowercaseTags.map, and

in this closure we'll say $0, which is each of those strings,

trimmingCharacters(in: CharacterSet) .whitespacesAndNewlines.

Okay, perfect.

To use this method, we'll call it from viewDidLoad up here.

In this app, it's not mandatory to add tags to a photo,

so we'll use an if let to check if there is text in the text field.

So if let tagsText = tagsTextField.text.

Now if there is, we'll say self.tags,

a property that doesn't exist yet, tags(from: tagstext).

Okay, so if there is text, we'll call the method and

we'll assign the resulting tags to a stored property.

We also need to define the stored property, which is an array of strings,

and we'll just give it an empty array initially.

So var tags = an empty array of Strings.

Okay, now we have a caption and a tag but

not the main image with the filter applied.

That's the last thing we need to have ready before we can save.

Let's tackle that in the next video.