Develop with ICP

How to use Image Content Provider functionality in your plugin

Getting started

ICP gives you methods to use in your plugin to be able to build image sources by passing image identifier.

ICP register it's own methods with Dashboard Actions

You can use any of these actions in your plugin.

Available actions

ID	Descriptions
com.naviga.icp:getInstance	An action returns the instance of @plugin_name with ImageProvider methods.
com.naviga.icp:getImageSrc	An action to build image src with requested identifier and provider.

With getInstance action you will get class that has a main function:

• getImageProvider

Depending on the provider name you pass from the config to getImageProvider() you will get back one of two classes Imengine or Imgix

Both of them has a main function that will build your image url called getImageSrc()

The getImageSrc action is basically splitted method from ImageProviderHandler instance that you get from getImageSrc action.

An example to how to get ICP instance

In your plugin you can import useAction from Dashboard, so you can "import" ICP actions to your plugin.

Hook component

import { useAction } from 'Dashboard'
import { useRef, useEffect } from 'react'

const MyAwesomeComponent = props => {
    const ICP = useRef()
    
    useEffect(() => {
        const getInstance = useAction('com.naviga.icp:getInstance')
        const Instance = getInstance()
        const handler = new Instance()
        ICP.current = handler.getImageProvider('name-of-image-provider') // i.e. "imengine-provider" from example config
    }, [])
    
    /**
        Now you can use ICP all around your plugin.
        In order to build an image src call:
        ICP.current.getImageSrc(ICP_FUNCTION, IMAGE_PARAMS)
        
        const imgSrc = ICP.current.getImageSrc('crop', {
            identifier: "123e4567-e89b-12d3-a456-426655440000",
            width: 400,
            height: 300,
            x: 20,
            y: 45	
        })
        
        imgSrc === https://domain/imengine/image.php?uuid=123e4567-e89b-12d3-a456-426655440000&type=preview&function=cropresize&width=400&height=300&x=20&y=45&crop_w=400&crop_h=300&q=80
    */
}

Class component

import { Component } from 'react'
import { useAction } from 'Dashboard'

class MyAwesomeComponent extends Component {
    constructor(props) {
        super(props)
        
        this.ICP = null
    }
    
    componentDidMount() {
        const getInstance = useAction('com.naviga.content-agent:getInstance')
        const Instance = getInstance()
        const handler = new Instance()
        
        this.ICP = handler.getImageProvider('name-of-image-provider') // i.e. "imengine-provider" from example config
    }
    
    /**
        Now you can use ICP all around your plugin.
        In order to build an image src call:
        this.ICP.getImageSrc(ICP_FUNCTION, IMAGE_PARAMS)
        
        const imgSrc = this.ICP.getImageSrc('crop', {
            identifier: "123e4567-e89b-12d3-a456-426655440000",
            width: 400,
            height: 300,
            x: 20,
            y: 45	
        })
        
        imgSrc === https://domain/imengine/image.php?uuid=123e4567-e89b-12d3-a456-426655440000&type=preview&function=cropresize&width=400&height=300&x=20&y=45&crop_w=400&crop_h=300&q=80
    */
}

Here we used com.naviga.icp:getInstance action to get and initiate our ICP instance

getImageSrc action works the same as accessing it from ICP.getImageProvider(PROVIDER_NAME).getImageSrc()

by passing the provider as first argument and the icp function as a second argument and the image params as a third argument