ruby on rails - i want to change from the state where only one posted image is displayed to the state where two posted images ar

Home>2020-10-24 09:05

ruby on rails - i want to change from the state where only one posted image is displayed to the state where two posted images ar

Currently, I am creating an image posting WEB application like instagram.
The posted images are currently displayed one by one on the top page.
I want to change it so that two images are displayed in order from the top.
Where should I change it? ??
HTML and CSS are quoted from the sample site, and I do not understand the description of the code below.

When you can post two images, arrange the CSS.

Newly posted images are displayed, but Veiw can't implement them as expected.
What I understood, the language for HTML to be displayed on the browser, CSS determines the margins of images and the color of characters.

Corresponding source code

Ruby on rails
app/veiws/layouters/application.html.erb<! DOCTYPE html><html><head><title>NF</title><% = csrf_meta_tags%><% = csp_meta_tag%><link rel = "stylesheet" type = "text/css" href = "http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"><% = stylesheet_link_tag'application', media:'all','data-turbolinks-track':'reload'%><% = javascript_pack_tag'application','data-turbolinks-track':'reload'%></head><body><header>              NF        <% if user_signed_in?%>                <span><% = current_user.nickname%>       <ul>        <li>         <% = link_to "My Page", "/ users/# {current_user.id}"%>         <% = link_to "log out", destroy_user_session_path, method:: delete%>        </li>       </ul>      </span>        <% = link_to "post", new_item_path, class: "post"%>              <% else%>                  <% = link_to "login", new_user_session_path, class: "post"%>        <% = link_to "new registration", new_user_registration_path, class: "post"%>              <% end%>              </header><% = yield%><footer>  <p>      Copyright NF 2020.
    </p></footer></body></html>app/veiws/items/index.html.erb<% @ items.each do | item |%><% = render partial: "item", locals: {item: item}%><% end%>app/veiws/items/_item.html.erb
                    <span><% = image_tag'arrow_top.png'%></span>    <ul>      <li>        <% = link_to'Details', item_path (item.id), method:: get%>      </li>      <li>      <% if user_signed_in?&&current_user.id == item.user_id%>        <% = link_to'edit', edit_item_path (item.id), method:: get%>      </li>      <li>        <% = link_to'Delete', item_path (item.id), method :: delete%>      </li>      <% end%>    </ul>        <p><% = item.text%></p>  <span>    ">    <span>Posted by</span><% = item.user.nickname%>        </span>  app/assets/stylesheets/application.css
/ *
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_ * statement.
 * It is generally better to create a new file per style scope.
 ** = require_tree.
 * = require_self
 * /
 * {
  box-sizing: border-box;
}
app/assets/stylesheets/stylesheet.css
@charset "UTF-8";
/*! normalize.css v2.1.3 | MIT License | git.io/normalize * /
/ * ================================================ ==========================
 * HTML5 display definitions
 * ================================================= ========================= * /
/ *
 * Correct `block` display not defined in IE 8/9. * /
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
/ *
 * Correct ʻinline-block` display not defined in IE 8/9. * /
audio,
canvas,
video {
  display: inline-block;
}
/ *
 * Prevent modern browsers from displaying ʻaudio` without controls.
 * Remove excess height in iOS 5 devices. * /
audio: not ([controls]) {
  display: none;
  height: 0;
}
/ *
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox<22. * /
[hidden],


template {
  display: none;
}
/ * ================================================ ==========================
 * Base
 * ================================================= ========================= * /
/ *
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 * user zoom. * /
html {
  font-family: sans-serif;
 /* 1 * /
  -ms-text-size-adjust: 100%;
 /* 2 * /
  -webkit-text-size-adjust: 100%;
 /* 2 * /
}
/ *
 * Remove default margin. * /
body {
  margin: 0;
}
/ * ================================================ ==========================
 * Links
 * ================================================= ========================= * /
/ *
 * Remove the gray background color from active links in IE 10. * /
a {
  background: transparent;
}
/ *
 * Address ʻoutline` inconsistency between Chrome and other browsers. * /
a: focus {
  outline: thin dotted;
}
/ *
 * Improve readability when focused and also mouse hovered in all browsers. * /
a: active,
a: hover {
  outline: 0;
}
/ * ================================================ ==========================
 * Typography
 * ================================================= ========================= * /
/ *
 * Address variable `h1` font-size and margin within` section` and ʻarticle`
 * contexts in Firefox 4+, Safari 5, and Chrome. * /
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}/ *
 * Address styling not present in IE 8/9, Safari 5, and Chrome. * /
abbr [title] {
  border-bottom: 1px dotted;
}
/ *
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. * /
b,
strong {
  font-weight: bold;
}
/ *
 * Address styling not present in Safari 5 and Chrome. * /
dfn {
  font-style: italic;
}
/ *
 * Address differences between Firefox and other browsers. * /
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
/ *
 * Address styling not present in IE 8/9. * /
mark {
  background: yellow;
  color: black;
}
/ *
 * Correct font family set oddly in Safari 5 and Chrome. * /
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
/ *
 * Improve readability of pre-formatted text in all browsers. * /
pre {
  white-space: pre-wrap;
}
/ *
 * Set consistent quote types. * /
q {
  quotes: "" "" "" "" "" ";
}
/ *
 * Address inconsistent and variable font size in all browsers. * /
small {
  font-size: 80%;
}
/ *
 * Prevent `sub` and` sup` affecting `line-height` in all browsers. * /
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/ * ================================================ ==========================
 * Embedded content
 * ================================================= ========================= * /
/ *
 * Remove border when inside ʻa` element in IE 8/9. * /
img {
  border: 0;
}
/ *
 * Correct overflow displayed oddly in IE 9. * /
svg: not (: root) {
  overflow: hidden;
}
/ * ================================================ ==========================
 * Figures
 * ================================================= ========================= * /
/ *
 * Address margin not present in IE 8/9 and Safari 5. * /
figure {
  margin: 0;
}
/ * ================================================ ==========================
 * Forms
 * ================================================= ========================= * /
/ *
application.css is like this.

What I tried

Understand the structure of HTML and CSS

Supplementary information (FW/tool version, etc.)

Please provide more detailed information here.

rubyonrails

Answer # 1

I don't understand the description of the code below.

If so, rather than asking what you want to do functionally
You should be asked the meaning of the code in the part you don't understand.

The answer to this question is as follows.


<% # Turn by 2 each%>
<% @ items.each_slice (2) do | item1, item2 |%>
  <% # Place the following two side by side%>
  <% = render partial: "item", locals: {item: item1}%>
  <% = render partial: "item", locals: {item: item2} if item2%>
<% end%>

And


<% @ items.each do | item |%>
    I don't know if<% # .col is available ...%>
    
    <% = render partial: "item", locals: {item: item}%>
    
<% end%>

It seems that it can be realized like this.

Trends

TutorialFor

ruby on rails - i want to change from the state where only one posted image is displayed to the state where two posted images ar

Related articles