Development memo ~ I want to display only the first image posted multiple times ~

Introduction

When multiple images were posted at the same time, I had to devise a description to display the images. I will post the article as a memo so that I will not forget the contents.

Thing you want to do

** I want to display the one with the lowest index number of multiple posted photos on the index screen **

Description

File name.html.haml

section.fifth-headline
  %h2.title Pickup category
  .contentsbox
    .contents-title
      %h3.heading Newly posted products
    .contents-lists
      .contents-list
        - @newProducts.each do |product|
          =link_to "#" do
            .contents-list__itmes
              .contents-list--item
                = link_to product_path(product), class: "listBtn" do
                  %figure.product__images
                    = image_tag product.images[0].name.url, alt: "image_url",size: "200x150", class:"new-img"
              .contents-list--inner
                %h3.name  
                  = product.name
                .data
                  %ul
                    %li 
                      = product.price
Circle
                    %li
                      %i.fa.fa-star.likeIcon 0
                  %p (tax included)
      

home_controller

def index
    @newProducts = Product.includes(:images).where(status: 0).order("RAND()")
     ~abridgement~
  end

point

If you have posted multiple images and want to display only the first one, you can get the index number [0] by writing as follows.

= image_tag product.images[0].name.url, alt: "image_url",size: "200x150", class:"new-img"

Also, in this case, you have to define the file to be called by the index action. Therefore, **. Where (status: 0) ** is defined and assigned to the instance variable.

@newProducts = Product.includes(:images).where(status: 0).order("RAND()")

I think this will work!

At the end

This time, "I can write like this! I thought, and wrote an article! I'm still studying, so if you find something wrong, please comment!

Thank you very much!

Recommended Posts

Development memo ~ I want to display only the first image posted multiple times ~
I want to display the name of the poster of the comment
I want to return multiple return values for the input argument
In Java, I want to trim multiple specified characters from only the beginning and end.
I want to give edit and delete permissions only to the poster
[Ruby] I want to output only the odd-numbered characters in the character string
[Ruby] I want to extract only the value of the hash and only the key
[Ruby] I want to display posted items in order of newest date
I want to display an error message when registering in the database
I want to do team development remotely
I want to create the strongest local development environment using VSCode Remote Containers
I want to get only the time from Time type data ...! [Strftime] * Additional notes
I always want to show what I posted only to myself who is logged in
I want to var_dump the contents of the intent
I want to truncate after the decimal point
I want to get the value in Ruby
I want to see only the latest because the Docker log has become too large
I want to change the path after new registration after logging in with multiple devises.
[Rails] I want to display the link destination of link_to in a separate tab
I want to hit the API with Rails on multiple docker-composes set up locally
[Java] I want to calculate the difference from the date
I want to embed any TraceId in the log
I want to judge the range using the monthly degree
I want to know the answer of the rock-paper-scissors app
I want to dark mode with the SWT app
I want to apply ContainerRelativeShape only to specific corners [SwiftUI]
I want to call the main method using reflection
[Rough commentary] I want to marry the pluck method
I want to return the scroll position of UITableView!
I want to simplify the log output on Android
[Rails] How to display an image in the view
I want to add a delete function to the comment function
I want to control the display of the upper management navigation bar (Control menu) in Liferay 7 / DXP
Implemented a strong API for "I want to display ~~ on the screen" with simple CQRS
I can't find the docker image after updating to docker desktop 2.4.0.0
[Beginner] I want to modify the migration file-How to use rollback-
[Rails] [bootstrap] I want to change the font size responsively
I want to bring Tomcat to the server and start the application
I want to change the log output settings of UtilLoggingJdbcLogger
I want to call a method and count the number
I want to use the Java 8 DateTime API slowly (now)
I want to create a form to select the [Rails] category
I want to use the sanitize method other than View.
I want to put the JDK on my Mac PC
I want to give a class name to the select attribute
I want to recursively search the class list under the package
I want to transition to the same screen in the saved state
I want to use FireBase to display a timeline like Twitter
[Ruby] I want to reverse the order of the hash table
I want to pass the startup command to postgres with docker-compose.
I want to simplify the conditional if-else statement in Java
[Controller] I want to retrieve the numerical value of a specific column from the DB (my memo)