devmachine/ontheio-bundle

onthe.io image cloud API integration.

DevmachineOntheioBundle

, _(*1)

onthe.io image cloud API integration., _(*2)

2017 update

i.onthe.io service is no longer available for public use. Consider integrating another image cloud provider., _(*3)

Installation

Install this bundle using Composer. Add the following to your composer.json:, _(*4)

{
    "require": {
        "devmachine/ontheio-bundle": "~1.0"
    }
}

Register bundle in the kernel:, _(*5)

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = [
        // ...

        new Devmachine\Bundle\OntheioBundle\DevmachineOntheioBundle(),
        new Sensio\Bundle\BuzzBundle\SensioBuzzBundle(),
    ];
}

Update config:, _(*6)

devmachine_ontheio:
    image:
        key: "your-key"
        secret: "your-secret"

Example usage

class MyController extends Controller
{
    /**
     * Upload remote URL to the cloud.
     */
    public function uploadUrlAction(Request $request)
    {
        // Get URL from request.
        $url = $request->query->get('url');

        // Upload image using URL.
        $result = $this->get('devmachine_ontheio.client.image')->uploadByUrl($url);

        // Key from image API - you can save this in DB.
        $key = $result->getKey();

        // Width of uploaded image.
        $width = $result->getWidth();

        // Height of uploaded image.
        $height = $result->getHeight();

        // Check if same URL was uploaded before.
        $new = $result->isNew();

        // You can render hosted URLs with image helper.
        return $this->render('PathToTemplate.html.twig', [
            // Hosted URL of original image.
            'url' => $this->get('devmachine_ontheio.helper.image')->url($key),

            // Resize image into 200x150.
            'thumbnail_url' => $this->get('devmachine_ontheio.helper.image')->resizeUrl($key, 200, 150),

            // Crop image into 150x150 starting from (50, 50).
            'avatar_url' => $this->get('devmachine_ontheio.helper.image')->cropUrl($key, 150, 150, 50, 50),
        ]);
    }

    /**
     * Upload image from file i.e. convert local file to hosted image.
     */
    public function uploadFileAction()
    {
        // Assuming $filepath is set.
        $result = $this->get('devmachine_ontheio.client.image')->uploadByFile($filepath);
    }
}

Twig helper

{# PathToTemplate.html.twig #}

Original:  <img src="{{ key | devmachine_ontheio_image_url }}" alt=""><br>
Thumbnail: <img src="{{ key | devmachine_ontheio_image_url(200, 150) }}" alt=""><br>
Avatar:    <img src="{{ key | devmachine_ontheio_image_url(150, 150, 50, 50) }}" alt="">

Note

The API docs suggests you can rotate and delete images. Albeit integration for these features was implemented, I wasn't able to achieve described functionality. You can examine ImageClient::rotate() and ImageClient::delete() methods., _(*7)

Form integration

You can integrate image uploads right into your form., _(*8)

class MyType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('foo', 'text')
            ->add('bar', 'text')
            ->add('images', 'devmachine_ontheio_image_gallery')
        ;
    }
}

Bootstrap 3 theme:, _(*9)

, _(*10)

Only image uploads by URL is supported at the moment., _(*11)

Gallery form type assumes following Javascript and CSS code is present:, _(*12)

• Bootbox
• Magnific popup

Example bower.json:, _(*13)

{
    "dependencies": {
        "bootbox": "~4.4",
        "magnific-popup": "~1.0"
    }
}