Coder Social home page Coder Social logo

alexhayes / cloudinary_gem Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cloudinary/cloudinary_gem

0.0 1.0 0.0 11.36 MB

Cloudinary GEM for Ruby on Rails integration

Home Page: https://cloudinary.com

Ruby 96.81% CoffeeScript 0.01% JavaScript 0.20% CSS 0.20% Shell 1.41% HTML 1.37%

cloudinary_gem's Introduction

Build Status Cloudinary

Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline.

Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more.

Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new.

Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.

For Ruby on Rails, Cloudinary provides a GEM for simplifying the integration even further.

Getting started guide

More Take a look at our Getting started guide of Ruby on Rails.

Setup

Installing the gem

To install the Cloudinary Ruby GEM, run:

$ gem install cloudinary

If you use Rails 3.x or higher, edit your Gemfile, add the following line and run bundle install

gem 'cloudinary'

Or in Rails 2.x, edit your environment.rb and add:

config.gem 'cloudinary'

If you would like to use our optional integration module of image uploads with ActiveRecord using CarrierWave, install CarrierWave GEM:

Rails 3.x: edit your Gemfile and run bundle install:

gem 'carrierwave'
gem 'cloudinary'

Rails 2.x environment.rb:

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

Note: The CarrierWave GEM should be loaded before the Cloudinary GEM.

Using the source code directly

You can use the source code of this library directly instead of installing the packaged gem file.

git clone https://github.com/cloudinary/cloudinary_gem.git

# if you haven't installed bundler, do so now with:
# gem install bundler

bundle install

Finally, fetch the related assets. This process is done automatically when the packaged gem is installed.

rake cloudinary:fetch_assets 

Try it right away

Sign up for a free account so you can try out image transformations and seamless image delivery through CDN.

Note: Replace demo in all the following examples with your Cloudinary's cloud name.

Accessing an uploaded image with the sample public ID through a CDN:

http://res.cloudinary.com/demo/image/upload/sample.jpg

Sample

Generating a 150x100 version of the sample image and downloading it through a CDN:

http://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill/sample.jpg

Sample 150x100

Converting to a 150x100 PNG with rounded corners of 20 pixels:

http://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill,r_20/sample.png

Sample 150x150 Rounded PNG

For plenty more transformation options, see our image transformations documentation.

Generating a 120x90 thumbnail based on automatic face detection of the Facebook profile picture of Bill Clinton:

http://res.cloudinary.com/demo/image/facebook/c_thumb,g_face,h_90,w_120/billclinton.jpg

Facebook 90x120

For more details, see our documentation for embedding Facebook and Twitter profile pictures.

Usage

Configuration

Each request for building a URL of a remote cloud resource must have the cloud_name parameter set. Each request to our secure APIs (e.g., image uploads, eager sprite generation) must have the api_key and api_secret parameters set. See API, URLs and access identifiers for more details.

Setting the cloud_name, api_key and api_secret parameters can be done either directly in each call to a Cloudinary method or by globally setting using a YAML configuration file.

Cloudinary looks for an optional file named cloudinary.yml, which should be located under the config directory of your Rails project. It contains settings for each of your deployment environments. You can always override the values specified in cloudinary.yml by passing different values in specific Cloudinary calls.

You can download your customized cloudinary.yml configuration file using our Management Console.

Passing the parameters manually looks like this:

auth = {
  cloud_name: "somename",
  api_key:    "1234567890",
  api_secret: "FooBarBaz123"
}

Cloudinary::Uploader.upload("my_picture.jpg", auth)

Embedding and transforming images

Any image uploaded to Cloudinary can be transformed and embedded using powerful view helper methods:

The following example generates an image of an uploaded sample image while transforming it to fill a 100x150 rectangle:

cl_image_tag("sample.jpg", :width => 100, :height => 150, :crop => :fill)

Another example, emedding a smaller version of an uploaded image while generating a 90x90 face detection based thumbnail:

cl_image_tag("woman.jpg", :width => 90, :height => 90, 
             :crop => :thumb, :gravity => :face)

You can provide either a Facebook name or a numeric ID of a Facebook profile or a fan page.

