CarrierWave integrasjon

hvis du støtter dynamisk opplasting av bilder i Ruby on Rails-programmet, er bildene trolig knyttet til en bestemt modell enhet. Rails bruker ActiveRecord for modellenheter som standard, Mens Mongoid-dokumenter brukes til En MongoDB-basert modell. Eksempler kan være å beholde bildet som bilde-attributtet til En Post-enhet eller som profile_picture-attributtet til En brukerenhet.

CarrierWave-perlen kan være nyttig for å integrere bildeopplastinger med modellen din. Som standard lagrer CarrierWave bilder på den lokale harddisken, men den har også flere plugins tilgjengelig for bildelagring og manipulering.

Den Cloudinary perle gir en plugin For CarrierWave. Ved hjelp Av denne plugin kan du nyte fordelene Av CarrierWave for enkelt å laste opp bilder FRA HTML-skjemaer til din modell, mens du nyter de store fordelene Med Cloudinary: opplastede bilder lagres i skyen, forvandlet og manipulert i skyen, og leveres automatisk gjennom EN CDN.

carrierwave installasjon og oppsett

for å bruke den valgfrie integrasjonsmodulen for å laste opp bilder Med ActiveRecord eller Mongoid ved Hjelp Av CarrierWave, installer CarrierWave-perlen:

Kopier til utklippstavlen
gem install carrierwave

Skinner 3.X Gemfile:

Kopier til utklippstavlen
gem 'carrierwave'gem 'cloudinary'

Skinner 2.x miljø.rb

Kopier til utklippstavle
config.gem 'carrierwave', :version => '~> 0.4.10'config.gem 'cloudinary'

Merk

CarrierWave perle skal lastes før Cloudinary perle.

Last opp eksempler

Nedenfor er et kort eksempel som demonstrerer bruk Av Cloudinary med CarrierWave i Rails-prosjektet. I dette eksemplet bruker Vi Postmodellenheten til å støtte vedlegg av et bilde til hvert innlegg. Vedlagte bilder administreres av attributtet ‘bilde’ (kolonne) Av Post-enheten.

for å komme i gang, først definere En CarrierWave uploader klasse og fortelle det å bruke Cloudinary plugin. Se CarrierWave-dokumentasjonen for mer informasjon.

i dette eksemplet konverterer vi det opplastede bildet til EN PNG før det lagres i skyen. Vi vil også tildele den post_picture – taggen . Vi definerer to ekstra transformasjoner som kreves for å vise bildet på nettstedet vårt: ‘standard’ og ‘thumbnail’. En tilfeldig generert unik Offentlig ID genereres for hvert opplastede bilde og lagres vedvarende i modellen.

i følgende eksempel definerer vi eksplisitt en public_id basert på innholdet i attributtet ‘Short_name’ i ‘Post’ – enheten.

‘bilde’ – attributtet Til Post er ganske enkelt En Streng(ET DB-migreringsskript er selvfølgelig nødvendig). Vi monterer den til ‘PictureUploader’ – klassen vi nettopp har definert:

Kopier til utklippstavle
class Post < ActiveRecord::Base ... mount_uploader :picture, PictureUploader ...end

I VÅRT HTML-skjema for Postredigering legger vi til Et Filfelt for opplasting av bildet og også et skjult ‘cache’ – felt for å støtte sideopplasting og valideringsfeil uten å miste det opplastede bildet. Eksemplet nedenfor er I ‘HAML’ (du kan selvfølgelig gjøre akkurat det samme med ‘ERB’):

Kopier til utklippstavlen
= form_for(:post) do |post_form| = post_form.hidden_field(:picture_cache) = post_form.file_field(:picture)

i vår kontroller lagrer eller oppdaterer vi attributtene til innlegget på standard måte. Eksempelvis:

Kopier til utklippstavle
post.update_attributes(params)

Merknad

