I want to take from the user an image URL and on submit display a thumbnail of that image in the same page
Here is how i take the URL from the user
<%= form_for([#project, #project.uploads.build]) do |f| %>
<div class="field">
<%= f.label :url %><br />
<%= f.text_field :url %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
then i display the URL in the same page
<p>
<%= upload.url %> |
<%= link_to 'Delete', [upload.project, upload],
:confirm => 'Are you sure?',
:method => :delete %>
</p>
But instead i want to display a thumbnail..How can I do that?
image_tag is the Rails method you're looking for. (http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag). Just use the uploaded URL as the source. Then, use either the :size option, or set a class on your image tag and handle resizing it through CSS.
That method will of course not resize the actual image, and the user's browser will pull-down the larger file and then resize it in the browser. It consumes the same amount of bandwidth as the full-size version, because it is the full-size version.
To do post-processing on the image and actually resize it (a real thumbnail), I recommend the CarrierWave Gem (https://github.com/jnicklas/carrierwave). It's documentation is pretty good, so I won't dive into how to use it here.
Related
I have the following in my html.erb file:
<%= image_tag "logo.jpg", :class => "img-responsive", :href =>"http://www.google.com" %>
However, this is not a clickable link. I assumed the :href = > would make it so. Does anyone have any ideas of making your rails image a clickable link? I tried the following logic which I found on another Stack Overflow Post:
<%= link_to image_tag("logo.jpg", :class => "img-responsive"), "http://wwww.google.com" %>
But this makes the image smaller and adds an odd half circle at the bottom of the image. I also cannot add :style or :class working properly.
Anyone have any ideas?
Not sure if this is the best way, but you could just wrap the image tag with regular anchor tags:
<a href="http://www.google.com">
<%= image_tag "logo.jpg", :class => "img-responsive" %>
</a>
The second way is technically the right way to do it, however since its giving you issues could always try this:
<%= link_to 'http://google.com' do %>
<%= image_tag 'logo.jpg', class: 'img-responsive' %>
<% end %>
As for the class/style not adding properly I've always done it as
class: 'this-is-a-class'
and
style: 'padding-left:30px;'
I have a new.html.erb and a _form.html.erb
How do you align a button and a link if the back link is in the new.html.erb file while, a submit button would be in the _form.html.erb?
new.html.erb
<%= render 'form' %>
<%= link_to 'Back', project_path %>
_form.html.erb
<%= simple_form_for(#trip) do |f| %>
<%= f.input :project_name, class: 'form-control' %>
<div class="top-buffer">
<%= f.button :submit, class: "btn btn-primary pull-right" %>
</div>
<% end %>
Is there a rails way to align the back and the button together? What would be the conventional way?
Should I just simply put the back button in the _form.html.erb? Will this affect anything in the long run?
_form.html.erb is what is called a partial. Partials allow you to remove unnecessary duplication of code. They help breaking the rendering process into more manageable chunks without changing functionality.
To answer all of your questions, ask yourself why you are using a partial. If this is to remove duplication then go ahead and move the back button inside _form.html.erb.
Now, if you could provide some css we could actually help you to center those buttons.
UPDATE
I have just realised you are using bootstrap. In this case try updating your link to this...
<%= link_to 'Back', project_path, class: "btn btn-primary pull-left" %>
and see if it solves your problem.
This is what I got ...
... and it seems more or less aligned to me.
I'm building a Rails app. How can I build a search bar that contains the search button inside it? An example would be the Stackoverflow search bar at the top of the page. Here's my search bar so far:
<div id= "searchbar">
<%= form_tag things_path, :method => :get do %>
<p>
<%= text_field_tag :search, params[:search] %>
<button class="btn" type="submit"><i class="thing-search">Go</i></button>
<%#<div="Go"><%= submit_tag "Go", :name => nil </div> %>
</p>
<% end %>
</div>
You might want to take a loot at Bootstrap Button Groups. They're essentially exactly what you're looking for and rolling bootstrap into a rails app is fairly simple. At the very least it will give you a good design to work off of.
I'm currently developing a web app and I have a slight problem. I have a redirect_to root_path statement in my view's controller that is called if a logic statement returns true. On the page being redirected to, I have a stylesheet_link_tag in the layout view. When I pull up the page manually, this tag loads correctly. However, after the redirect_to statement is used and this page is loaded from it, the stylesheet tag is no longer there. It still loads the application.css file and my application.js file without anyone issues but the pagename.css link tag doesn't even show up.
And here's how the page displays:
Then once I refresh:
PLEASE help me! I would love to know why this is happening and how to fix it. Thank you in advance!
Here are all of the relative code bits:
users_controller.rb
...
def logout
cookies[:logged_in] = false
cookies[:user_id] = 0
redirect_to root_path # Tried using root_url also; didn't fix the problem.
end
...
homepage/index.html.erb (root_path)
A bunch of HTML. Not the problem.
layouts/homepage.html.erb
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'homepage' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="header_container">
<%= link_to "#{image_tag 'logo.png'}".html_safe, root_path %>
<div class="login tab">
<span>
Login
<%= image_tag "down_arrow.png" %>
</span>
<%= form_tag login_path, :method => 'post' do %>
<% end %>
</div>
<div class="register tab">
<span>
<%= link_to "Register", register_path, "data-ajax" => "false", :rel => false %>
</span>
</div>
</div>
<div id="main_container">
<%= yield %>
</div>
</body>
</html>
I had to add the homepage.css asset to config/locales/application.rb, so here's that:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
Bundler.require(*Rails.groups)
module Labs
class Application < Rails::Application
config.assets.precompile += %w( homepage.css )
config.assets.precompile += %w( dropdown.js )
end
end
The problem can be two-fold:
--
Turbolinks
Firstly, you may have an issue with Turbolinks
Turbolinks is notorious for preventing styling & javascript changes on pages; as it basically just refreshes the <body> tag of your page (keeping the <head> intact). Although this is mainly for if you're traversing pages through link clicks (I'm not sure about redirects), you basically need to make sure any styling changes can occur even with Turbolinks enabled.
To do this, you need to ensure you're loading without calling Turbolinks. To do this, you should use the data no-turbolink tag, as follows:
<%= link_to "link", link_path, data: { no_turbolink: true } %>
This will ensure you don't call turbolinks when you click that particular link, ensuring a "naked" refresh if you will.
--
Redirect
The redirect method might be the cause of the issue you're facing.
When you mentioned:
The redirect_to statement is used and this page is loaded from it, the stylesheet tag is no longer there. It still loads the application.css file and my application.js file without anyone issues but the pagename.css link tag doesn't even show up.
The way to fix this is to ensure your layout includes the correct stylesheets. You've included your homepage.html.erb code - I would be eager to say that if pagename.css isn't loading, it basically means you're not calling the file correctly.
I would do this:
<%= stylesheet_link_tag controller_name %>
This will allow you call stylesheets per controller (using the controller_name helper method) - allowing you much broader control of what you're loading on the page
I have a simple eRubis (*.html.erb) document, and want to "copy" various elements throughout a page. Whenever I use simple Ruby statements like this:
<%= 3.times do %> ... <% end %> with multiple "times" statements within that to copy more elements returns either errors or horribly rendered elements. What is the best way to "copy" multiple elements throughout a eRubis page using Ruby statements?
One approach I use in RoR is content_for and yield. I store my element(s) in a content_for and then I litter yields around wherever I want that element:
<% content_for :some_elements do %>
<divs or whatever />
<and maybe some things too />
<%= even some more erb %>
<% end %>
<%= yield :some_elements %>
<%= yield :some_elements %>
<%= yield :some_elements %>
Those yields can go anywhere, you could even have the content_for in your layout file and put those yields in any view or partial as many times as you want.
If you want to simply mock up a list or something, times works perfectly well if you use it correctly:
<ul>
<% 10.times do |i| %>
<li id="item_#{i}">
content in item <%= i %>
</li>
<% end %>
</ul>
But of course the times approach requires that all the elements be in the same spot. That's the advantage of the content_for/yield way, you can place the yields where ever you want. You can even put a yield inside a times:
<% 10.times do |i| %>
<%= yield :some_elements %>
<% end %>
But that's just crazy. Anyway, have fun.