So I recently started using Zurb Foundation, and following this documentation.
I have the following code which are links to all the designs in the database.
<div>
<div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div>
<% #designs.each do |design| %>
<div><%= link_to design.title, design_path(design) %></div>
<% end %>
</div>
I wanted help on creating thumbnails for each link. Just to get the gist of it, I wanted to use the same picture for all thumbnails. I used a.th class to wrap the image but I wanted to learn how to display more than one (typically 3) thumbnails on each row.
So lets say there are 9 designs in total, I wanted 3 rows of 3 thumbnails each. I wasn't able to find many tutorials/explanations for this so any tips would be helpful to understand how it works.
Check out Foundation's block grid: http://foundation.zurb.com/docs/components/block-grid.html.
I think it does just what you're after. To get a 3 by 3 thumbnail grid would look something like:
<div>
<div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div>
<div class="row">
<ul class="small-block-grid-3">
<% #designs.each do |design| %>
<li><%= link_to design.title, design_path(design), class: "th" %></li>
<% end %>
</ul>
</div>
</div>
Related
I was using the Bootstrap cards for my index page for my app but wasn't really liking the event details button, I feel it's more modern to just click on the image.
I found SOF articles pointing to how to use clickable images if the image was local and/or hosted somewhere online, but nothing that pointed to using images that are already a part of your database.
The code I had before was:
<% if artist.avatar.attached? %>
<%= image_tag artist.avatar, class: "even-size-artist" %>
<% else %>
<img src=<%= "https://dancewise.s3.amazonaws.com/misc-images/Blank+Avatar.png" %> class="even-size-artist">
<% end %>
The code that I found that will give you the option to have the top image clickable to the appropriate record is as follows:
<% if artist.avatar.attached? %>
<%= link_to image_tag(artist.avatar, class: "card-img-top artist-img").html_safe, artist %>
<% else %>
<img src=<%= "https://dancewise.s3.amazonaws.com/misc-images/Blank+Avatar.png" %> class="card-img-top artist-img">
<% end %>
Hopefully, this helps someone else out there learning RoR!
I am building a website for a music database.
I would like to display categories like classical and hip hop first; when the user clicks on a category, I would like to display all the tracks names in that category (I would like to do this without a page refresh). I would also need to support pagination of this list displaying 10 items in one page (and I need to display buttons for display, edit, delete alongside each track in this list)
How can I accomplish this? Does bootstrap provide components that support this kind of implementation?
(If I could do this with a page refresh, I have done this before and I would know how to do it. But I am not sure how to do this without a page refresh)
On views/categories/index.html.erb:
<% #categories.each do |category| %>
<%= link_to category_path(category), :remote => true do %>
<%= category.name %>
<% end %>
<div class="category_<%= category.id %>">
</div>
<% end %>
Then create a partial views/categories/_show.html.erb (here you can insert a table or a structure with bootstrap row and columns):
<% #category.tracks.each do |track| %>
<%= track.name %>
... and you can add here delete and edit actions
<% end %>
Then create views/categories/show.js.erb:
$(".category_<%= #category.id %>").html("<%= escape_javascript(render("show")) %>");
Fyi what you are trying to do has nothing to do with bootstrap, unless you wanted for instance display tracks on a bootstrap modal.
Here is a poor man's bootstrap example I whipped up: when you click on the Track Category example, the table should expand. (You must have bootstrap v4 set up for this to work) and you must have a track_table partial as well - you can use the same partial for the two different tables that you want:
<div class="track-group">
<div class="track track-default">
<div class="track-heading">
<h4 class="track-title">
<p data-toggle="collapse" href="#collapse1"> Track Category (Click to Expand)</p>
</h4>
</div>
<div id="collapse1" class="track-collapse collapse">
<div class="track-body">
<%= render 'track-table' %>
</div>
<div class="track-footer">
</div>
</div>
</div>
</div>
Here's how it looks with an existing app on my computer:
I have a multiple upload images, using carrier wave, on my application and with the help of you guys, in another question, I was able to display all the images with a each method. It works very well but I would like to improve it. I want to do a image gallery with a carousel and when the user click at it opens a modal with the image bigger.
I try to do following the tutorial of W3C School but just doesn't work.
When I try to put the Onclick method the page doesn't render.
https://www.w3schools.com/howto/howto_js_lightbox.asp
There is any gem that help me do this? There is any tutorial for a rails application?
I am displaying the images with the following code:
<% #imovel.imagens.each do |imagem| %>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<%= image_tag(imagem.url) if #imovel.imagens? %>
</div>
</div>
<% end %>
You will use link_to to create the a tag with a block. The arguments are:
link_to(url, html_options = {})
Inside the block, you will put the html code inside the a tag (your image).
<% #imovel.imagens.each do |imagem| %>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<%= link_to imagem.url, class: 'your-css-class', 'data-toggle': 'lightbox', 'data-gallery': 'name-of-gallery' do %>
<%= image_tag(imagem.url) %>
<% end if #imovel.imagens? %>
</div>
</div>
<% end %>
I'm running Rails v4.x and Ruby v2.3. I'd like to use a debugging tool (e.g., debugger) to dynamically test different execution paths in a Rails view. Specifically I'm trying to test the two paths of an if statement (ie., "if" block and "else" block) within a Rails view. Here is the code withing the View I'd like to test:
<% if #categories.any? %>
<% #categories.each do |category| %>
<ul class="listing">
<div class="row">
<div class="well col-md-4 col-md-offset-4">
<li class="article-title">
<%= link_to "#{category.name}", category_path(category) %>
<li><small><%= pluralize(category.articles.count, "article") %></small></li>
</li>
</div>
</div>
</ul>
<% end %>
<% else %>
<div class="center">
<p>There are no categories currently defined at this time</p>
</div>
<% end %>
To do this I'd like to be able to dynamically change the return value of the #categories.any? method so as to force the desired execution path. Is there a tool that I could use to do this? Can I do with "debugger"? Pry?. If so could you provide some simple instructions of how it could be done?
NOTE: #categories is an instant variable containing values from a data model (Category). I'd prefer not delete the contents of the Category table just to test the else part of the aforementioned code.
Regards,
Jet
Well, as you will have to edit the file anyway, to add a debugger line, you can just as well add another variable, can't you?
<% if (#categories.any? && !#never_run) || #always_run %>
REST noob here:
I'm using the code from ryan bates rails cast #241
http://railscasts.com/episodes/241-simple-omniauth
I can authenticate with my user just fine....
Now I want to display the last tweet I made on the views/articles/index.html.erb page....
I want to just want to display the data from this REST api thing..."https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline"
How do I change this code in the most simplest way?
<% title "Articles" %>
<div id="articles">
<!-- TODO grab my tweets with GET Statuses/home_timeline -->
<% for article in #articles %>
<h2>
<%= link_to article.name, article %>
<span class="comments">(<%= pluralize(article.comments.size, 'comment') %>)</span>
</h2>
<div class="created_at">on <%= article.created_at.strftime('%b %d, %Y') %></div>
<div class="content"><%= simple_format(article.content) %></div>
<% end %>
</div>
<p><%= link_to "New Article", new_article_path %></p>
Thank you for help.
You should take a loot at twitter gem: http://sferik.github.com/twitter/
You can grab a user's timeline like: timeline = Twitter.user_timeline( twitter_username )