<![CDATA[image4io Documentation]]>http://image4.io/en/documentation/http://image4.io/en/documentation/favicon.pngimage4io Documentationhttp://image4.io/en/documentation/Ghost 2.21Fri, 10 Jul 2020 11:37:43 GMT60<![CDATA[Migrating Your Images From AWS S3]]>This tutorial explains how to migrate your images from your AWS S3 bucket to image4io.

image4io-documentation-migration

After logging in to the console, to start migration from an S3 Bucket to image4io; first click on the Migrations button at the end of the navigation bar.

image4io-documentation-migration

In the migration page you will see

]]>
http://image4.io/en/documentation/migrating-your-files-from-aws-s3/5e95aca9d4196171649e5f26Tue, 14 Apr 2020 14:40:36 GMTThis tutorial explains how to migrate your images from your AWS S3 bucket to image4io.

image4io-documentation-migration

After logging in to the console, to start migration from an S3 Bucket to image4io; first click on the Migrations button at the end of the navigation bar.

image4io-documentation-migration

In the migration page you will see the migration options.  Click on 'Start Migration' button which is under the 'Migrate From AWS S3' header.

image4io-documentation-migration

In Step 1, you need to fill in the fields with your AWS credentials. You should enter your AWS Api Key, Api Secret, Bucket Name and region. After filling in the fields click 'Test AWS Credentials' button. If your variables are approved, you can now click 'Next' for the next step. If not, you must review your information.

image4io-documentation-migration

In Step 2, you can enter a 'Target Path' which is the name of the folder you want to see the images you will migrate in. If you want to keep your image names as they are in your bucket, you can check the 'Use original file name from AWS S3' box. Click 'Next' for the next step.

image4io-documentation-migration

In Step 3, In order to start migration you need to add at least one payment method. Click 'Add New Payment Method' button to add your card information. You will NOT be charged in this step. This is for upgrading your subscription automatically ONLY IF the migration causes an excess of usage over your account plan limits. See image4io pricing.

image4io-documentation-migration

Fill the fields with the credit card information that you want to add to the image4io payment methods. Click 'I agree with the Terms & Conditions' button, then click 'Add Card'.

image4io-documentation-migration

Then, you will see a screen that your card information has been confirmed. Click 'Next' to go to Step 4.

image4io-documentation-migration

In Step 4, you will see all of the information you provided. Review them and click 'Start Migration' to start migration.

image4io-documentation-migration

Then, you will see a screen where you can see your migration status. Wait a few minutes and refresh this page to see latest status of your migration.

image4io-documentation-migration

When you see the Status as 'Done', it means migration is finished.

image4io-documentation-migration

To check your folder, click on the Storage tab which is in the middle of the navigation bar and then click on the storage manager.

image4io-documentation-migration

You can see your folder under the 'Folders' tab!

]]>
<![CDATA[Creating Purge Request]]>In this tutorial, you will learn how to create a purge request from the console. To explain the purge cache:
Clear the cached files to force CloudFlare to get a new version of this server from your web server. You can clean your pictures by selecting them.
For example, you

]]>
http://image4.io/en/documentation/creating-purge-request/5e85fa5ad4196171649e5e9bThu, 02 Apr 2020 14:57:07 GMTIn this tutorial, you will learn how to create a purge request from the console. To explain the purge cache:
Clear the cached files to force CloudFlare to get a new version of this server from your web server. You can clean your pictures by selecting them.
For example, you uploaded an image you previously named 'test.jpg' to the console and then deleted it. When you want to upload a new, different image and if the new image you want to upload is named 'test.jpg', the previous image will be shown to you because the image you have previously uploaded to the console is cached. You should create a purge request to prevent this situation.

image4io-documentation-purgerequest

For creating a purge request: first, click on the Storage tab which is in the middle of the navigation bar and then click on the storage manager.

image4io-documentation-purgerequest

Scroll down to see your images. Look at the name of the image or folder that you want to purge from CDN cache, then click 'Create Purge Request' which is under the Functions tab.

image4io-documentation-purgerequest

Enter the path/to/image or path/to/folder/ here and click 'Create Request'.

image4io-documentation-purgerequest

To check the state of your purge request, go to the top of the page and click 'Storage' again from the navigation bar. Then click on the 'Purge' button.

image4io-documentation-purgerequest

