So in html you can have the code <img class="myimage" src="image.jpg"> which makes editing in .css easier.
What is the equivalent of this when working with a .html.erb file?
e.g where do I define the class in this <%= image_tag "image.jpg" %>?
You can still use the native HTML in a .html.erb file, exactly as you've shown. This definitely works in the ERB template:
<img class="myimage" src="image.jpg">
This will often render slightly faster than using a dynamic approach, and has the benefit of being exactly what you intend.
If you choose the dynamic tag option, you can refer to the ActionView::Helpers::AssetTagHelper reference. To get the Rails (ActionView) equivalent to what you've shown, you can use this syntax:
<%= image_tag 'image.jpg', class: 'myimage' %>
Note that the portion with the class: 'myimage' is providing the class attribute as a hash value, and this is simply shortcut syntax for { class: 'myimage' }.
You can also provide an ID to distinguish this image from other images of the same class by providing the id option, like so:
<%= image_tag 'image.jpg', class: 'myimage', id: 'image-1' %>
This will generate the following HTML:
<img src="image.jpg" class="myimage" id="image-1">
From that point, you can style the image-1 image independently of other myimage images, should you need to do so.
you can use this syntax;
<%= image_tag('foo.jpg', class: 'myimage') %>
it will work for you!
I think comma will help, so:
<%= image_tag 'foo.jpg', class: 'bar' %>
Related
I am attempting to create an application.html.erb file that holds a background that will be displayed on all of my pages.
Using the w3school's guide, I put the filename of the background (which is in the same folder as application.html.erb) in the body tag and it does not change anything.
<body background='bk.jpg'>
The content goes here
</body>
Any help solving this issue would be greatly appreciated.
For a Rails project, the best approach is to use image_path.
In your case, something like the following should work:
<%= image_path 'path_to_your_image/bk.jpg' %>
However, the correct way to do this is to store the image in the projects app/assets/images folder, and the asset path will look for this there. Then, you just need to update the helper to:
<%= image_path 'bk.jpg' %>
So:
<body background=<%= image_path 'bk.jpg' %>>
# Might need quotes around this: <%= image_path 'bk.jpg' %>, haven't been able to test
Or, better:
<%= content_tag :body, style: { background: image_path('bk.jpg') } do %>
Your content
<% end %>
Better still would be to have the css background set in the CSS rather than inline, though that's perhaps another question.
I have this code for displaying comments on an article which uses ERB elements to fetch and display information from a database:
<div class="comments">
<h4 class="comment_author">Comment by <%= comment.author_name %></h4>
<p class="comment"><%= comment.body %></p>
</div>
I would like to format the comment.author_name differently, so I wanted to include an id on the second line e.g.
<h4 class="comment_author">Comment by <%= comment.author_name, id: "commenter" %></h4>
However, when I do this I get the following error message.
I have added classes and ids in the past to form elements with the
:class => "name" syntax like so:
<%= f.submit 'Create Article', :class => 'create_new_article_button'%>
But that doesn't seem to be working here either. Is there a different way to add ids and classes to non-form ERB elements?
Thanks in advance!
<%= comment.author_name %> is not a tag/element, its just a value(string i assume) & hence you cannot add an id attribute to it. You could instead do
<h4 class="comment_author">Comment by
<span id="commenter"><%= comment.author_name %></span>
</h4>
Or give the id="commenter" directly to the <h4> tag & use that to target the span.
It worked earlier because f.submit refers to a submit button of a form, meaning it was actually an HTML element & hence you could add an id or a class to it.
You can not add an ID to a content. Instead you should add ID to the element which is wrapping your content. In your case it should be like this
<h4 class="comment_author" id='commenter'>Comment by <%= comment.author_name %></h4>
This will create h4 element with an ID 'commenter'.
You are confusing here
I have added classes and ids in the past to form elements with the
:class => "name" syntax like so:
<%= f.submit 'Create Article', :class => 'create_new_article_button'%>
But that doesn't seem to be working here either.
Form elements will receive class has one of it's arguments. Check the docs here . But <%= %> will just display the end result of ruby code in the views, but it won't add any html content to the DOM. Please read docs carefully before implementing something.
Inside my rails project:
if i use the image_tag
<%=image_tag 'sqlite.png'%>
the image shows up, if however, i use the raw html img tag like so:
<img src="/assets/images/sqlite.png">
I also tried
<img src="/images/sqlite.png">
I still get the 404 - not found error. How do I use raw html image tags inside rails ?
For my specific use case, I need to use html img tag . Help!
Be sure you add your images in app/assets/images/ and your code <%= image_tag 'sqlite.png' %> should be fine.
Your images:
app/assets/images/sqlite.png
In your code:
<%= image_tag 'sqlite.png' %>
HTML:
<img src="/assets/sqlite.png" >
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html
I have been trying to find something about embedding HTML code inside a partial argument for days but I have not found anything so I'm guessing it isn't possible. But it seems like it should be.
I have a static page in my Rails app which has a lot of sections and each section can have subsections. I could just make the entire page just plain HTML. But I didn't want to repeat the same formatting over and over in case I want to change classes or something else.
So I have the following _section.html.erb partial file:
<div class="row">
<h4><%= heading %></h4>
<% subsections.each do |section| %>
<% if section[:header] %>
<h5 class="primary-text"><%= section[:header] %></h5>
<% end %>
<p><%= section[:body] %>
<% end %>
</div>
That works fine. But what if I want to include a link to a page or an email inside one of the subsections? It doesn't work just by passing it in as part of the quotes text. It shows the actual HTML tags.
Is there a real way to do this or should I give up and just write plain HTML with repeated section formatting?
You mark your text as html_safe. For example:
<%= section[:header].html_safe %>
But I would suggest using sanitize method because of security resonons:
<%= sanitize section[:header] %>
Probably sometimes you will want to configure sanitize method. Here you can read how to do this:
http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html
You can read more about security here:
http://guides.rubyonrails.org/security.html#cross-site-scripting-xss
#post.body has following content (which is converted from Markdown by using RDiscount).How should I render it to the user in what it means? i.e I want to render it as strong text emphasized text...
<p><strong>strong text</strong> </p> <p><em>emphasized text</em> </p> <blockquote> <p>this is a quote</p> </blockquote><p><img src="http://www.picturehouse.com/titles/images/rock.jpg" alt="alt text" title="" /> </p>
Using <%= #post.body => will only display it as the text shown above.
Assuming Rails 3, use the raw helper method e.g.
<%= raw(#post.body) %>
Escaping HTML output is on by default in all view templates (in contrast to earlier versions where you had to use the h method to escape strings individually.)
Are you using rails 3? It automatically escapes all contents of <%= %> tags. To avoid it, do
<%= raw(#post.body) %>
I take it you're in Rails 3? One big change is that displayed text used to be raw by default, and you had to sanitize it yourself. Now it's the other way around. Call it like this:
<%= raw(#post.body) %>
And you'll get what you're looking for.
Quick, Easy, & to the Point
<%== #post.body %>
More Information
<%== #post.body ==> is an alias to <%= raw(#post.body) ==>
https://edgeguides.rubyonrails.org/active_support_core_extensions.html#output-safety