Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Rails 8 Course - Beginner to Intermediate!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
This video covers adding Action Text to a Rails application, enabling rich text editing and image attachments for posts, configuring user ID tracking for posts, and refining the user interface to enhance usability.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Okay, so guys, the next thing on the
agenda is to add action Text to our posts.
0:04
So when we go to create a new post,
there's going to be a special rich text
0:08
here so that we can make our text bold, we
can make it italic, we can attach images.
0:11
So let's go ahead and do that.
0:16
It's going to be really useful and
obviously it's a feature of Twitter, so
0:17
we need to go ahead and do that.
0:19
So the first thing that we're
going to do is stop the server.
0:20
And then inside of here we're going
to run a command by just run clear.
0:22
We're going to run a command
called rails action underscore.
0:25
If I just make this full screen so
you can see, rails action_text:install.
0:29
Action text is the gem that we're
going to be doing this with.
0:34
So hit Enter on that command,
then run rails db migrate.
0:37
After that, we're going to put it back in
its position and we can run rails S again.
0:40
So run rails S.
0:44
And then let's have a look at the schema
RB and see what that actually created.
0:45
We'll go to DB schema RB and
0:48
as you can see inside of here we
have this action text rich text.
0:49
So name, body, all that active storage
attachments, active storage blobs.
0:53
And so yeah,
it created these four different tables.
0:56
With these tables, we're going to be
able to add action text to application.
0:59
So after that, go to your model.
1:02
So go to posts.
1:04
So go to app models post rb.
1:05
And inside of here what we're gonna do
is we're going to say has_rich_text.
1:07
And then we're going to say title because
that's the attribute we want to apply
1:12
the has rich text function on.
1:16
After that, we're going to go to the
views, we're gonna go to the posts, and
1:17
we're going to go to the form.
1:21
And inside of here we're going to
look at the form.text area title.
1:23
And inside here we're just going to
change this to rich underscore text area.
1:26
So now that we've done that,
we're going to refresh the page and
1:30
as you can see,
our text area has completely changed.
1:33
We have the ability to
actually make our text bold.
1:35
If I just,
this is the first action text post.
1:38
We now can actually make it bold,
which is pretty cool.
1:42
We can make it Italic and
I don't even know what that one is.
1:44
We can cross it out and
then we can enter a URL.
1:47
So that's pretty cool.
1:50
We can make it bigger.
1:51
Lots of different options just
from these three lines of code.
1:52
And now let's actually start
trying to attach an image and
1:55
see if the image attaching is working.
1:58
So as you can see, you can attach
an image and it gives you a preview,
1:59
which is really good.
2:02
It even shows you the size of the image,
the name of the image, and
2:03
you can just press X on it and
it'll get rid of it.
2:05
So let me attach another image,
this one is fine.
2:07
And then let me actually create the post.
2:10
As you can see, the create.
2:12
The post is actually created and
the image is here.
2:13
So with just three lines of code,
we were able to make this work.
2:15
If it's not working for you, it's probably
something to do with Ruby VIPS or
2:17
mini magic.
2:21
These two are gems that
you need to install and
2:22
they are gems that you need
to install on your system.
2:23
I recommend that you use mini magick.
2:25
You can do this by doing gem
install mini magick, mini_magick.
2:27
And as you can see,
successfully installed mini magick and
2:32
you also have to have it
installed on your system.
2:34
Okay, so now that we've done that,
I'm going to run rails S.
2:35
And that is a great feature
that we just added and
2:37
we're able to do it very quickly.
2:39
Now, two more things I want to do.
2:41
I just want to quickly, when we
actually at this post, it shows twice.
2:42
It says post successfully updated twice.
2:47
So we're just going to
get rid of one of them.
2:49
So let's go to the show page and
2:51
inside here we're going to get rid of
the notice because we do not need that.
2:53
So if we refresh,
then we update the post again.
2:58
If I just change this previous
first action text post and
3:01
then I update the post,
it's actually going to only say this once.
3:04
So that's perfect.
3:09
And then we can actually add multiple
images in here, which is very good.
3:10
So I'm not going to add
the same one twice.
3:13
So we can add multiple images,
which is really cool.
3:14
Update post.
3:17
And as you can see, our multiple images
are now there with their names and
3:18
their details attached.
3:21
Now something else that we need to do is
actually attach the user ID in this form.
3:22
So let's go ahead and do that because we
want to be able to do user.posts, right?
3:26
And we're saying post, but
really it's user tweets.
3:30
So we want to attach
the user ID in this form.
3:32
That way we can track the users.
3:34
So go to the posts and
then underscore form, and
3:36
inside of here we have got
a number field user ID.
3:39
Okay, and so we want to actually
add in the value for the user ID.
3:43
So let's go ahead and do that.
3:46
We're first going to get rid of this
label because we do not need that.
3:47
And then above here,
we're going to say if current_user,
3:50
if the user is signed in,
we're gonna say value current_user.id.
3:55
And then we're also going to say style.
4:01
Well, we'll just leave it at that for now.
4:04
So as you can see, that has the current
user ID there, which is perfect.
4:06
And because we know that now,
4:10
we'll be able to track
the user current user's post.
4:11
So we're gonna say if, sorry,
we're gonna say style, display none.
4:13
That way, we don't want to see that
because we don't need to see that.
4:20
Perfect.
4:24
Then we can update the post and
that is success.
4:25
That is action text successfully
in our application.
4:27
I'm just gonna get rid of
that flash message again.
4:31
So go to the index page and
at the top get rid of the notice.
4:33
Just quickly we're gonna
get rid of this user ID.
4:38
Go to VS code and inside here go app
views_post and get rid of this user ID.
4:40
We don't need to display that for
everyone to see.
4:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up