CarrierWave integration

dacă acceptați încărcarea dinamică a imaginilor în aplicația Ruby on Rails, imaginile sunt probabil atașate unei anumite entități model. Rails utilizează ActiveRecord pentru entitățile model în mod implicit, în timp ce documentele Mongoide sunt utilizate pentru un model bazat pe MongoDB. Exemplele pot include păstrarea imaginii ca atribut ‘ imagine ‘al unei entități Post sau ca atribut’ profile_picture ‘ al unei entități utilizator.

bijuteria CarrierWave poate fi utilă pentru integrarea încărcărilor de imagini cu modelul dvs. În mod implicit, CarrierWave stochează imagini pe hard disk-ul local, dar are și pluginuri suplimentare disponibile pentru stocarea și manipularea imaginilor.

Cloudinary gem oferă un plugin pentru CarrierWave. Folosind acest plugin vă permite să vă bucurați de beneficiile CarrierWave pentru încărcarea cu ușurință a imaginilor din formularele HTML pe modelul dvs., în timp ce vă bucurați de marile beneficii ale Cloudinary: imaginile încărcate sunt stocate în cloud, transformate și manipulate în cloud și livrate automat printr-un CDN.

CarrierWave instalare și configurare

pentru a utiliza modulul de integrare opțional pentru încărcarea imaginilor cu ActiveRecord sau Mongoid folosind CarrierWave, instalați gem CarrierWave:

Copiază în clipboard
gem install carrierwave

șine 3.X Gemfile:

Copiază în clipboard
gem 'carrierwave'gem 'cloudinary'

șine 2.x mediu.rb

Copiază în clipboard
config.gem 'carrierwave', :version => '~> 0.4.10'config.gem 'cloudinary'

notă

bijuteria CarrierWave trebuie încărcată înainte de bijuteria Cloudinary.

încărcați Exemple

mai jos este un scurt exemplu care demonstrează utilizarea Cloudinary cu CarrierWave în proiectul Rails. În acest exemplu, folosim entitatea model de postare pentru a sprijini atașarea unei imagini la fiecare postare. Imaginile atașate sunt gestionate de atributul (coloana)’ picture ‘ al entității Post.

pentru a începe, definiți mai întâi o clasă de încărcare CarrierWave și spuneți-i să utilizeze pluginul Cloudinary. Pentru detalii, consultați documentația CarrierWave.

în acest exemplu, vom converti imaginea încărcată într-un PNG înainte de a o stoca în cloud. De asemenea, îi vom atribui eticheta post_picture. Definim două transformări suplimentare necesare pentru afișarea imaginii pe site-ul nostru:’ standard ‘și’thumbnail’. Un ID Public unic generat Aleatoriu este generat pentru fiecare imagine încărcată și stocat persistent în model.

în exemplul următor, definim în mod explicit un public_id bazat pe conținutul atributului ‘short_name’ al entității ‘Post’.

‘imagine’ atribut De Post este pur și simplu un șir de caractere (un script de migrare DB este necesar, desigur). Îl montăm la clasa’ PictureUploader ‘ pe care tocmai am definit-o:

Copiază în clipboard
class Post < ActiveRecord::Base ... mount_uploader :picture, PictureUploader ...end

în formularul HTML pentru editarea postării, adăugăm un câmp de fișier pentru încărcarea imaginii și, de asemenea, un câmp ascuns ‘cache’ pentru susținerea erorilor de reîncărcare și validare a paginii fără a pierde imaginea încărcată. Exemplul de mai jos este în ‘HAML’ (desigur, puteți face exact același lucru folosind ‘ERB’):

Copiază în clipboard
= form_for(:post) do |post_form| = post_form.hidden_field(:picture_cache) = post_form.file_field(:picture)

în controlerul nostru, salvăm sau actualizăm atributele postării în mod standard. De exemplu:

Copiază în clipboard
post.update_attributes(params)

notă