hvis du laster opp bilder fra nettleseren direkte til Cloudinary, sendes en signert identifikator til kontrolleren i stedet for de faktiske bildedataene. Cloudinary Sin CarrierWave plugin håndterer sømløst direkte identifikatorer, bekrefter signaturen, og oppdaterer modellen med en referanse til det opplastede bildet.

på dette tidspunktet blir bildet lastet opp av brukeren til serveren din lastet opp Til Cloudinary, som også tildelte den angitte Offentlige ID-EN OG taggen og konverterer DEN til PNG. Den Offentlige ID-EN sammen med versjonen av det opplastede bildet lagres i’ bilde ‘ – attributtet til Vår post-enhet. Vær oppmerksom på at transformasjonene som standard ikke genereres på dette tidspunktet; de genereres bare når en sluttbruker åpner dem for første gang. Dette er sant med mindre du angir ‘process: eager = > true ‘eller bare’ eager ‘ for hver transformasjon.

nå kan du bruke standard image_tag samtaler for å vise opplastede bilder og deres avledede transformasjoner og Cloudinary perle genererer automatisk riktig full URL for tilgang til ressursene:

Kopier til utklippstavlen
image_tag(post.picture_url, :alt => post.short_name)image_tag(post.picture_url(:thumbnail), :width => 50, :height => 50)

Tilpassede og dynamiske transformasjoner

Cloudinary sin plugin For CarrierWave støtter alle standard CarrierWave endre størrelse og beskjære alternativer. I tillegg kan du bruke en tilpasset transformasjon som støttes av Cloudinary ved hjelp av metoden cloudinary_transformation. Kall cloudinary_transformation kan også gjøres i kombinasjon med standard CarrierWave resize og crop metoder. Følgende opplastingsklasse viser et vanlig eksempel på bruk av tilpassede transformasjoner:

Du kan ta dette videre og bruke kjedede transformasjoner for å oppnå mer komplekse resultater. Disse transformasjonene kan brukes som en innkommende transformasjon under opplasting eller som en del av de forskjellige versjonene som genereres enten dovent eller ivrig under opplasting. Følgende opplastingsklasse inneholder slike kjedede transformasjoner som brukes ved hjelp av parameteren transformation i metoden cloudinary_transformation.

Noen nettsteder har et grafisk design som tvinger dem til å vise de samme bildene i mange forskjellige dimensjoner. Formelt definere flere uploader versjoner kan være en problemfri. Du kan fortsatt bruke CarrierWave og utnytte Cloudinary dynamiske transformasjoner ved å bruke ønskede transformasjoner mens bygge visningen. Enhver versjon kan genereres dynamisk fra visningen uten avhengighet Av CarrierWave versjoner. For å oppnå dette, bruk attributtet full_public_id med cl_image_tag for å bygge skybaserte transformasjonsadresser for de opplastede bildene som er knyttet til modellen.

Kopier til utklippstavle
cl_image_tag(post.picture.full_public_id, :format => "jpg", :width => 100, :height => 200, :crop => :crop, :x => 20, :y => 30, :radius => 10)

Egendefinert koordinatbasert beskjæring

hvis du tillater at brukerne manuelt velger beskjæringsområdet, anbefaler vi at du beholder x-og y-koordinatene vedvarende i modellen for å aktivere annen beskjæring på det opprinnelige bildet i fremtiden. Følgende opplasterklasse henter de egendefinerte koordinatene fra attributtene til model – objektet. Metoden custom_crop i dette eksemplet returnerer En Hash med Flere Skybaserte transformasjonsparametere som skal brukes.

hvis du bare vil lagre den beskårne versjonen av bildet, kan du bruke en innkommende transformasjon. På denne måten blir det opprinnelige bildet ikke lagret i skyen; bare den beskårne versjonen. Du kan deretter bruke ytterligere transformasjoner til å endre størrelsen på det beskårne bildet. Følgende eksempel kaller process :custom_crop i selve klassen (i stedet for i en ‘versjon’) mens de tilpassede koordinatene holdes som forbigående attributter på modellen (definert med attr i stedet for å lagre dem vedvarende).