I am using PaperClip in ruby on rails to handle image uploading for a model. It is working well apart from an inconsistent handling of image sizes.
See this example:
See how the picture on the far right is larger than the pictures in the middle and on the left?
I need to identify why this is happening.
This is my development paperclip configuration:
#Paperclip storage locally and specify location of imagemagick
Paperclip.options[:command_path] = "/usr/local/bin/"
PAPERCLIP_STORAGE_OPTS = {
:styles => { :thumb => '100x100#', :medium => '450x300>', :large => '600x400>'},
:convert_options => { :all => '-quality 100' },
:processor => [ :cropper ]
}
# Raises error for missing translations
# config.action_view.raise_on_missing_translations = true
end
And I am showing these images using the following bit of code:
<div class="container">
<% count = 0 %>
<% results.each do |event| %>
<% if count == 3 %>
<div class="row"></div>
<% end %>
<div class="col-xs-12 col-md-4">
<ul class="deals">
<li class="impression">
<%= link_to(event) do %>
<%= image_tag event.logo.url(:medium) %>
<div>
<h2><%= event.className %></h2>
<div><%= event.company_name %></div>
<table>
<tbody>
<tr>
<td>
<span>£<%= event.ppt %></span>
£<%= event.ppc %></td>
<td>4 bought</td>
</tr>
</tbody>
</table>
</div>
<% end %>
</li>
</ul>
</div>
<% count = count +1 %>
<% end %>
</div>
When I investigate the actual img sizes after the HTML is rendered they are as follows:
Tennis pic : 334 x 209 (Original image size is 1024 x 640)
Computer Training pic : 334 x 209 (Original image size is 1600 x 1000)
Zumba pic : 334 x 223 (Original image size is 1280 x 854)
For some reason the Zumba picture is 14 pixels longer than the others?! Why is this happening - why is Paperclip not resizing consistently in this configuration? Or is it to do with the css for the page?!
The answer was to ignore the aspect ratio in imagemagick as per :
http://www.imagemagick.org/Usage/resize/#noaspect
I therefore changed the configuration options to be :
#Paperclip storage locally and specify location of imagemagick
Paperclip.options[:command_path] = "/usr/local/bin/"
PAPERCLIP_STORAGE_OPTS = {
:styles => { :thumb => '100x100!#', :medium => '450x300!>', :large => '600x400!>'},
:convert_options => { :all => '-quality 100' },
:processor => [ :cropper ]
}
# Raises error for missing translations
# config.action_view.raise_on_missing_translations = true
end
Note the ! in the '100x100!#' which has been added - this is what tells imagemagick to ignore the aspect ratio - which was the reason I was having inconsistently sized images before I added the !.
Wahoo. ! .
Related
Screenshot of Page I am trying to recreate a pc part picker type of application using bootstrap and express. When trying to display all the cases available on "my" website, I am loading all of the cases from my database in an ejs file and then displaying them in a thumbnail with four in each row. I have used flexboxes on every four elements to make the heights for all thumbnails in one row the same, however it only works on the first row and does not work after. I have tried to add the code underneath, however this is my first time asking a question so if you have any suggestions to make it more readable please do let me know. I have also included the link to the picture of the page at the beginning of the paragraph.
<% var start = 0 %>
<% cases.forEach(function(qcase) { %>
<% if (start % 4 == 0) { %>
<div class="row text-center display-flex">
<% }; %>
<div class="col-md-3 col-md-6">
<div class="thumbnail">
<img src="<%=qcase.image%>">
<div class="caption">
<h4><%=qcase.name%></h4>
</div>
<div>
More Information
</div>
</div>
</div>
<% if (start % 4 == 3) { %>
</div>
<% }; %>
<% start += 1 %>
<% }); %>
I'm on rails, using the 'twitter-bootstrap-rails' gem, version 3.2.2 which may or may not be relevant to the diagnosis here.
So basically I've used some documentation examples online to get a panel-collapsing functionality on a little data visualization application I've made using the chartkick gem. I got the collapsibility functionality, but now the charts inside of my collapsible divs are getting squeezed into 400px X 200px rect elements despite my instructions for height and width being added.
Here's what the charts should look like. These are the charts that have not been placed into collapsible div elements (I'm the real estate developer here as well so not worried about privacy w/ regards to data)
And here's what the squeezed charts inside of the collapsible divs look like:
What's even stranger is that I had to reload the page to get the bug to show itself, because in the time it took me to write this question, the chart had somehow fixed itself. Happens randomly but normally takes at least a minute. Sometimes I can get it to "fix itself" if I open up the web inspector and point to the elements. This is what it looks like after a spontaneous self-fix:
The self fix only worked for the already-collapsed div elements. The uncollapsed elements remain shrunken after being expanded, at least initially.
code for the index.html.erb page for the properties controller. Nothing proprietary here really.
<h1>Properties</h1>
<% #properties.each do |p| %>
<div class="panel panel-default">
<div class="panel-heading"><h3><%= p.name %> Hard & Soft Costs Per Draw</h3></div>
<div class="panel-body">
<% hard_costs = p.hard_costs %>
<% soft_costs = p.soft_costs %>
<% construction_contract_estimates = hard_costs.map(&:sv_construction_contract) %>
<%= construction_contract_estimates.pctg_change %> Change in Construction Contract Estimate from Draw 1 to Draw <%= hard_costs.last.draw_i %>
<%= column_chart [{:name => "Hard Cost Left to Go", :data => hard_costs.map{|hc| [hc.draw_i, hc.b2f_construction_contract.to_i]}}, {:name => "Hard Cost Draw", :data => hard_costs.map{|hc| [hc.draw_i, hc.cd_construction_contract.to_i]}}, {:name => "Total Hard Cost Estimate", :data => hard_costs.map{|hc| [hc.draw_i, hc.sv_construction_contract.to_i]}} ], :height => "800px" %>
<%= column_chart hard_costs.map{|r| [r.draw_i, r.cd_construction_contract] }%>
<%# collapsible column chart 1%>
<div class="panel panel-default" style="display: block;">
<% softcosts_pd_graph_id = "#{p.name.sanitize}_scpd_chart_id" %>
<div class="panel-heading">Soft Costs Per Draw Graph (<a href="#<%= softcosts_pd_graph_id %>" data-toggle='collapse'>Show/Hide</a>) (click twice to hide the first time)</div>
<div class="panel-body collapse" id="<%= softcosts_pd_graph_id %>">
<%= column_chart p.soft_costs.map{|sc| [sc.draw_i, sc.cd_total_soft_costs.to_i] } , :library => {:xtitle => "Draw #", :ytitle => "Soft Cost Draw", :width => "800px"} %>
</div>
</div>
<%# collapsible series of pie charts %>
<div class="panel panel-default" style="display: block;">
<% softcosts_pd_pies_id = "#{p.name.sanitize}_scpd_pies_id"%>
<%# figure out how to use glyph icons and use 'glyphicon-collapse-down' and '...-up' %>
<div class="panel-heading">Soft Costs Per Draw Pie Charts (<a href="#<%= softcosts_pd_pies_id %>" data-toggle='collapse'>Show/Hide</a>) (click twice to hide the first time)</div>
<div class="panel-body collapse" id="<%= softcosts_pd_pies_id %>">
<ul class="list-group">
<% p.soft_costs.each do |sc| %>
<li class="list-group-item">Draw <%= sc.draw_i %>:
<h4>Soft Cost Draw #<%= sc.draw_i %>: <%= number_to_currency sc.cd_total_soft_costs %> </h4>
<%= pie_chart sc.breakdown_chart_data.sort_by{|x,y| y}.reverse, :library => {:legend => {position: "right"} } %>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<% end %>
Code taken from client web browser: gist
Thanks! Hope I've made it as easy as possible for someone to assist
Also, while we're on this subject of handling the rect boxes created by chartkick, does anyone know how to edit the height and width of the rect box serving as an outer container for the chart itself? There's too much buffer here.
I had the same problem with Chartkick in foundation-rails. The problem is that the resize event handlers are not triggered when expanding.
For example, I had the following code in a js file for my expandable elements:
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[class^=child-]').hide().children('td'); });
I added the following under the click event to trigger the resize event handlers:
var evt = document.createEvent('Event');
evt.initEvent('resize', true, true);
window.dispatchEvent(evt);
This works just fine:
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
var evt = document.createEvent('Event');
evt.initEvent('resize', true, true);
window.dispatchEvent(evt);
});
$('tr[class^=child-]').hide().children('td'); });
There might be a better way to do this, but it's a good start.
As you see the picture, The pagination comes right next to the content.
How can I start it at new line? I mean the bottom of content.
HTML
<% #communities.each do |community| %>
<%= render 'communities/community', :community => community %>
<% end %>
<div class='pagination-centered'>
<%= paginate #communities, :window => 4, :outer_window => 5, :left => 2, :right => 2 %>
</div>
Apparently, your communities container uses float:left.
you should use clear:both for pagination containger
I'm using the nice Select2 for multiple select fields on my web applications search page. One can search for people by company/industry/school. Because there are hundreds of searchable values for each, it is taking time for the correct select2 css to load (about 1 second). The old ugly select fields can be seen in a flicker before the pretty select2 fields display. Attached are two screenshots that show the transition.
Here is my view code:
<%= form_tag('', :method => :get) do %>
<div class="row-fluid">
<div class="span4">
<label>What industries have they worked in?</label>
<%= select_tag "industry_ids", options_for_select((#visible_industries), params[:industry_ids]), { :placeholder => "Type to search...", :multiple => true, :id => "e3", :onchange => 'this.form.submit();' } %>
<%= hidden_field_tag :&, params[:industry_ids] %>
</div>
<div class="span4">
<label>What companies have they worked at?</label>
<%= select_tag "company_ids", options_for_select((#visible_companies), params[:company_ids]), { :placeholder => "Type to search...", :multiple => true, :onchange => 'this.form.submit();' } %>
<%= hidden_field_tag :&, params[:company_ids] %>
</div>
<div class="span4">
<label>Where did they go to school?</label>
<%= select_tag "school_ids", options_for_select((#visible_schools), params[:school_ids]), { :placeholder => "Type to search...", :multiple => true, :onchange => 'this.form.submit();' } %>
<%= hidden_field_tag :&, params[:school_ids] %>
</div>
<div class="row-fluid">
<% end %>
</div>
</div>
And controller code:
def people
#current_user = current_user
#visible_positions = Position.where{ is_visible.eq('true') }
#visible_educations = Education.where{ is_visible.eq('true') }
#visible_companies = #visible_positions.order("LOWER(company)").all.map { |p| [ p.company, p.company ] }.uniq
#visible_industries = #visible_positions.order("LOWER(industry)").all.map { |p| [ p.industry, p.industry ] }.uniq
#visible_schools = #visible_educations.order("LOWER(school)").all.map { |e| [ e.school, e.school ] }.uniq
#c = #visible_positions.where{company.in(my{params[:company_ids]})}.map(&:user_id)
#i = #visible_positions.where{industry.in(my{params[:industry_ids]})}.map(&:user_id)
#s = #visible_educations.where{school.in(my{params[:school_ids]})}.map(&:user_id)
unless #c.empty? && #i.empty? && #s.empty?
#users = User.find([#c,#i,#s].reject(&:empty?).reduce(:&))
end
end
Finally, I have this javascript in my assets directory (in addition to the select2 css):
$(document).ready(function(){
$('select').select2({
minimumInputLength: 1
});
});
What can I do to prevent this flicker from happening? Thank you.
I'll post my comment as an answer since it solved your issue.
My suggestion would be to hide the selects till the page is fully loaded (and select2 applied).
In the stylesheet, add a input {display:none;} rule to hide them (although visibility:hidden might be better). Then with jQuery override that rule $('input').css("display","inline");.
Using a data table from http://datatables.net/ , How can i stop it from overflowing on the page?
EDIT:
<script type="text/javascript">
$(document).ready(function() {
$('#comment').dataTable( {
"oLanguage": {
"sInfo": "",
"sInfoEmpty": "",
"sInfoFiltered": ""
},
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"bLengthChange": false,
"aaSorting": [[3, 'desc']],
"aoColumns": [
{ "bSortable": false },
null,
null,
{ "asSorting": [ "desc" ] },
null,
{ "bSortable": false }
] } );
});
</script>
<table id="comment">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Comment</th>
<th>Created</th>
<th>Attachments</th>
<th><center>Delete?</center></th>
</tr>
</thead>
<tbody>
<% #company.comments.each do |comment| %>
<tr>
<td>
<% if comment.user.avatar.blank? %>
<%= image_tag("default_user.png", :height => "50", :width => "50") %>
<% else %>
<%= image_tag(comment.user.avatar_url, :height => "50", :width => "50") %>
<% end %>
</td>
<% if comment.user.name.nil? %>
<td><%= comment.user.email %></td>
<% else %>
<td><%= comment.user.name %></td>
<% end %>
<td><%=raw comment.body %></td>
<td><%= comment.created_at.to_s(:db) %></td>
<% if comment.file.blank? %>
<td></td>
<% else %>
<td><%= link_to comment.file_identifier, comment.file_url %></td>
<% end %>
<td><center><%= link_to image_tag("delete.png", :alt => "Delete", :height => "15px"), [comment.company, comment], :confirm => 'Are you sure?', :method => :delete %></center></td>
</tr>
<% end %>
</tbody>
</table>
The DataTables function won't help with trouble-shooting. It's a CSS issue. And also a content issue. First the content:
Sizing on tables is "fuzzy"; the table will do its best to size to your suggestions, and will exactly match your suggestions when it can. When you have a huge long string, though (I believe I'm seeing a whole long series of A's and D's, right?) it has no choice. It will make the column as wide as it needs to be to fit the content. The other columns will then be as narrow as they can be and still accomodate your content.
The solution? CSS. It boils down to overflow: hidden. In your stylesheet, set your TD elements to use overflow: hidden and the string will get "chopped off". This isn't always visually pleasing, but sometimes web development is about compromise.
One of those compromises is to also set text-overflow: ellipsis. Any text that can't fit into the cell will be truncated and the ellipsis symbol (three tightly-kerned dots; it's a single character, not three actual dots) will be inserted at the end where it gets cut off.
But then how do you see the data in its entirety? Tricky one. I've just been running a script in the fnRowCallback callback that sets the title of the cell to be the same as its contents. Then on mouseover, a tooltip shows you the content. I'm sure there are better ways.
In the end, what you need to ask is: is a super-long string like that even realistic? What's the expected content?
http://datatables.net/styling/ids_classes has a list of the classes/ids applied - can't you just set a width on the wrapper element?
Apply custom width, e.g.:
.dataTables_wrapper {width:60%}