Cabin – React & Redux Example App – imgix
This is the 5th post for Cabin, the React & Redux Example App Tutorial series created by Stream. The final result of following this series is your own feature-rich, scalable social network app built with React and Redux! Visit getstream.io/cabin for an overview of all the tutorials, as well as a live demo. The source code can be found on the Stream GitHub repository for Cabin, and all blog posts can be found at their respective links below:
Here is what you will be learning in this post of the series:
- Getting Set Up
- Server Side
- Client Side
- Image Adjustments
- More Awesome Features
Getting Set Up
Have a look at the
api/config.js: Since we're uploading to S3 and not imgix directly, you will simply see an object for your S3 credentials. The cool thing is, imgix will keep in sync with our S3 bucket.
Photo Upload Process
Our photo upload process looks like:
- Upload to Amazon S3 via the knox client
- Add geocode information with the help of Mapbox
- Insert the information into our MySQL database
- Add to Algolia Search index
- Push to the appropriate Stream feeds
Take a look at the code for the S3 upload via knox - in
And that's the only code we need to handle our imgix integration on the server. imgix will handle the rest - keeping in sync with our S3 bucket.
If you thought our server-side setup was simple - it's even easier on the client. Our image manipulation happens right in our image
src tag inside of a React component. Before we take a dive into the React component, let's look at the
In the case of imgix, we aren't adding any API keys - just the base URL we will be referencing in our
PhotoItem React component. If you don't know your base URL - check it out on your Source page. Take a look at app/modules/components/PhotoList/PhotoItem.js:
One awesome thing about imgix is the Image API. As you can see from the code in the section above, we are making our image adjustments through the URL-based API:
Let's break this down, feature-by-feature:
autoparameter allows imgix to make certain types of adjustments and optimizations automatically.
autois set to
enhance, the image is adjusted using the distribution of highlights, midtones, and shadows across all three channels—red, green, and blue (RGB). Overall, the enhancement gives images a more vibrant appearance.
Image Size w=200 Sets the width to 200 pixels. You can also set size to a proportion of the original by using a range between 0.0 and 1.0. h=200 Sets the height to 200 pixels. You can also set size to a proportion of the original by using a range between 0.0 and 1.0. Resize Fit Mode**
fitparameter controls how the output image is fit to its target dimensions.
Resizes the image to fit within the width and height boundaries without cropping or distorting the image.
fmoutput format to convert the image to. Valid options are gif, jp2, jpg, json, jxr, pjpg, mp4, png, png8, png32, and webp.
Device Pixel Ratio
Control the output density of your image. The device pixel ratio (
dpr) is used to easily convert between device independent pixels and device pixels. This makes it possible to display images at the correct pixel density on a variety of devices such as Apple Retina displays and Android devices. You must specify a width, a height, or both for this parameter to work. The default is 1. The maximum value that can be set for dpr is 8.
More Awesome Image API Features
Imgix has a variety of functionality you can add to your app - that goes way beyond what we have done so far.
Want to incorporate Instagram-like filters into your application? It's as easy as making any image adjustment. Check out this great tutorial on dynamically blending images. Go ahead and open up the imgix Image API documentation to see what other cool things can be do on-the-fly with imgix. Need more convincing? Check out this case study.
Using imgix, we were able to setup an advanced image resizing and processing micro service in just a few hours. In the next post we’ll cover how we’re using Keen to add custom stats to Cabin.