2016-08-17 2 views
1

클립 클립을 통해 아바타를 사용하고 싶습니다. 튜토리얼에서 나는이 코드를 변경하고 작업 Gravatar에클립 클립으로 이미지 크기를 조정하는 방법

messages_helper.rb에게

def recipients_options(chosen_recipient = nil) 
s = '' 
User.all.each do |user| 
s << "<option value='#{user.id}' 
       data-img-src='#{gravatar_image_url(user.email, size: 50)}' 
       #{'selected' if user == chosen_recipient}> 
       #{user.name}</option>" 
end 
s.html_safe 
end 

를 사용합니다.

module MessagesHelper 
    def recipients_options(chosen_recipient = nil) 
    s = '' 
    User.all.each do |user| 
    s << "<option value='#{user.id}' data-img-src='#{user.avatar.url(:thumb)}' 
       #{'selected' if user == chosen_recipient}>#{user.username}</option>" 
    end 
    s.html_safe 
    end 


end 

new.html.erb

<div class="form-group"> 
    <%= label_tag 'recipients', 'Choose recipients' %> 
    <%= select_tag 'recipients', recipients_options(@chosen_recipient), multiple: true, class: 'form-control chosen-it ' %> 
</div> 

user.rb

has_attached_file :avatar, :styles => { :medium => "150x150>", :thumb => "30x30#" }, default_url: "https://s3.amazonaws.com/myinstick/logo/instagram-icon.png" 
validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/ 

을하지만! 사용자가 아바타를 갖고 있지 않으면 이미지 클립 클립을 사용합니다. 그리고 그것은 스케일링을하지 않습니다 그리고 그것은 크게 보입니다. 스타일이나 크기를 설정하는 방법. 모델의

it looks like this

+0

그냥에 대한 선택 CSS를 제대로 찾을 작동 이 이미지를 만들고 다음과 같은 CSS를 만드십시오 :'.my-big-img-class {max-width : 50px}' – Victor

답변

0

. 드롭 다운 목록 내가이

var fn_template = '<img class="{class_name} image-circle-minisize" src="{url}" />'; 

처럼, 모든 이미지에 대한 클래스를 설정할 수 있습니다 jquery.image-select.js에게

(function($) { 

// Image template, this can be overridden from the constructor (options.template), 
// must contains {src} placeholder. Ther eare two class names 'chose-image' or 'chose-image-small', modifiy in CSS 
var fn_template = '<img class="{class_name} " src="{url}" />'; 

// Store the original 'chosen' method 
var fn_chosen = $.fn.chosen;........ 

를 사용하고 모든

1

:

has_attached_file :avatar, 
     :styles => { thumb: "100x100#", medium: "300x300#", large: "900x500#"} 

또는 어떤 크기 당신이 원하는. #은 수확을위한 것입니다. 이미지의 중심을 선택하고 거기에서 지정된 높이와 너비를 자릅니다. 당신은 또한 당신이 자르기를하지 않으려면 기본 >를 사용 ... 그리고보기에 있습니다 : 나는 문제를 해결

<%= image_tag @user.avatar.url(:medium) %> 
+0

불행히도 문제는 다른 곳에 있습니다. 이미지가 업로드되면 모든 것이 잘됩니다. 하지만 이미지가 누락되면 표준 "default_url : '/images/:style/missing.png'"을로드합니다. 그리고 그것은 크게 보입니다. 문제는 여기 : data-img-src = '# {user.avatar.url (: thumb)}'. "data-img-src = '# {user.avatar.url (: thumb), size : 50}'와 같은 코드를 사용하면됩니다. 코드가 작동하지 않습니다. –

관련 문제