I have the following code for showing the header image in my index.html.erb for my articles:
<% #articles.each do |article| %>
<% if article.public? %>
<%= link_to article_path(article), class: 'text-decoration-none' do %>
<div class="card mt-3 post-card">
<div class="card-body">
<div class="row">
<div class="col-md-2">
<% if article.header_image.present? %>
<div class="header-img"
style="background-image: url(<%= url_for(article.header_image) %>);">
</div>
<% end %>
</div>
<div class="col-md-10">
<h5 class='card-title mb-1 text-dark'><%= article.title %></h5>
<p class='text-secondary mb-0'><%= article.body %> </p>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
I am following the tutorial by Techmaker Studio, and the desired output is at this timestamp: https://youtu.be/MCEzxY9BbiU?t=5059
The code is correct because I inspected and see the example image (the ruby icon) shows up in the inspector but not in the background image.
inspect screenshot proves url is working
The one difference between my project and the tutorial I am following is that I am using Rails 7 and importmaps. Does anyone have an idea why it isn't showing up? when I use image_tag, it works but not with the background-image style I desire.
Related
could someone explain me what should I do to fix this? I put this on post.rb
has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" }
validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
then in my index.html.erb i got this
<div class="row">
<% #posts.each do |post| %>
<div class="col-md-4">
<div class="card mb-4 shadow-sm ">
<img class="bd-placeholder-img card-img-top img-fluid " ><%= image_tag post.image.url(:medium) %></img>
<div class="card-body">
<p class="card-text"><h3><%= post.title %> </h3> <%= post.body %></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<%= link_to "View", post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
<%= link_to "Edit", edit_post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<% end %>
</div>
When I upload diffrent images then it doesn't resize it properly: look at this: https://iv.pl/image/resize-ruby.Gt21xMz
I use paperclip and Magick to upload images.
I checked through the docs for Paperclip, and it appears that 300x300> and 100x100> are directives passed to ImageMagick.
https://www.imagemagick.org/script/command-line-processing.php#geometry says that 300x300> will shrink the image so that it fits within 300x300. That means if you have a picture that's 500x300, it'll shrink down to 300x180.
{ medium: "300x300>", thumb: "100x100>" } looks like the line of code to modify, to change your resizing.
The picture that renders correctly is probably close to square in its original form. The picture that does not is probably a wide rectangle.
I trying to move pagination to footer on my website.
I don't want to ready solution, I would like to make this alone, but I do not know where to start, how can a real programmer handle this?
*I finished this site lately from book, and now i trying to do something alone.
code:
<div id="pins" class="transitions-enabled">
<% #pins.each do |pin| %>
<div class="box">
<div class="panel panel-default">
<%= link_to image_tag(pin.image.url(:medium)), pin %><br/>
<div class="panel-body">
<%= pin.description %><br/>
<br/>
<strong><%= pin.user.name if pin.user %></strong><br/>
</div>
<% if pin.user == current_user %>
<div class="panel-footer">
<%= link_to 'Edit', edit_pin_path(pin) %><br/>
<%= link_to 'Delete', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
<br/>
<div class="center">
<%= will_paginate #posts, renderer: BootstrapPagination::Rails %>
</div>
screen:
You havent showed your containers. If you pass all content in order and into containers:
<div class="container">
<div class="row">
<div class="col-md-12">
Stff..
</end>
</end>
</end>
All should be fine. As a fast fix try to:
<div class="center col-md-12">
<%= will_paginate #posts, renderer: BootstrapPagination::Rails %>
</div>
But this just a fast fix, not solution...
And your code is a bit messy, and you have one closing div, but havent showed where it was opened
I have a page with bootstrap div's and 2 images and buttons on the page. In full screen, the page works fine. But when I resize the page only one of the images and 1 of the 2 buttons work. The images are side by side in full screen but when they resize one is on top of the other ant the top button and image cannot be pressed. Here is the view.
<div class="jumbotron">
<div class="center-block">
<img src="https://s3.amazonaws.../Frontpage_logo.png" class="img-responsive" alt="...">
</div>
<div class="text-center">
<br/>
<br/>
<% if user_signed_in? %>
<%= link_to 'Your Dashboard', users_dashboard_url, class: 'btn btn-primary' %>
<% elsif manager_signed_in? %>
<%= link_to "Your Dashboard", managers_dashboard_url, class: 'btn btn-primary' %>
<% elsif admin_signed_in? %>
<%= link_to "3rd Party/Supplier Dashboard", admins_dashboard_url, class: 'btn btn-primary' %>
<br/>
<br/>
<%= link_to 'Monitoring', sidekiq_web_path %>
<% else %>
<div class="container-fluid">
<div class="col-md-5">
<div class= "pull-left">
<h3><strong>See how we ...!</strong></h3>
<img src="https://s3.amazonaws.../manager_video.jpg" class="img-responsive">
<br>
<%= link_to "Manager", managers_why_url, class: 'btn btn-primary' %>
</div>
</div>
<div class="col-md-2">
<div class="text-center">
<h2>or</h2>
</div>
</div>
<div class="col-md-5">
<div class= "pull-right">
<h3><strong>See how we are helping ...!</strong></h3>
<img src="https://s3.amazonaws.../user_video.jpg" class="img-responsive">
<br>
<%= link_to "Tenant", users_why_url, class: 'btn btn-primary' %>
</div>
</div>
</div>
</h2>
</div>
<% end %>
</div>
If you wish to have the images side by side without overlapping when resized, change col-md-* to col-xs-*. Do so with rest.
I hope this helps.
I hope this should work for you.
Please try this code instead of yours. i made some small changes.
See how we ...!
or
See how we are helping ...!
When we create table using Bootstrap then it should go in side the "row" class. and when you re-size the window some other element is coming above of all the screen. that's way you was not able to click images. and on the End of your code 4th line from the bottom. there is no stating tag for closing "h2" tag.
If a User creates a bunch of <ul></li>:results</li></ul> those bullets will overlap the <div> below it. How can we stop this from happening? Will you save the <div> before it's too late?!? dun dun dun
index.html.erb
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>AVERAGE</b></h4></div>
<% #averaged_quantifieds.each do |averaged| %>
<% if averaged.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(averaged) do %>
<b><%= averaged.name %> (<%= averaged.metric %>)</b>
<% end %>
<ul>
<% averaged.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
# The line breaks only work if the User only adds a few rows, but I want to encourage the User to creates as many rows as his heart desires.
<br>
<br>
<br>
<br>
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>INSTANCE</b></h4></div>
<% #instance_quantifieds.each do |instance| %>
<% if instance.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(instance) do %>
<b><%= instance.name %> (<%= instance.metric %>)</b>
<% end %>
<ul>
<% instance.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
<div class="values-button">
<%= link_to new_quantified_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
</div>
you have a the code <div style="float:left; width:150px;">. this is what makes it overlflow to the div below it. float style takes it out of the normal flow of the dom (floats above the natural structure of the dom is a way of describing it) and the div below it doesnt pay attention to it. removing that line of code (you have it twice) will solve your problem
I want to create a pair of bootstrap columns inside another bootstrap column.
My output is not as desired for some reason.They look completely goofy for some reason. Did I make a rookie mistake in my formatting?
I am iterating over a #user object and having the profile picture be on the left and the profile info be on the right. There are many users so it should ideally style for all the iterations of the users in the database.
I feel this code should work but it doesn't, any idea as to what happened:
<div class="row">
<div class="other-box col-sm-6">
<p>Random text!!!</p>
</div>
<div class="index-user-container col-sm-6">
<div class="row">
<% #users.each do |user| %>
<div class="index-picture col-sm-4">
<%= image_tag user.image.thumb('150x185#').url if user.image_stored? %>
</div>
<div class="index-info-box col-sm-8">
<%= user.first_name %>
<%= user.last_name %>
<%= user.email %>
<%= link_to 'Go to profile', user_path(#user) %>
</div>
<% end %>
</div>
</div>
</div>
I am using twitter bootstrap. Here is a screen shot of the goofyness:
If you want a new row for each user in the list, then put the iterator above the row div, not inside it - otherwise, you might get some funky results.
<div class="index-user-container col-sm-6">
<% #users.each do |user| %>
<div class="row">
<div class="index-picture col-sm-4">
<%= image_tag user.image.thumb('150x185#').url if user.image_stored? %>
</div>
<div class="index-info-box col-sm-8">
<%= user.first_name %>
<%= user.last_name %>
<%= user.email %>
<%= link_to 'Go to profile', user_path(#user) %>
</div>
</div>
<% end %>
</div>