am on rails 5 and my categories have images. i want to use those images as backround images but when i set in the styling the url do not change
<div class="grid-category">
<% #servicescategories.each do |category| %>
<%= link_to servicecategories_path(slug: category.slug ), :style=>'background-image: asset-data-url("category.category_image");', class: "category-item" do %>
<h3> <%= category.name %></h3>
<% end %>
<% end %>
</div>
what am i doing wrong here
You need to interpolate the value of category.category_image
<%= link_to servicecategories_path(slug: category.slug ),
class: "category-item" do %>
<div style="background-image: url(<%= asset_path('category.category_image') %>)">
<h3> <%= category.name %></h3>
</div>
<% end %>
You seems to have the incorrect syntax to use the rails interpolation inside the style attribute,
Try this,
<%= link_to servicecategories_path(slug: category.slug ),
:style=>"background-image: <%= asset-data-url(category.category_image) %>",
class: "category-item" do %>
this works
<%= link_to servicecategories_path(slug: category.slug ),
class: "category-item" do %>
<div style="background-image: <%= asset_path('category.category_image') %>">
<h3> <%= category.name %></h3>
</div>
<% end %>
Related
I am following a simple process to call images from database. I will explain my process and problem so that it is easy for you to answer.
In assets/images I will save my images.
In the database I have created t.images:string and will give the image name
How to define the image_tag in the show and index pages.
What I did so far,
In show.html.erb <%= image_tag "url#{#post.image}" %>
In index.html.erb <%= image_tag post.image.url, :size => "100x100" %>
But I am getting this error
since post.image is location of your image, you don't need to add .url
see line 3 for your correction
<% #posts.each do |post| %>
<div class="well">
<%= image_tag post.image, :size => "100x100" %>
<h3><%= post.title %></h3>
<p><%= post.body %></p>
...
</div>
<% end %>
I want to make a link in my nav bar. The problem is that I want an image as the clickable link. So (click on image -> next Site)
this is the code I use now for linking with the site.
<a class="nav" <%= link_to "Home", posts_path %> </a>
You can provide a block to link_to
<%= link_to posts_path do %>
<%= image_tag "image" %>
<% end %>
<%=link_to(image_tag("the_best_image_path.jpg", class: "img_class_goes_here"), posts_path, class: "navbar-brand"%>
<a class="navbar-brand" href="/" style="float:none">
<%= image_tag "yourlogo.png", width:150 %>
</a>
If you're using Active Storage on Rails, you could do this:
Say, you have a model named Product and an attributed named image:
For the Index page
<%= link_to product do %>
<%= image_tag(product.image, class: 'product-image__img') if product.image.attached? %>
<% end %>
OR
<%= link_to(product) do %>
<%= image_tag(product.image, class: 'product-image__img') if product.image.attached? %>
<% end %>
For the Show page
<%= image_tag(#product.image, class: 'product-image__img') if #product.image.attached? %>
I'm currently trying to render a newsfeed, similar to that of FB on a Rails application I'm working on. Unfortunately, I'm not the greatest when it comes to CSS and I'm having some issues trying to display different posts. This issue occurs whether I'm using BootStrap or plain CSS. I do believe it's something to do with the loop that is created by <% #posts.each do |post| %> Currently, whenever a new post is made, it wraps inside the previous post; thus the more posts that are made, the thicker the border gets.
Image:
<% if #posts.any? %>
<% #posts.each do |post| %>
<div class="well">
<%= post.user.first_name %> <%= post.user.last_name %><br>
<% if !post.image.exists? %>
<h2> <%= post.text %> </h2>
<% else %>
<h2> <%= link_to post.text, post_path(post) %> </h2>
<%= link_to post_path(post) do %>
<p><%= image_tag post.image.url(:medium) %></p>
<% end %>
<% end %>
<% if #user %>
<% if current_user.voted_up_on?(post) %>
<%= link_to "Like", dislike_post_path(post), method: :put %>
<% else %>
<%= link_to "Like", like_post_path(post), method: :put %>
<% end %>
<% end %>
<%= "Likes: #{post.get_upvotes.size}" %>
<% if post.user == current_user %>
<%= link_to "Edit", edit_post_path(post) %>
<%= link_to "Delete", post_path(post), method: :delete %>
<% end %>
<div id='comments_div' class="comments-index">
<%= render post.comments %>
</div>
<% if current_user %>
<%= form_for [post, post.comments.new ], remote: true do |f| %>
<%= f.text_area :text, placeholder: 'Add a comment' %>
<%= f.submit 'Comment' %>
<% end %>
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
<% end %>
<% else %>
No posts have been added!
<% end %>
</div>
Any help would be greatly appreciated! Thanks.
Edit: OK, please take a look at the new image -- hopefully that will make the issue slightly more obvious. Additionally, I've removed all the dead tags and replaced them with just one: BootStrap's 'well' class. So, there you have it. All the information you need is within the code above.
from your description it sounds as though an html element is not being properly closed. Run the page source through an html validator and that could show you the problem.
If you don't want to take a structured problem solving approach, try adding another </div> to the end of your posts-index container.
Your issue is very simple, just that its not clear due to poor indendation.
A simple way to explain what you did is:
<-- if (start) -->
<-- do (start) -->
<-- post (start) -->
(post is not ending here, hence it breaks the layout)
<-- do (end) -->
<-- if (end) -->
<-- post (end) -->
Mistake in the above should be simple to understand so if you move your last </div>(of the well class) just before the second last <% end %>(of the <% #posts.each do |post| %> loop) it should fix the issue. So the last few lines should be
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
</div>
<% end %>
<% else %>
No posts have been added!
<% end %>
Sounds to me like it could be a misplaced
<% end %>
or a missing
</div>
that is causing this behavior.
Proper indentation will point to where to close off actions or divs
I have a form called cattle finances, in this form, i use collection select to input the batch number, i have other form columns shown in the _form.html.erb code below
<%= simple_form_for #cattle_finance, remote: true do |f| %>
<% if #cattle_finance.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#cattle_finance.errors.count, "error") %> prohibited this cattle_finance from being saved:</h2>
<ul>
<% #cattle_finance.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<br>
<%= f.collection_select :batch_number, CattleList.all, :batch_number, :batch_number, :prompt => "please select Batch Number" %></br>
<%= f.input :total_litres_of_batch, as: :integer %>
<%= f.input :total_income, as: :integer %>
<%= f.input :gross_income, as: :integer %>
<%= f.input :total_expenses, as: :integer %>
<%= f.input :net_income, as: :integer %>
<%= f.input :date, as: :date %>
<%= f.button :submit %>
<% end %>
My index.html.erb code is
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2>Cattle Finances</h2>
</div>
<div class"btn-group menu2" align = right>
<%= link_to raw("<span class=''></span> Creditors"), cattle_creditors_path, :class=>"btn btn-default" %>
<%= link_to raw("<span class=''></span> Debtors"), cattle_debtors_path, :class=>"btn btn-default" %>
<%= link_to raw("<span class=''></span> Cattle"), cattles_path, :class=>"btn btn-default" %>
<%= link_to "Home", root_path, :class=>"btn btn-default" unless current_page?(root_url) %>
</div>
<div class="col-md-2 col-md-offset-4">
<%= link_to new_cattle_finance_path, remote: true do %>
<button class="btn btn-default">New</button>
<% end %>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2" id="cattle_finance-form" style="display:none;"></div>
</div>
<div class="row">
<div class="" id="cattle_finances"><%= render #cattle_finances %></div>
</div>
So what is need help with is the way in which i can select a particular batch_number and automatically all other fields are populated, or picked from the database from the corresponding database tables and filled in respectively. Any help his highly appreciated coz am stuck, although
i know what i want to do, I have no idea of how i can start.
I'm trying to re-write the code below so that it will use an image_tag. I know how to apply a class attribute, but how do I apply a custom attribute like "data-dark-logo"?
I'm learning how to develop and am building an application that has the following HTML:
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="external_assets/images/logo-dark.png">
<img src="external_assets/images/logo.png" alt="Canvas Logo">
</a>
<a href="index.html" class="retina-logo" data-dark-logo="external_assets/images/logo-dark#2x.png">
<img src="external_assets/images/logo#2x.png" alt="Canvas Logo">
</a>
</div>
I'm trying to rewrite this so it will function in my Rails app.
Just pass the data attributes as a hash.
<%= link_to '/link', class: 'standard-logo', data: {'dark-logo' => 'external_assets/....' do %>
<%= image_tag ('external_assets/...') %>
<% end %>
Like this?
<div id="logo">
<%= link_to("index.html", class: "standard-logo", data-dark-logo: "external_assets/images/logo-dark.png") do %>
<%= image_tag("external_assets/images/logo.png", alt: "Canvas Logo") %>
<% end %>
<%= link_to("index.html", class: "retina-logo", data-dark-logo: "external_assets/images/logo-dark#2x.png") do %>
<%= image_tag("external_assets/images/logo#2x.png", alt: "Canvas Logo") %>
<% end %>
</div>
Edit:
To make the data-dark-logo pull your asset from the asset pipeline, try using the asset_path helper:
<%= link_to("index.html", class: "standard-logo", data-dark-logo: asset_path("external_assets/images/logo-dark.png")) do %>
The solution I came up with looks like this:
<div id="logo">
<%= link_to welcome_index_path, class: 'standard-logo', data: {'dark-logo' => asset_path("front/logo-dark.png") } do %>
<%= image_tag("front/logo.png") %>
<% end %>
<%= link_to welcome_index_path, class: 'retina-logo', data: {'dark-logo' => asset_path("front/logo-dark#2x.png") } do %>
<%= image_tag("front/logo#2x.png") %>
<% end %>
</div>
But I'm not sure if this complies with Rails best practices