Responsive Images

With content being displayed across all sorts of devices, developers need a way to easily provide images in a format that fits the screen their customers are currently using. Filestack is happy to offer fully responsive images through the Javascript Filestack Library.

<img data-fp-src="https://d1wtqaffaaj63z.cloudfront.net/images/R0000403.jpg"/>

Click and drag from bottom right corner:

Loaded URL

Note: The Filestack Library must be included on the page in order for Responsive Images to work.

<script src="https://api.filestackapi.com/filestack.js"></script>
Responsive IMG Tag Parameters
Options that specify how the responsive image tags behave

Example Responsive Image Tag

<img data-fp-src="http://www.your-site.co/image.jpg" data-fp-apikey="YOUR_API_KEY" data-fp-pixel-round="10" data-fp-on-resize="none" fp-image-quality="80" data-fp-signature="SIGNATURE" data-fp-policy="POLICY" />
        

IMG Tag Parameters

Source URL
String
data-fp-src

The URL for the image that should be resized dynamically. This can be a Filestack URL or an external URL. This is the only mandatory attribute. data-fp-src="http://www.your-site.co/image.jpg"

API key
String
data-fp-apikey

The API key for your Filestack application. .data-fp-apikey="YourApikey"To set apikey globally use filepicker.setKey('YourApikey');

On Resize
String
data-fp-on-resize

Defines whether the image should be reloaded on screen size change. The default setting is data-fp-on-resize="all".

all Reload the image whether the screen size is increasing or decreasing. The image resolution will change based on all screen size changes.
up Reload the image only if the screen size is increasing. The image will never be resized to a smaller resolution than it currently is.
down Reload the image only if the screen size is decreasing. The image will never be resized to a larger resolution than it currently is.
none The image will not be reloaded if the screen size is changed. The image will resolution never be resized another resolution than it currently is.
Pixel Round
Integer
data-fp-pixel-round

Resize images by rounding to the nearest number of pixels. The default setting is data-fp-pixel-round="10"

Security Policy
String
data-fp-policy

The security policy for the given application. For example: data-fp-policy="eyJoYW5kbGUiOiJLVzlFSmhZdFM2eTQ4V2htMlM2RCIsImV4cGlyeSI6MTUwODE0MTUwNH0="

Security Signature
String
data-fp-signature

The security signature for the given application. For example: data-fp-signature="4098f262b9dba23e4766ce127353aaf4f37fde0fd726d164d944e031fd862c18"

Setting Options Globally

filepicker.setResponsiveOptions(options)
A global method that takes a JSON key-value object as its settings

It is also possible to set these settings globally with filepicker.setResponsiveOptions(options) where options is JSON key-value object. Global settings can be overwritten by inline attributes.

On Resize
String
onResize

Defines whether the image should be reloaded on screen size change. The default setting is onResize: 'all'.

all Reload the image whether the screen size is increasing or decreasing. The image resolution will change based on all screen size changes.
up Reload the image only if the screen size is increasing. The image will never be resized to a smaller resolution than it currently is.
down Reload the image only if the screen size is decreasing. The image will never be resized to a larger resolution than it currently is.
none The image will not be reloaded if the screen size is changed. The image will resolution never be resized another resolution than it currently is.
Pixel Round
Integer
pixelRound

Resize images by rounding to the nearest number of pixels. The default setting is pixelRound: 10

Security Policy
String
policy

The security policy for the given application. For example: policy: 'eyJoYW5kbGUiOiJLVzlFSmhZdFM2eTQ4V2htMlM2RCIsImV4cGlyeSI6MTUwODE0MTUwNH0='

Security Signature
String
signature

The security signature for the given application. For example: signature: '4098f262b9dba23e4766ce127353aaf4f37fde0fd726d164d944e031fd862c18'

Example of Setting Options Globally

<script>
  filepicker.setKey("your_api_key");
  filepicker.setResponsiveOptions(
  {
    onResize: 'down',
    pixelRound: 50
  });
</script>
<img data-fp-src="https://www.filestackapi.com/api/file/bFNaEmxTZmO5I7yLN2hN"/>
      

IMG Tag with Inline Parameters Examples

Note: In order for images to be resized on window change, you will need either a css style tag defined in percentages on your page like this:

<style>img { width : 100% }</style>
Or you can set the percentage as part of the image tag like this:
<img width="100%"/>

Responsive image with data-fp-on-resize="none"

The image size will be set upon window load and will not be resized when the browser window is changed. Image width is by default rounded to 10px.

<img data-fp-src="https://d1wtqaffaaj63z.cloudfront.net/images/sail.jpg" data-fp-on-resize="none" width="100%"/>
      

Loaded URL source

Responsive image with data-fp-on-resize="all" data-fp-pixel-round="100"

The image size will be set upon window load and will be updated whenever the window resizes and the image width will be rounded to 100px

<img data-fp-src="https://d1wtqaffaaj63z.cloudfront.net/images/butterfly.jpg" data-fp-pixel-round="100" data-fp-on-resize="all" width="100%"/>

Loaded URL source

Responsive image with data-fp-on-resize="up" data-fp-pixel-round="50"

The image size will be set upon window load and will be updated only if the window is enlarged and the image width will be rounded to 50px

<img data-fp-src="https://d1wtqaffaaj63z.cloudfront.net/images/fox_in_forest1.jpg" data-fp-pixel-round="50" data-fp-on-resize="up" width="100%"/>

Loaded URL source

Convenience methods for Responsive Images

1. By calling the following method you can trigger the full lookup of all of the images referenced by data-fp-src in your responsive tags:

filepicker.responsive()

2. Or by passing the DOM image element as a parameter to this method, only that specific image will be made responsive:

var img = document.querySelector('.my-img');
filepicker.responsive(img);