Make Awesome Visual Hacks
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.
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
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>
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>
- Face Thumbnail (circle, rotation)
- Special Effects and Artistic Filters
- Watermark and Text Overlays
Cloudinary is particularly effective when used for use-case specific image and video manipulations, such as for eCommerce Showcase applications.
React made Visual
Examples with React
- Apply Instagram-like Filters
- Build an Image Gallery
- Customize a Products Page
- Socialize Crowdsourced Videos
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.
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!