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 Obtain Twitter App Details
How to Obtain Instagram Client ID
How to Obtain Unsplash Application
ID
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.
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.
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.
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.
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.
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…
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.
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.