Here, you can see the status of your purge request.

]]>
<![CDATA[Uploading Image via Console]]>In this tutorial, you will learn how to upload an image via console.

image4io-documentation-uploadimage

For uploading an image via console; first, click on the Storage tab which is in the middle of the navigation bar and then click on the storage manager.

image4io-documentation-uploadimage

Under the File Manager tab, at the top of

]]>
http://image4.io/en/documentation/uploading-image-via-console/5e85c6eed4196171649e5e64Thu, 02 Apr 2020 13:12:59 GMTIn this tutorial, you will learn how to upload an image via console.

image4io-documentation-uploadimage

For uploading an image via console; first, click on the Storage tab which is in the middle of the navigation bar and then click on the storage manager.

image4io-documentation-uploadimage

Under the File Manager tab, at the top of the page, you will see an area where you can select or drag your files. You can drag the image you want to upload here or select it from your computer by clicking on it. Also, you can only upload images in 4 formats which are jpg-bmp-png-gif-webp.

image4io-documentation-uploadimage

After clicking, you can select the image you want to upload from your computer.

image4io-documentation-uploadimage

Scroll down to see your image under the Images tab.

]]>
<![CDATA[Rename Image]]>In this tutorial, you will learn how to rename an image from the console.

image4io-documentation-renameimage

For rename an image; first, click on the Storage tab which is in the middle of the navigation bar and then click on the storage manager.

image4io-documentation-renameimage

Scroll down to see your images under the 'Images' tab.

]]>
http://image4.io/en/documentation/rename-file/5e84b21f8718bb5f9681009dThu, 02 Apr 2020 09:45:16 GMTIn this tutorial, you will learn how to rename an image from the console.

image4io-documentation-renameimage

For rename an image; first, click on the Storage tab which is in the middle of the navigation bar and then click on the storage manager.

image4io-documentation-renameimage

Scroll down to see your images under the 'Images' tab. Then select the image that you want to change its name by clicking on it.

image4io-documentation-renameimage

After selecting the image, click on the 'Rename' button, which is the third button from the beginning, in the bar under the Image tab.

image4io-documentation-renameimage

A small window will open up. Enter the new name you want to give your image here. Then click 'Update'.

]]>
<![CDATA[Adding New Folder]]>In this tutorial, you will learn how to create & add a new file from the console.

image4io-documentation-addingnewfolder

For add a new file; first, click on the Storage tab which is in the middle of the navigation bar and then click on the storage manager.

image4io-documentation-addingnewfolder

You will see the 'Folders' tab

]]>
http://image4.io/en/documentation/addingnewfolder/5e84a6cf191515580712ca27Wed, 01 Apr 2020 15:23:24 GMTIn this tutorial, you will learn how to create & add a new file from the console.

image4io-documentation-addingnewfolder

For add a new file; first, click on the Storage tab which is in the middle of the navigation bar and then click on the storage manager.

image4io-documentation-addingnewfolder

You will see the 'Folders' tab a little below the page. Click  the 'Add New Folder' button which is at the bottom of this tab.

image4io-documentation-addingnewfolder

A small window will open up. Enter the name you want to give to your new folder here. Then click 'Add New Folder'.

image4io-documentation-addingnewfolder

Your new folder is under the Folders tab !

]]>
<![CDATA[SEO Option]]>Image name can be changed to an SEO friendly name with o_seo option. Image name at the backend server or storage is not changed. Only the image name, which is visible to your visitors and search engines, is changed into what you have given in the dynamic URL. Since

]]>
http://image4.io/en/documentation/seo-option/5e732ae567497a2e752d6d16Thu, 19 Mar 2020 08:18:55 GMTImage name can be changed to an SEO friendly name with o_seo option. Image name at the backend server or storage is not changed. Only the image name, which is visible to your visitors and search engines, is changed into what you have given in the dynamic URL. Since search engines are interested in this name, your images will be more optimized and your website will be at the top of search results.

]]>
<![CDATA[Effects]]>Effects can be applied to the original image. This feature can be used to create a visual design. Sharpen and blur options available.

]]>
http://image4.io/en/documentation/effects/5e732aca67497a2e752d6d0eThu, 19 Mar 2020 08:18:31 GMTEffects can be applied to the original image. This feature can be used to create a visual design. Sharpen and blur options available.

]]>
<![CDATA[Image Transformation Options]]>Scale

