Comment on page
LibPixel supports two modes of fetching original images: pre-defined Image Sources or via a
srcquery string parameter.
Create Source after making an account
An Image Source is the perfect solution for when your images have a common base URL. For example, when your images are stored in an S3 bucket or on your dedicated web server.
There are two types of image sources: URL and S3.
The simplest way to use LibPixel is by providing a URL to where your images are located. It can be on a dedicated server, a public S3 storage account or any other source. It just needs to be publicly accessible.
To create a URL Image Source, press on Create Source and select the Type as URL. Now enter the Path and the Base URL and you are ready to start using LibPixel.
Adding a New URL Source
In the above image,
example.com/imagesis the route to our private server that hosts our image library. After creating this source, we can access all images that are stored in the
imagesvia LibPixel by using the Path defined earlier.
robor.libpx.com/imagesand from this Path you can get the images delivered faster and processed according to the parameters you define.
The S3 image source allows you to access private objects inside an S3 bucket, by entering the bucket name and the S3 region where the bucket is located.
You'll need to generate an IAM user for LibPixel with access to the S3 bucket you want to use. Please do not use your own IAM credentials for LibPixel, or those of a user with more permissions than the minimum required.
To be able to fetch your private objects, the only permission we need is
s3:GetObject. An example IAM Policy to allow
S3:GetObjecton a specific bucket (named
libpixel-uploadshere, which you must modify to your own bucket name) is:
If you wish to use the LibPixel Uploader library, you must choose "Enable uploads", and set an ACL (Access Control List) for uploaded images. Set to public-read to make uploaded files publicly accessible through S3, or private to make them accessible only through LibPixel.
For the uploads to work, we need the additional permissions
s3:PutObjectAcl. For example:
After creating the IAM user, the next and the final step is to create the source through LibPixel dashboard. If you are already logged in the LibPixel website then use this link to go to the Add New Source form.
Adding a new S3 Source
Provide the path at which your images will be available through LibPixel, insert the bucket name, access key ID and the secret access key to get started with serving images through LibPixel.
You can check Enable uploads, if you want to upload images to your bucket. But, make sure your IAM user has the appropriate permissions to upload to the bucket.
srcquery string parameter makes the most sense when images are fetched from multiple different domains. A good example is an application or website where users submit image URLs, which you wish to resize or modify before displaying them.
The value of the
encodeURIComponent). But, if you are using any of the LibPixel Client Libraries then you do not have to worry about it since they handle it automatically.
Suppose you want to process an image with the URL:
Normally, you would just include this URL in the
srctag of an
However, to use the services of LibPixel and process it before presentation, you can use the following code and process it as you like: