How to Make Responsive Images with Filestack

Why Do We Need Responsive Images?

In few words, visual content is crucial to growing any business.

Images are the predominant medium to deliver content on web pages so designers and developers spend a lot of time working on images, content and related challenges.

The biggest challenge we usually face is to provide the same engaging content no matter the device used to access it. A desktop screen allows for more visual content while a mobile phone with limited screen requires a different approach to keep the same user experience. This led to what nowadays is called responsive web design, the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Responsive images are images that work well on devices with widely differing screen sizes and resolutions to assure the same user experience throughout devices.

Do you want your website to look cool as ever no matter the device?

The great news is that you don’t need to become a HTML/CSS expert as Filestack can make images responsive with no hassle.

So don’t miss the next part of the tutorial where I will demonstrate how to use Filestack’s JavaScript API to make your images responsive – which is much faster and easier, and guarantees exceptional appearance.

Let’s go!

Responsive Images with Filestack

Luckily there is no need to be CSS experts to make your website images responsive, you can start today thanks to Filestack.

As many know Filestack is not just a file uploader but it also helps users to easily enhance and manipulate images. Thus, it offers fully responsive images through its JavaScript library.

The trick consists on passing the image source to a new attribute data-fp-src so that Filestack API will make it responsive for you.

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

Its behavior can be further customized through IMG tag parameters:

• data-fp-apikey: The API key for your Filestack application.
• data-fp-on-resize: Defines whether the image should be reloaded on screen size change. The default setting is data-fp-on-resize="all".
• data-fp-pixel-round: Resize images by rounding to the nearest number of pixels.
• data-fp-policy: The security policy for the given application.
• data-fp-signature: The security signature for the given application.

Do you remember Imagestack?

In our article “How to Create an Image Gallery with Filestack” we showed you how to create a beautiful image gallery with Filestack and pick.

Throughout the tutorial we go into great detail on how to customize the image uploader in a React/Node.js app but we missed a crucial part:

The gallery and images look great no matter the device and we achieved this by integrating Filestack responsive images.

We created a component Image in charge to render the single image, the description and related buttons:

class Image extends React.Component {
  render() {
    return (
      <div className="col-md-4">
        <div className="thumbnail">
          /* data-fp-src makes the image responsive */
          <img data-fp-src={this.props.url} className="img-rounded" />
        </div>
        <p>{this.props.caption}</p>
        <div className="btn-group btn-group-sm pull-right" role="group" aria-label="media-stats">
          <button type="button" className="btn btn-default">
            <i className="glyphicon glyphicon-heart"></i>        
            {this.props.like}
         </button>
         <button type="button" className="btn btn-default">
           <i className="glyphicon glyphicon-share"></i> Share
         </button>
       </div>
     </div>
   );
 }
}

 

Notice data-fp-src in the img tag, this is exactly what we need to make the images responsive.

 

Shortcut Options for Responsive Images

Passing the parameters such as data-fp-key data-fp-on-resize to each image in your website can be a little inconvenient as the number of HTML attributes rapidly increases, but thanks to JavaScript you can set them globally:

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

Finally, Filestack further provides a convenient method responsive that can trigger the full lookup of all of the images referenced by data-fp-src in your responsive tags or a subset:

• Full lookup

filepicker.responsive()

• Subset

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

And thats all!