Ruby Gem

Learn how to get started with the PhotoEditor SDK for HTML5 and Ruby on Rails and how to swiftly integrate the SDK into a Ruby on Rails project.

Getting Started with our Ruby Gem

We created a Ruby gem for easily integrating the PhotoEditor SDK for HTML5 in any Ruby on Rails project. Just follow the steps and you'll get a fully fledged photo editor in your rails app.

Free Trial#

Our tech is modified to be used for testing purposes without a license key. To start testing just follow this Get Started guide and leave out the step of entering the commercial license keys. The editor will simply render a watermark over the preview and final results. And in case you need any technical assistance, make sure to reach out to us: https://img.ly/support. We’ll be glad to help.

WARNING: The repository is not meant as a fully fledged Ruby Gem, but as a base for further development instead.

Setup the Rails asset pipeline#

Reference Gem in your bundlers Gemfile. Open your Gemfile and insert

Ruby


...
gem 'pesdk-html5-rails', :git => 'https://github.com/imgly/pesdk-ruby-gem-demo.git'
...

Register javascript with the Rails asset pipeline. Open /assets/javascripts/application.js and insert the following lines

JavaScript


...
//= require react.production.min
//= require react-dom.production.min
//= require PhotoEditorSDK.min
//= require PhotoEditorSDK.UI.ReactUI.min
...

Register stylesheets with the Rails asset pipeline. Open /assets/stylesheets/application.css and insert the following lines css ... *= require PhotoEditorSDK.UI.ReactUI.min ...


### Initialize the editor
Create a custom javascript file or modify your `application.js` to initialize the PhotoEditor UI on window load as follows

```javascript
...

window.onload = function () {
  // Please replace this with your license: https://img.ly/dashboard
  var license: '{"owner":"Imgly Inc.","version":"2.4", ...}'

  var container = document.getElementById('pesdk')
  var editor = new PhotoEditorSDK.UI.ReactUI({
    container: container,
    license: license,
    assets: {
        baseUrl: '/assets',
        resolver: function (path) { return path }
    }
  })
}
...

```

Now, put a `<div/>` element in the view
```html
...
<div id="pesdk"  style="width: 1024px; height: 768px;">
...
```

Switch between React- and DesktopUI#

In order to use the DesktopUI instead of the ReactUI, you need to make some changes to your setup. Replace in point ...

//= require PhotoEditorSDK.UI.ReactUI.min with //= require PhotoEditorSDK.UI.DesktopUI.min
*= require PhotoEditorSDK.UI.ReactUI.min with *= require PhotoEditorSDK.UI.DesktopUI.min
var editor = new PhotoEditorSDK.UI.ReactUI with var editor = new PhotoEditorSDK.UI.DesktopUI in home.js