dacă încărcați imagini din browser direct în Cloudinary, un identificator semnat este trimis controlerului în locul datelor reale ale imaginii. Pluginul Cloudinary CarrierWave gestionează perfect identificatorii direcți, verifică semnătura și actualizează modelul cu referire la imaginea încărcată.

în acest moment, imaginea încărcată de utilizator pe serverul dvs. este încărcată în Cloudinary, care a atribuit, de asemenea, ID-ul și eticheta publică specificate și o convertește în PNG. ID-ul Public împreună cu versiunea imaginii încărcate sunt stocate în atributul ‘imagine’ al entității noastre Post. Rețineți că în mod implicit transformările nu sunt generate în acest moment; ele sunt generate numai atunci când un utilizator final le accesează pentru prima dată. Acest lucru este adevărat dacă nu specificați ‘process: eager => true’ sau pur și simplu ‘eager’ pentru fiecare transformare.

acum Puteți utiliza apelurile standard image_tag pentru afișarea imaginilor încărcate și a transformărilor lor derivate, iar bijuteria Cloudinary generează automat adresa URL completă corectă pentru accesarea resurselor dvs:

Copiază în clipboard
image_tag(post.picture_url, :alt => post.short_name)image_tag(post.picture_url(:thumbnail), :width => 50, :height => 50)

transformări personalizate și dinamice

pluginul Cloudinary pentru CarrierWave acceptă toate opțiunile standard de redimensionare și decupare CarrierWave. În plus, puteți aplica orice transformare personalizată acceptată de Cloudinary folosind metoda cloudinary_transformation. Apelarea cloudinary_transformation se poate face și în combinație cu metodele standard CarrierWave resize și crop. Următoarea clasă de încărcare prezintă un exemplu comun de utilizare a transformărilor personalizate:

puteți continua acest lucru și puteți aplica transformări înlănțuite pentru a obține rezultate mai complexe. Aceste transformări pot fi aplicate ca o transformare de intrare în timpul încărcării sau ca parte a diferitelor versiuni care sunt generate fie leneș, fie cu nerăbdare în timpul încărcării. Următoarea clasă de încărcare include astfel de transformări înlănțuite aplicate folosind parametrul transformation al metodei cloudinary_transformation.

unele site-uri web au un design grafic care le obligă să afișeze aceleași imagini în mai multe dimensiuni diferite. Definirea formală a mai multor versiuni de încărcare poate fi o problemă. Puteți utiliza în continuare CarrierWave și pârghie transformări dinamice Cloudinary prin aplicarea transformărilor dorite în timp ce construirea punctul dumneavoastră de vedere. Orice versiune poate fi generată dinamic din vizualizarea dvs. fără dependență de versiunile CarrierWave. Pentru a realiza acest lucru, utilizați full_public_id atribut cu cl_image_tag pentru a construi URL-uri de transformare bazate pe cloud pentru imaginile încărcate atașate la modelul dvs.

Copiază în clipboard
cl_image_tag(post.picture.full_public_id, :format => "jpg", :width => 100, :height => 200, :crop => :crop, :x => 20, :y => 30, :radius => 10)

decupare personalizată bazată pe coordonate

dacă permiteți utilizatorilor să selecteze manual zona de decupare, vă recomandăm să păstrați permanent coordonatele X,y în model pentru a permite decuparea diferită a imaginii originale în viitor. Următoarea clasă de încărcare preia coordonatele personalizate din atributele obiectului model. Metoda custom_crop din acest exemplu returnează un Hash de parametri suplimentari de transformare Cloudinary de aplicat.

dacă doriți să stocați numai versiunea decupată a imaginii, puteți utiliza o transformare de intrare. În acest fel, imaginea originală nu este stocată în cloud; doar versiunea decupată. Puteți utiliza apoi transformări suplimentare pentru a redimensiona imaginea decupată. Următorul exemplu apelează process :custom_crop în clasa însăși (în loc de ‘versiune’) în timp ce coordonatele personalizate sunt păstrate ca atribute tranzitorii pe model (definite cu attr în loc să le stocheze persistent).