Make Awesome Visual Hacks

Posted Jun 23, 2017

Make Awesome Visual Hacks

image alt text

If half of the brain’s processing power is involved in visual processing, there’s little surprise using images (and videos) make web and mobile apps so much more compelling to users!

When precious hackathon time and resources are needed for creativity, Cloudinary’s image and video easy-to-use and powerful APIs are the unfair advantage in a developer’s tool chest. From uploading and storing images, to manipulating and transforming them, to optimizing and delivering them reliably and efficiently to users’ devices, Cloudinary does it all.

Using Cloudinary’s features and simple syntax, in combination with React components, is a natural and powerful match, as will be demonstrated below.

Uploading Images

Depending on the hack you’re building, images have to come from somewhere, which would typically be users’ devices or cloud servers. Luckily, Cloudinary’s upload widget makes it easy while providing a slew of useful features such as interactive cropping. Recent enhancements to the widget even include uploading from popular social media sites

Manipulating Images

Cloudinary’s rich API can apply a large variety of dynamic image manipulations such as:

  • Resize and Crop

For React, Cloudinary provides several components, such as Image and Transformation which are used as follows (note transformations can be sequenced):

    <Image cloudName=”demo” publicId=”bike.jpg” alt=”Bike” />
        <Transformation height=”100” width=”120” crop=”fill” gravity=”west” />
        <Transformation fetch_format=”auto” />
    </Image>

image alt text

Or, like this one (you get the picture, err, image):

    <Image cloudName=”demo” publicId=”bike.jpg” alt=”Bike” />
        <Transformation height=”700” width=”800” x=”350” y=”300” crop=”crop” />
        <Transformation height=”100” width=”120” crop=”fill” />
        <Transformation quality=”40” />
    </Image>

image alt text

  • Face Thumbnail (circle, rotation)

image alt text

image alt text

  • Special Effects and Artistic Filters

image alt text

  • Watermark and Text Overlays

image alt text

Cloudinary is particularly effective when used for use-case specific image and video manipulations, such as for eCommerce Showcase applications.

React made Visual

Although Cloudinary API can be used anywhere in your JavaScript code (client or server), a React SDK was called for so we made a library that you can “npm install” and easily configure. Just remember that if for some reason the SDK doesn’t support what you’re trying to build, you can always use the URL/HTTP-based API directly.

Examples with React

image alt text

image alt text

image alt text

image alt text

Deliver with Speed

Happy users come from snappy hacks. An image is worth a 1000 words but that’s often felt in heavy page weight, which slows down performance. To make sure your app isn’t bogged down by unoptimized images, Cloudinary provides a test tool for web images with actionable recommendations. This way, you can rest assured your users experience the fastest page load times.

Visuals FTW

Using images (and videos) in your hack is a great way to tilt the winning odds in your favor, whether you’re building a rich media app or adding media features to your app functionality. To succeed and have fun in the process, Cloudinary’s rich APIs allows you to work smart and save precious time in building an impressive React app. Get started quickly with a free Cloudinary account, so you can upload, store, manipulate, optimize and deliver images and videos to your heart’s content immediately. Good luck and happy hacking!