Embedding a Facebook profile to match your graphic design is very simple:

facebook_profile_image_tag("billclinton.jpg", :width => 90, :height => 130, 
                           :crop => :fill, :gravity => :north_west)

Same goes for Twitter:

twitter_name_profile_image_tag("billclinton.jpg")

More See our documentation for more information about displaying and transforming images in Rails.

Upload

Assuming you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

Cloudinary::Uploader.upload("my_picture.jpg")

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

cl_image_tag("abcfrmo8zul1mafopawefg.jpg")
    
http://res.cloudinary.com/demo/image/upload/abcfrmo8zul1mafopawefg.jpg

You can also specify your own public ID:

Cloudinary::Uploader.upload("http://www.example.com/image.jpg", :public_id => 'sample_remote')

cl_image_tag("sample_remote.jpg")

http://res.cloudinary.com/demo/image/upload/sample_remote.jpg

More See our documentation for plenty more options of uploading to the cloud from your Ruby code or directly from the browser.

CarrierWave Integration

Note: Starting from version 1.1.0 the CarrierWave database format has changed to include the resource type and storage type. The new functionality is backward compatible with the previous format. To use the old format override use_extended_identifier? in the Uploader and return false.

Cloudinary's Ruby GEM includes an optional plugin for CarrierWave. If you already use CarrierWave, simply include Cloudinary::CarrierWave to switch to cloud storage and image processing in the cloud.

class PictureUploader < CarrierWave::Uploader::Base    
    include Cloudinary::CarrierWave        
    ...  
end

More For more details on CarrierWave integration see our documentation.

We also published an interesting blog post about Ruby on Rails image uploads with CarrierWave and Cloudinary.

Neo4j integration

Starting from version 1.1.1 Cloudinary's Ruby GEM supports the use of carrierwave with Neo4j.

JavaScript support library

During the installation or update of the Cloudinary GEM, the latest Cloudinary JavaScript library is automatically fetched and bundled with the GEM.

To use the JavaScript files you need to include them in your application, for example:

<%= javascript_include_tag("jquery.ui.widget", "jquery.iframe-transport", 
                           "jquery.fileupload", "jquery.cloudinary") %>

Alternatively, if you use Asset Pipeline, simply edit your application.js file and add the following line:

//= require cloudinary

To automatically set-up Cloudinary's configuration, include the following line in your view or layout:

<%= cloudinary_js_config %>

Uploading images from the browser

The Cloudinary JavaScript library utilizes the Blueimp File Upload library to support image uploading from the browser. See the documentation for more details.

Important
Starting with version 2.0 of the Cloudinary JavaScript library, the Cloudinary extension to the Blueimp File Upload library is no longer initialized automatically. Instead you need to explicitly set it up as described below.

To initialize the File Upload library with Cloudinary include the following code in your page:

$(function() {
      if($.fn.cloudinary_fileupload !== undefined) {
        $("input.cloudinary-fileupload[type=file]").cloudinary_fileupload();
      }
    });

(cloudinary_fileupload() internally calls Blueimp's fileupload() so there's no need to call both.)

Samples

You can find our simple and ready-to-use samples projects, along with documentation in the samples folder. Please consult with the README file, for usage and explanations.

Additional resources

Additional resources are available at:

Support

You can open an issue through GitHub.

Contact us https://cloudinary.com/contact

Stay tuned for updates, tips and tutorials: Blog, Twitter, Facebook.

Join the Community

Impact the product, hear updates, test drive new features and more! Join here.

License

Released under the MIT license.

cloudinary_gem's People

Contributors

aleksandar-cloudinary avatar assembler avatar binarypaladin avatar codeinvain avatar const-cloudinary avatar d-mendoza avatar donv avatar frederfred avatar gtmax avatar gunterja avatar itaibenari avatar jamesharker avatar jc00ke avatar l8on avatar mikeys avatar nadavofi avatar nadavofir avatar nadavs avatar nashby avatar pdipietro avatar rmoriz avatar sergei-ndivi avatar tallevami avatar thedrow avatar tocker avatar victormours avatar will89 avatar yomesinc avatar zencocoon avatar zenspider avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.