USER’S GUIDE

WP Image Studio Documentation

 

This WordPress plugin designed to basically replace the built-in WP image editor but, with more features. It offers a built-in image search function for royalty-free image search from popular sources. In addition, the plugin also allows you to edit the images using its built-in image editor.

Note for LITE Version: The LITE version of the plugin doesn’t support the built-in search function for the sites Flickr, Twitter and Instagram. Additionally, the image editor doesn’t offer these editing options: Crop, Insert Text, Coloring and a few Image Filters.

Contents

How to Use WP Image Studio. 4

Setting up API 6

How to Obtain Flickr API Key. 8

How to Obtain Pixabay API Key. 8

How to Obtain Twitter App Details. 9

How to Obtain Instagram Client ID.. 9

How to Obtain Unsplash Application ID.. 10

How to Insert an Image. 11

 

 

How to Use WP Image Studio

 

This guide assumes that you have already logged in to your WordPress admin area and that you have already installed and activated WP Image Studio. It is beyond the scope of this document to explain installing plugins, but basically you login, go to plugins and upload, then activate:

 

 

 

Once the plugin has been activated, hover your cursor over the Settings menu item.

 

 

 

Setting up API

 

Before you proceed adding images to your pages and posts, you should extend search results by integrating with popular image sites Flickr, Pixabay, Twitter and Instagram (full version of plugin only). Each of these sites require specific details to be entered into WP Image Studio Settings in order to be integrated to the search function. You can of course skip this but your search result will suffer.

 

 

How to Obtain Flickr API Key

 

1.   If you already have a Flickr account, login via https://www.flickr.com/signin/. If not, register through the following link https://www.flickr.com/signup.

2.   Once you have successfully logged in to your account, go to https://www.flickr.com/services/apps/create/apply.

3.   Choose whether you would like to apply for a Commercial or Non-commercial key. There is nothing wrong starting with non-commercial.

4.   Supply the fields with the appropriate details.

5.   Click the Submit button. After that, you will get access to your API key.

6.   Take note or copy the API information to the plugin’s settings.

 

 

How to Obtain Pixabay API Key

 

1.   Login or register to https://pixabay.com.

2.   Once you have successfully logged in to your account, go to https://pixabay.com/api/docs.

3.   Scroll down the page until you find Request Parameter Key where you can access your API key.

4.   Take note or copy the API information to the plugin’s settings.

 

 

 

How to Obtain Twitter App Details

 

1.   Login https://dev.twitter.com/apps/new.

2.   Enter your Application Name, Description and your website address. You should leave the callback URL empty.

3.   Accept the TOS, and solve the CAPTCHA (if presented with one). You will most likely have to physically scroll to bottom of “Developer Agreement” to activate the submit button.

4.   Submit the form by clicking the Create your Twitter Application

5.   Copy the consumer key (API key) and consumer secret from the screen into the plugin’s settings from “Keys and Access Tokens” tab.

6.   After creating your Twitter Application, you have to give the access to your Twitter Account to use this Application. To do this, click the Create my Access Token button (may seem like nothing happening, give it time).

7.   Click the OAuth Tool tab in your Twitter Application and copy those keys and paste in the plugin settings.

 

How to Obtain Instagram Client ID

 

1.   To obtain the Instagram client ID, make sure that you already have an Instagram account and login to the following link https://www.instagram.com/accounts/login.

2.   Next, register for a developer account with this link https://www.instagram.com/developer/register.

3.   After you have successfully registered for an Instagram developer’s account, fill in all the necessary data and click the Register button. You will then immediately get access to the client ID.

4.   Take note or copy the client ID to the plugin’s settings. Be careful with extra spaces since easy to happen…

 

 

 

How to Obtain Unsplash Application ID

 

1.   Login or register if you don’t have yet an account with https://unsplash.com.

2.   Next, register as a developer by going to this link: https://unsplash.com/developers/register.

3.   Then, go to https://unsplash.com/oauth/applications/new. Enter application name and URL back to your site. Make sure to check “Read photos access” checkbox.

4.   Click the Save button and you will automatically get your application ID.

5.   Take note or copy the application ID to the plugin’s settings.

 

Once you have all the details necessary for integration filled in to the designated fields, click Save Change button. Note: It is not necessary to integrate all these sites as you will still get image results from Wikimedia Common, Icon Finder and Open Clipart if you leave all these fields empty.


How to Insert an Image

 

1.   To insert an image to your page or post using WP Image Studio, click the WP Image Studio button from above the toolbar of the WordPress editor as shown in the image below:

 

 

IMPORTANT NOTE: Highly recommend you position your cursor exactly
where you want image to be placed before clicking the
“WP Image Studio” button above editor.

 

2.   A popup window similar to the image below will open where you can choose whether to search for an image from the different image providers that came in by default and the ones you integrated by clicking the Get Royalty Free Images button. Or, you can click the Upload Image button to upload an image from your computer or select from the ones you have previously uploaded in the media library.

 

 

 

3.   If you choose to “Get Royalty Free Images”, a new interface will load from the popup where you enter your keyword (by default “All Media Providers” is active, choose desired source to speed things up).

 

Click the search icon or press enter from the keyboard. Once a stream of results come in, you can filter it out by source using the dropdown in the top right portion of the window.

 

 

 

4.   Once you have selected an image:

 

a.   Click the Insert to Post to add the image to the post or page. You will be prompted to name the file next and click the Insert to Post button. Finally, to complete image insertion, supply the fields with appropriate details so that you can insert the image with its corresponding details and position in your post or page.

 

b.   Click Edit Image if you would like to edit the selected image first before inserting it to your page or post. You will be prompted to name the image file and once you do, click Save & Edit Image to proceed to the Image Editor window.

 

You have the option to Resize, Crop, add Text, Coloring, Filters and other editor Tools to further enhance the selected image. Should you not achieve the results you wanted, you can revert to the original image by clicking the Reset option of the editor.

 

Finally, click Save Image button first to save the modifications you made before hitting Insert Image button to add other pertinent details to the image including its position to where it will be inserted and whether you would like to embed a link to it.

 

5.   Finally, click Save and Insert button to finalize the insertion of the image to the page or post.