So, I'm trying to figure out a solution for Bootstrap 3's carousel in Rails 4.
I've got this:
<li> <a id="carousel-selector-0" class="selected">
<%= image_tag #gallery.images[0].photo.url(:thumb), class: 'img-responsive' %>
</a></li>
<li> <a id="carousel-selector-1">
<%= image_tag #gallery.images[1].photo.url(:thumb), class: 'img-responsive' %>
</a></li>
...etc...
I'm looking for an each type method that would account for a variable number of images in a gallery.
Something where the first photo looks like this:
<li> <a id="carousel-selector-0" class="selected">
<%= image_tag #gallery.images[0].photo.url(:thumb), class: 'img-responsive' %>
</a></li>
And those after it look like:
<li> <a id="carousel-selector-1">
<%= image_tag #gallery.images[1].photo.url(:thumb), class: 'img-responsive' %>
</a></li>
.......
With each number increasing by one for each photo of course.
Thanks for the help!
SOLUTION
Thank you kindly creativereason!
Heres what worked:
<% #gallery.images.each_with_index do |image, index| %>
<li> <a id="carousel-selector-<%=index%>" class="<%= 'selected' if index == 0%>">
<%= image_tag image.photo.url(:thumb), class: 'img-responsive' %>
</a></li>
<% end%>
And if anyone is searching for a solution for .carousel-inner div (pretty much the same):
<div class="carousel-inner">
<% #gallery.images.each_with_index do |image, index| %>
<div class="item <%= 'active' if index == 0%>" data-slide-number="<%= index %>">
<%= image_tag image.photo.url(:large), class: 'img-responsive' %>
</div>
<% end%>
</div>
Something like this should work:
<% #gallery.images.each_with_index do |image, index| %>
<li> <a id="carousel-selector-<%=index%>" class="<%='selected' if index == 0%>">
<%= image_tag image.photo.url(:thumb), class: 'img-responsive' %>
</a></li>
<% end%>
Revised: because I didn't notice the selected difference in the li tag. Now I'm using each_with_index
Related
I have been working to follow the best practices in Rails in order to save time in the future.
I am displaying all terms in a view which has more than 0 results.
<% #terms.each do |t| %>
<li class="media">
<div class="media-body">
<div class="media-heading text-semibold"><%= link_to "#{t.name}", authenticated_root_path %></div>
<span class="text-muted"><%= link_to 'Settings', edit_account_term_path(#account, t) %></span>
</div>
</li>
<% end %>
What is the best way to display a different view if the term count is zero? I could do something like a simple if statement in the view doing a count but that seems cluttered. Any suggestions?
How about this:
<% #terms.each do |t| %>
<li class="media">
<div class="media-body">
<div class="media-heading text-semibold"><%= link_to "#{t.name}", authenticated_root_path %></div>
<span class="text-muted"><%= link_to 'Settings', edit_account_term_path(#account, t) %></span>
</div>
</li>
<% end.empty? and begin %>
<li class="media">
<!-- nothing to see -->
</li>
<% end %>
You can also move the code to a partial.
<%= render(:partial => 'terms', :collection => #terms) || 'There are no terms' %>
The partial:
<li class="media">
<div class="media-body">
<div class="media-heading text-semibold"><%= link_to "#{term.name}", authenticated_root_path %></div>
<span class="text-muted"><%= link_to 'Settings', edit_account_term_path(#account, term) %></span>
</div>
</li>
</li>
In my view I do this:
<ul class="list-group">
<%= JSON.parse(current_printer.stripe_managed_account.fields_needed).each do |f| %>
<li class="list-group-item">
<%= f.gsub!(/[._]/, ' ') %>
</li>
<% end %>
</ul>
It lists everything out like it should, but then at the end it returns the value of current_printer.stripe_managed_account.fields_needed. I'm not sure why it does this, or how to prevent it from doing this.
This is a screenshot:
Replace <%= %>, on your each line by <% %>.
Because <%= #your each %> is same that : <% puts #your each %>.
Try this:
<ul class="list-group">
<% JSON.parse(current_printer.stripe_managed_account.fields_needed).each do |f| %>
<li class="list-group-item">
<%= f.gsub!(/[._]/, ' ') %>
</li>
<% end %>
</ul>
Thanks #vee
This is the HTML I am trying to replicate:
<div id="links">
<a href="images/banana.jpg" title="Banana" data-gallery>
<img src="images/thumbnails/banana.jpg" alt="Banana">
</a>
</div>
I'm not sure how to do the data-gallery bit. How would I write such a thing with ERB?
Here's what I have so far:
<div id="links">
<% for photo in #photos %>
<%= link_to (image_tag photo.image.url(:medium))%>
<% end %>
</div>
<div id="links">
<% #photos.each do |photo| %>
<%= link_to (image_tag photo.image.url(:medium)), 'data-gallery' => true%>
<% end %>
</div>
Notice the more Rubyish way of iterating through an array of objects with each.
Add "data_gallery" => "value" to your link_to in HTML block.
How can I take this..
<li>
<%= link_to image_tag(product.photo.url(:small)), product_path(product.id, :forum_id => params[:forum_id]) %>
<% if params[:forum_id] %>
<%= link_to "Add", addtoforum_user_path(:products => [product.id],:forum_id => params[:forum_id], tp: "add") %>
</li>
to be like this.. (right now it is only inlcluding the image)
<li>
<a href="">
<figure>
<img src="image-url....">
</figure>
<span>product name</span>
</a>
</li>
Thanks
Not sure I understand the question but I guess the issue is to output the figure, img tags etc inside the a tag?
This can be achieved by passing a block to the link_to method, like this:
<li>
<%= link_to product_path(product.id, :forum_id => params[:forum_id]) do %>
<figure>
<%= image_tag(product.photo.url(:small)) %>
</figure>
<span><%= product.name %></span>
<% end %>
</li>
Basically my controller is just grabbing all members: #members = Member.all and Im looping through them while checking to see if they have a profile picture uploaded and if not then the default should be loaded:
<% #members.each do |member| %>
<% unless member.image.nil? %>
<li style="float:left; width:100px;">
<%= image_tag(member.image.url(:tiny)) %>
<%= link_to member.email, member_path(member) %>
</li>
<% else %>
<li style="float:left; width:100px;">
<%= image_tag("default_member_small.jpg") %>
<%= link_to member.email, member_path(member) %>
</li>
<% end %>
<% end %>
It seems to think every member has a profile image, and the image tag is calling "images/tiny/missing.png" for the missing images.
What gives?
I am guessing you are using paperclip, if you are, you should not use nil?, you should use present?:
<% #members.each do |member| %>
<% if member.image.present? %>
<li style="float:left; width:100px;">
<%= image_tag(member.image.url(:tiny)) %>
<%= link_to member.email, member_path(member) %>
</li>
<% else %>
<li style="float:left; width:100px;">
<%= image_tag("default_member_small.jpg") %>
<%= link_to member.email, member_path(member) %>
</li>
<% end %>
<% end %>
And instead of having an if you should just have this image named as paperclip expects it, there should not have any ifs in your code for this kind of handling.