New Gravity Support in Image Previews | Appwrite
Tags: opensource, webdev, flutter, android
Published: 2021-07-15 08:47:13

With new version of Appwrite, we have added gravity support while cropping image previews. So what is gravity? Cropping an image is essentially a process of taking smaller part of an image and the gravity species which portion of image to take. So, the gravity value of **top-left**, tells to take the top left portion of image while cropping. One thing to remember about cropping and gravity in Appwrite is that, Appwrite handles crop with gravity as a thumbnail cropping, that is first Appwrite will resize the image to the minimum possible size keeping the aspect ratio intact and then consider the gravity while cropping to the exact size specified. Also, the default gravity is `center` so your existing code will not break.

While using rest params, you can simply pass `gravity` param and value which can be one of **top**, **top-left**, **top-right**, **left**, **right**, **bottom**, **bottom-left** and **bottom-right**

## 🖨️ Example Output

Let's look at some example image output with crop and gravity.

First, here is the original image, which is 478x500px in size.

![Original](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm92zy2hg1ae6tgsx99a.jpg)
 

| 50x200px top-left | 50x200px top-right | 150x200px center |
| ----------------- | -------------- | ----------------- |
| ![top-left](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4fhymhy3to0nwlkuccb.jpg) | ![top-right](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip5ylpoj4h32s9rv0atr.jpg) | ![Center](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgwn7rgzj5x9jah92gcs.jpg) |
 

If you are using our SDKs, you can pass the gravity parameter in **getFilePreview** method

## 🎯 Example Flutter

```dart
FutureBuilder<Uint8List>(
    future: storage.getFilePreview(fileId: 'fileId', width: 300, height: 500, gravity: 'top'),
    builder: (context, snapshot) {
    if (snapshot.hasData) {
        return Image.memory(snapshot.data!);
    }
    if (snapshot.hasError) {
        if (snapshot.error is AppwriteException) {
            print((snapshot.error as AppwriteException).message);
        }
        print(snapshot.error);
    }
        return CircularProgressIndicator();
    },
),
```

## 🕸️ Example Web

```html
<script>
    let sdk = new Appwrite();
    sdk
        .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
        .setProject('5df5acd0d48c2'); // Your project ID

    let result = sdk.storage.getFilePreview('[FILE_ID]', 300, 500, 'top');
    document.getElementById('preview').src = result;
</script>
<img src="#" id="preview">
```

## 🤖 Example Android


```kotlin
// ... Imports 
class X : Fragment() {
    private lateinit var binding: FragmentXBinding
    
    override fun onCreateView(
        inflater: LayoutInflater ,
        container: ViewGroup? ,
        savedInstanceState: Bundle?
    ): View {
        binding = DataBindingUtil.inflate(
            inflater,
            R.layout.fragment_x,
            container,
            false
        )
        binding.lifecycleOwner = viewLifecycleOwner
        
        val storage = Storage(Client.client)
        GlobalScope.launch(Dispatchers.Main) {
            val result = storage.getFilePreview(
                fileId = "[FILE_ID]",
                gravity = "top-left",
                width = 100,
                height = 50
            )
            val image = BitmapFactory.decodeStream(result.body!!.byteStream())
            binding.image.setImageBitmap(image)
        }
        return binding.root
    }
}
```

## Learn More

Appwrite has many services and tools to allow you to build applications in a much more productive and secure way. You can use the following resources to learn more about Appwrite and how to leverage it in building your next web and mobile project:

- 📜 [Appwrite Docs](https://appwrite.io/docs)
- 💬 [Discord Community](https://appwrite.io/discord)

Don't forget to join the [Appwrite Discord community](https://appwrite.io/discord), where you can learn more about Appwrite, get the latest updates, and get light-speed help with any question you might have.