Changes image height and width to given height and width values by scaling image. Keeping aspect ratio is not required. No image part is lost. All edges and corners of the original image are still visible on the new image. Takes either or both w and h. If only

]]>
http://image4.io/en/documentation/image-transformation-options/5e732a9767497a2e752d6d06Thu, 19 Mar 2020 08:17:47 GMTScale

Changes image height and width to given height and width values by scaling image. Keeping aspect ratio is not required. No image part is lost. All edges and corners of the original image are still visible on the new image. Takes either or both w and h. If only one parameter is specified, the resized image will adjust the other to keep the width-to-height ratio of the original image.

Fit

When current mode is set to fit with c_fit, URL scales down the image to fit it into a frame. Takes either or both w and h of the frame that image will fit into. If one is given, the other one will be calculated to keep the width-to-height ratio of the original image.

Crop

Removes unwanted outer areas by cutting the edges of the image. Can take x, y, w, h and g. W and h are for defining the cropped image's width and height. If only one parameter is specified, another will be calculated to keep the width-to-height ratio of the original image. X and y are for specifying the beginning coordinates (top left corner) of the cropped image. If only one of x and y is given the other is accepted as 0. The gravity parameter can be used instead of x and y to specify the position of the cropped image. Gravity parameters can take values like g_top or g_bot_left. If none of the x, y or g parameters are defined, the cropped image will take position at the center of the original image.

]]>
<![CDATA[Auto Format]]>image4io chooses the best format for your clients. Dynamically checks if their browsers support webp format and serves webp if they do. If their browser doesn't have webp support, image4io serves images with the original image's format.

]]>
http://image4.io/en/documentation/auto-format/5e732a6767497a2e752d6cfeThu, 19 Mar 2020 08:16:53 GMTimage4io chooses the best format for your clients. Dynamically checks if their browsers support webp format and serves webp if they do. If their browser doesn't have webp support, image4io serves images with the original image's format.

]]>
<![CDATA[Format]]>Jpeg, png and webp formats are supported formats. If no format value is specified, new image's format is same as the original one's. If f_auto is defined auto format feature is activated.

]]>
http://image4.io/en/documentation/format/5e732a4967497a2e752d6cf6Thu, 19 Mar 2020 08:16:21 GMTJpeg, png and webp formats are supported formats. If no format value is specified, new image's format is same as the original one's. If f_auto is defined auto format feature is activated.

]]>
<![CDATA[Signed Url]]>Signed Url provides you the ability to determine who can view your images and until when.
You can use it to lock folders that contain private images. Then you can allow specific clients to reach locked images within the time period you defined.
You specify that client with their IP

]]>
http://image4.io/en/documentation/signed-url/5e72885b67497a2e752d6cd4Wed, 18 Mar 2020 20:49:42 GMTSigned Url provides you the ability to determine who can view your images and until when.
You can use it to lock folders that contain private images. Then you can allow specific clients to reach locked images within the time period you defined.
You specify that client with their IP address.

After logging into image4io console, you can find Signed Url in Security tab.
You must be on our Business Plan to use Signed Url.
Follow these steps to lock your files with Signed Url:

1.  Login to image4io console

2.  Go to Security > Signed Url

3.  You will need your Signing Key for next step. In order to produce it, fill the bottom field with the path of folder that you want to lock (if multiple folders, write other ones after new line), enable Signed Url from top right
corner and click to "Save" button. Afterwards, your signing key will be produced. The specified folder is locked and outer access is blocked now. A token is required to reach images in that folder.

4.   Create your JSON object. JSON format must be like the following:
{
"client_ip":"123.123.123.123",
"protocol":"https",
"expire":"1609459200"
}
client_ip is the ip address of the allowed client.
protocol can be http or https
expire is last time that an allowed client can reach until. It is in epoch. Epoch (or Unix time or POSIX time or Unix timestamp) is the number of seconds that have elapsed since January 1, 1970.)

You can leave JSON values empty if you do not want to restrict access by that value. Note that at least one value must be given.
The token which is generated with JSON above, allows any one using any protocol can display image until 1 January 2021 00:00:00.

5.   Generate the token. Token is generated with using Blowfish chiper algorithm. To generate the token, encrypt your JSON with your signing key. JSON must be in string form. Your signing key is secret key:

There is a token generator in Signed Url page. That is for you to compare the token you generated.
Important: Tokens do not have to be identical. A different spacing or new line is going to change the token. But no problem, since we decrypt the token and get the JSON you encrypted, your token will also work.
If you use image4io SDK, the token that you generate will be the identical with token generator page in the console.

6.   Put the token to your image urls as the query parameter with the key of "token".

Final form of the url must be like:
`img/signedurltest/signed-url-token.png?token=3DF8326C46C656B87FF9615372CB12BC8EFBF5EC74AAA4C5096156DD79E2EC4EA2F06A18CE6188E7E318CA641F455877`

]]>
<![CDATA[Image Transformation Operations]]>Scale Mode | c_scale

If no current mod is selected (neighter c_scale, c_crop nor c_fit) current mod defaults to c_scale.

Dynamic URL below can be used to set image height as 300 pixel:

/img/h_300/demo-images/hummingbird.jpeg

There is no

]]>
http://image4.io/en/documentation/image-transformation-operations/5e7287d967497a2e752d6ccbWed, 18 Mar 2020 20:43:17 GMTScale Mode | c_scale

If no current mod is selected (neighter c_scale, c_crop nor c_fit) current mod defaults to c_scale.

Dynamic URL below can be used to set image height as 300 pixel:

/img/h_300/demo-images/hummingbird.jpeg

There is no w parameter in the dynamic URL, but width value is automatically calculated using h to keep aspect ratio of the original image.

Fit Mode | c_fit

To fit the image into a 300x300 frame, dynamic URL below can be used:

/img/c_fit,h_300/demo-images/hummingbird.jpeg

Crop Mode | c_crop

Dynamic URL below can be used to discard the unwanted parts of the image and show the wanted part.

/img/demo-images/hummingbird.jpeg

G parameter can take values of g_top, g_right, g_bottom, g_left, g_top_left, g_top_right, g_bot_right, g_bot_left g_center.

If no valid region is entered, it defaults to center.

]]>
<![CDATA[Quality]]>Specifies the encoding quality of the image. Since it's value is percentage, it must be in the interval of 0 - 100. (If undefined, defaults to 90%). If quality is less than 100% on jpeg and webp formats there is lossy compression, And on png, it is compression rate since

]]>
http://image4.io/en/documentation/quality/5e72863b67497a2e752d6c95Wed, 18 Mar 2020 20:36:17 GMTSpecifies the encoding quality of the image. Since it's value is percentage, it must be in the interval of 0 - 100. (If undefined, defaults to 90%). If quality is less than 100% on jpeg and webp formats there is lossy compression, And on png, it is compression rate since there is no lossy compression with png. Quality can be lowered if more economic images are needed.

]]>
<![CDATA[Dynamic URL Structure]]>https://cdn.image4.io/{cloud-name}/{operations}[optional]/{image-folder-and-name}

Url structure is shown above.

cloud-name: Your account name, a unique identifier.

operations[Optional]: Operations that will be applied to image is given in here.

image-folder-and-name: path/to/file.

]]>
http://image4.io/en/documentation/dynamic-url-structure/5e72860467497a2e752d6c89Wed, 18 Mar 2020 20:35:31 GMThttps://cdn.image4.io/{cloud-name}/{operations}[optional]/{image-folder-and-name}

Url structure is shown above.

cloud-name: Your account name, a unique identifier.

operations[Optional]: Operations that will be applied to image is given in here.

image-folder-and-name: path/to/file.

]]>
<![CDATA[Quick Example]]>Following dynamic URL, crops the original image to a 400x320 image, sets gravity to bottom right corner to cut out the Hibiscus flower, and takes the hummingbird to center. Also activates auto format. So, if your browser supports webp format, you see a webp image. If it doesn't, new image's

]]>
http://image4.io/en/documentation/quick-example/5e7285e167497a2e752d6c82Wed, 18 Mar 2020 20:35:06 GMTFollowing dynamic URL, crops the original image to a 400x320 image, sets gravity to bottom right corner to cut out the Hibiscus flower, and takes the hummingbird to center. Also activates auto format. So, if your browser supports webp format, you see a webp image. If it doesn't, new image's format will be same as the original one's format which is jpeg for this image

/img/demo-images/hummingbird.jpeg

/img,f_auto/demo-images/hummingbird.jpeg

]]>