I am trying to display six images uploaded with PaperClip in a grid type fashion.
Whatever I try, the images only display in one line. If I change the class to gallery it instead shows one image per line.
I have also tried #each_slice with no luck, and using index was my last attempt.
index.html.erb
<div class="page-header"><h1>My Work</h1></div>
<div class="media">
<% #documents.in_groups_of(3, false).each_with_index do |document_group, index| %>
<% document_group.each do |document| %>
<div class="media-left">
<% if index < 3 %>
<%= link_to image_tag(document.doc.url, class: 'media-object', size:"108x152"), document.doc.url, target: '_blank' %>
<%= link_to 'Remove', document_path(document), class: 'btn btn-danger', method: :delete, data: {confirm: 'Are you sure?'} %>
</div>
<div class="media-body">
<h4 class="media-heading"><%= document.title %></h4>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>
documents_controller.rb
class DocumentsController < ApplicationController
def index
#documents = Document.order('created_at')
end
end
This isn't really a problem to be solved with Ruby. Are your thumbs a fixed width? If so, you could put them in a div of 3x{thumb width + whatever margins, padding is needed}, allowing room for only three on any line.
Or, you could use nth child selectors maybe?
Related
Thanks to the answer to my previous stackoverflow question, I was able to make the bootstrap 3 layout on my Ruby on Rails 4 app MOSTLY mobile-responsive.
However, my views/devise/sessions/new.html.erb page (aka the login page) isn't responsive. Instead, it looks like this on my iPhone 5s:
This is my new.html.erb file:
<div class="row">
<div class="col-xs-6">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "well"}) do |f| %>
<fieldset>
<legend>Log in</legend>
<%= f.input :email, label: 'Email' %>
<%= f.input :password, label: 'Password' %>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.input :remember_me, as: :boolean %>
</div>
</fieldset>
<% end -%>
<div class="actions">
<%= f.button :submit, "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6">
<center><h2>Signing in is easy and secure</h2>
<img src="http://static1.squarespace.com/static/54adc070e4b0c8f53bde4cf9/t/54ecfc98e4b0cc380c7af39a/1429903823657/?format=300w" /></center>
</div>
</div>
I added the viewport later on in an attempt to fix it, but it still didn't help.
Could the image be too large? If I have to, I can delete it, but would the gray box underneath the email and password fields still look overly skinny like that?
Here is the test deployment if you'd like to try it yourself:
https://wheels-registration-yamilethmedina.c9.io/
this was my comment suggestion and that helped to you!!!!
Just change the col-xs-6 to other class like container or container-fluid.This is because the col class divides gets the width as per the screen size . And we are forcing to make it col-xs-6 so this change happens to the screen.
I am trying to create a rails form using simple form that uses nested resources. However, I want to be able to submit multiple instances of the associated resource. Example below will probably explain it better.
<div class="tab-pane active" id="reminder">
<%= simple_form_for #collection, html: {multipart: true}, url: collection_index_path do |m| %>
<%= render partial: "collection/tabs/reminder", locals: { :m => m } %>
</div>
-inside partial
<% 9.times do |j|%>
<div class="tab-pane" id="<%= j %>">
<%= m.simple_fields_for :reminder do |p| %>
<%= p.input :heading %>
<%= p.input :message %>
<% end %>
</div>
There is a tabbed pane in which the user can click through 9 tabs to set up to 9 reminders, all should be associated with a collection (collection model accepts nested attributes for reminder). However, the way I have it setup now, the controller only gets what was set in the last reminder in the params. Anyway ideas would be appreciated.
There must be some way to distinguish tabs before submitting to controller. And i think answer might be here.
i.e. it looks like this:
<% 9.times do |j|%>
<div class="tab-pane" id="<%= j %>">
<%= m.simple_fields_for :reminders do |p| %>
<%= p.input :heading %>
<%= p.input :message %>
<% end %>
</div>
<% end %>
I am building a panel with a partial, but I'd like to customise the inside of the panel with some html. Is there any way to write some HTML for a hash value?
I have a custom partial _panel_builder.html.erb that I takes as argument pclass, heading, body, etc., that I would like to use like this :
(The below syntax is bad, but I don't really understand how I could do something nice..)
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
# For the body param, I'd like to be able to use some HTML with occasional <%=...%> for variables, like :
body: (%>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<%).html_safe,
collapsable: true %>
<% end %>
EDIT : An idea of what my _panel_builder partial looks like :
<%
collapsable ||= false
pclass ||= "default"
footer ||= false
%>
<div class="panel panel-<%= pclass %> <%= if collapsable then "panel-collapsable " end %>">
<div class="panel-heading">
<%= heading %>
<% if collapsable %>
<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<% end %>
</div>
<div class="panel-body <%= if collapsable then "collapse" end %>">
<%= body %>
</div>
<% if footer %>
<div class="panel-footer <%= if collapsable then "collapse" end %>">
<%= footer %>
</div>
<% end %>
</div>
Okay so I was actually looking for the capture helper :
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
body: capture do %>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<% end %>,
collapsible: true %>
<% end %>
Note : in some cases, I also want to pass a complex HTML block as the header of footer, so I can't just have a helper that takes a block.
Note2 : My panel is a HTML template made for generic data. I cannot pass it a Ruby object
I have been trying to make a number of lists where after clicking each list its content gets edited. I'am using twitter bootstrap, embedded HTML in this Ruby on Rails app.
<div class="list-group">
<% #statuses.each do |status| %>
<%= status.content %>
<% end %>
</div>
Here i did not get how to get these <%= link_to to get connected with each <a href="" URL's of the status.
<%= link_to 'Edit', edit_status_path(status) %>
Please help i m totally confused.
Thanks in advance.
If you want the entire status to actually be a link, like you did with a manual anchor tag in your example, then try:
<div class="list-group">
<% #statuses.each do |status| %>
<%= link_to status.content, edit_status_path(status), class: "list-group-item" %>
<% end %>
</div>
Also see http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to.
i'm in rails with bootstrap.
i have a product site with many products. i need to display my products in a grid format for the "store front". each product has a photo and some info.
i saw this post and this post but they are not what i'm looking for.
i am trying to iterate over each product using product.each while attempting to use bootstrap's grid system.
i will need to add additional products as time goes on and therefore need each product to flow from one row to the next.
i have not used any additional css styling outside of bootstrap.
as of now, i appears that each products is dropping to next row and that each product is inside it's own column, but any attempt i make to resize the image or the div or col that each product is inside, everything becomes misaligned.
here is my html.erb file:
<div class="row">
<% #products.each do |product| %>
<div class="col-md-3">
<div id="storeimages">
<%= image_tag(product.image_url, class: "img-responsive") %>
<h3><%= product.title %></h3>
<div><%= sanitize(product.description) %></div>
<div><%= number_to_currency(product.price) %></div>
<%= button_to 'Add to Cart', line_items_path(product_id: product),
class: 'btn btn-info btn-sm', remote: true %>
</div>
</div>
<% end %>
</div>
Assuming you want rows of 4 columns, you could do something like this:
<% #products.in_groups_of(4, false).each do |group| %>
<div class='row'>
<% group.each do |product| %>
<div class='col-md-3'>
<%= image_tag(product.image_url, class: "img-responsive") %>
<h3><%= product.title %></h3>
<div><%= sanitize(product.description) %></div>
<div><%= number_to_currency(product.price) %></div>
<%= button_to 'Add to Cart', line_items_path(product_id: product), class: 'btn btn-info btn-sm', remote: true %>
</div>
<% end %>
</div>
<% end %>
This splits your data set up into groups of 4 items, then outputs a row div for each group. Then within each row, it outputs each member of the group in its own column div.
The false passed in to in_groups_of ensures that you don't try to output a column for a row where there are less than 4 items. This would happen on your last row if your total number of products was not exactly divisible by 4 since by default the function will pad out the array with nil.
Thanks to #vermin for the fill_with tip!
i also added the following css.
for the div.col-md-3:
#productdescription {
height: 375px;
width: 200px;
}
and for the image:
#img {
height: 200px;
width: 180px;
overflow: hidden;
}