Skip to main content
You're viewing documentation for a previous version of this software.Switch to the latest stable version

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.

Logo

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#

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

    ...
    gem 'pesdk-html5-rails', :git => 'https://github.com/imgly/pesdk-ruby-gem-demo.git'
    ...
  2. Register javascript with the Rails asset pipeline. Open /assets/javascripts/application.js and insert the following lines

    ...
    //= require react.production.min
    //= require react-dom.production.min
    //= require PhotoEditorSDK.min
    //= require PhotoEditorSDK.UI.ReactUI.min
    ...
  3. 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 () {
      var license = 'license-string' // <- replace this with the content of your license file. The JSON-object needs to be in string format
    
      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 ...

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