2016-08-17 3 views
1

Ich möchte Avatar über Büroklammer verwenden. Tutorial Gravatarwie Größe Bild mit Büroklammer Edelstein

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 

i auf diesem Code ändern verwenden und es funktioniert.

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/ 

Aber! Wenn der Benutzer keinen Avatar hat, wird die Standard-Papierklammer verwendet. und es skaliert nicht und es sieht groß aus. wie man den Stil oder die Größe einstellt.

it looks like this

+0

Nur die richtig CSS-Selektor finden Dieses Bild und erstellen Sie eine CSS mit etwas wie: '.my-big-img-Klasse {max-Breite: 50px}' – Victor

Antwort

0

ich das Problem gelöst. Drop-Down-Liste verwendet 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;........ 

I-Klasse für alle Bilder einstellen können, wie diese

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

und alles funktioniert

1

in Ihrem Modell:

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

oder was Größe Sie es haben wollen. Die # dient zum Zuschneiden. Es wird die Mitte des Bildes ausgewählt und die angegebene Höhe und Breite von dort abgeschnitten. Sie können auch einfach den Standard >, wenn Sie das Zuschneiden nicht wollen ... und in der Ansicht:

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

Leider liegt das Problem woanders. wenn Bild hochgeladen - dann ist alles in Ordnung. Wenn das Bild fehlt, wird der Standard "default_url: '/images/:style/missing.png'" geladen. und es sieht groß aus. Problem hier: data-img-src = '# {user.avatar.url (: thumb)}'. Wenn ich Code wie folgt verwende: "data-img-src = '# {user.avatar.url (: thumb), size: 50}'". Code funktioniert nicht. –

Verwandte Themen