[Personal application development work memo] Create an image list page like Instagram

Thing you want to do

Since the image has already been displayed in each post,

I want to display only the image of each post on one page.

Why make an image list page?

I'm making a diet app so that I can see the changes in my body.

Work content

The images have already been saved in the database, so all you have to do is retrieve them from the database and display them.

If you press this "image list", you want to move to the page where you can see the image list posted by current_user.

Create a new view

Since it is an "image list page", I placed a file called "image.html.haml" under the posts directory.

Create a new action on the controller

Added image action to posts_controller.

Set up routing

config/route.rb

#Image list page
get "posts/image" => "posts#image"

Set the routing so that posts # image works.

Set the path

I checked with $ rails routes and set the path as follows.

Up to this point, posts # image is working.

Get image data posted by current_user with posts # image

map method? value method?

The image list page posted by current_user has been created.

Click here for the resulting page. Images posted by current_user are displayed in chronological order.

Click here for the corresponding code

controller

posts_controller.rb

def image
  @posts = Post.where(user_id: current_user.id)
end

This simply puts the logged-in user's posts in an instance variable called @ posts so that the view can get them from here.

View

ruby:image.html.haml

.content
  .images
  - @posts.each do |post|
    = image_tag post.image.url, class: "my-images"

I had a hard time displaying the image here.

At first, I tried to get it from @images in the extra edition described later and display it, but I couldn't display it.

- @posts.each do |post|
  = image_tag post.image.url, class: "my-images"

Posts posted by the logged-in user are in @ posts in the form of an array, so take them out one by one with the each method, Variables (post here) are used to retrieve each one.

What kind of feeling does @ posts contain posts (post data)?

Terminal

[1] pry(#<PostsController>)> @posts
  Post Load (0.5ms)  SELECT `posts`.* FROM `posts` WHERE `posts`.`user_id` = 28
  ↳ app/controllers/posts_controller.rb:65
=> [#<Post:0x00007fc263764bc0
  id: 217,
  food: "salad",
  calorie: 10.5,
  protein: 10.5,
  fat: 10.5,
  carbo: 10.5,
  text: "I ate a salad.",
  created_at: Fri, 21 Aug 2020 06:56:52 UTC +00:00,
  updated_at: Fri, 21 Aug 2020 06:56:52 UTC +00:00,
  user_id: 28,
  start_time: nil,
  image: "image6.png ",
  weight: 70.5>,
 #<Post:0x00007fc263764a58
  id: 219,
  food: "salad",
  calorie: 10.0,
  protein: 10.0,
  fat: 10.0,
  carbo: 10.0,
  text: "salad",
  created_at: Fri, 21 Aug 2020 10:20:31 UTC +00:00,
  updated_at: Fri, 21 Aug 2020 10:20:31 UTC +00:00,
  user_id: 28,
  start_time: nil,
  image: "image6.png ",
  weight: nil>,

It looks like this.

You can specify the image column of these by setting @ posts.image. Take out one by one from the array like above, and take out only those ʻimage: "image6.png " this part, It is OK if you add .url` so that it can be displayed with image_tag.

Extra edition (Oh !!)

posts_controller.rb

def image
  @images = Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
end

This is what impressed me quite a bit.

What happens when binding.pry is

[1] pry(#<PostsController>)> Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
  User Load (0.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 28 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ (pry):2
  Post Load (0.4ms)  SELECT `posts`.`image` FROM `posts` WHERE `posts`.`user_id` = 28
  ↳ (pry):2
=> ["image6.png ", "image6.png ", "image5.png ", "image4.png "]

Like this, the image data is acquired in the form of an array.

posts_controller.rb

def image
  @images = Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
end

#Post Post model
# .where(user_id: current_user.id)Search and get posts of logged-in users
# .select(:image)Get only image column

It's easy so far.

If you think that you can get image data with this, you can't.

What happens when binding.pry so far is

=> [#<Post:0x00007fc261c86290 id: nil, image: "image6.png ">,
 #<Post:0x00007fc261c85fe8 id: nil, image: "image6.png ">,
 #<Post:0x00007fc261c85cc8 id: nil, image: "image5.png ">,
 #<Post:0x00007fc261c85a20 id: nil, image: "image4.png ">]

Information other than the url of the image comes out like this.

As a result of trial and error as to how to extract only this part, ʻimage6.png` was obtained by the above method.

As a result, I didn't use it, but I learned that I could get it in this way, so I learned.