Dynamic Image Transformation

In this guide, we'll explore how to leverage Xano's powerful dynamic image transformation capabilities to resize, reshape, and optimize images on the fly. Whether you're building a web or mobile application, being able to manipulate images dynamically can greatly enhance the user experience and improve performance. Let's dive in!

Understanding Dynamic Image Transformation

Xano's dynamic image transformation feature allows you to modify images in real-time through the business logic and API. This means you can format different image sizes and shapes by appending transformation templates to the image URL. These templates are predefined and can be found in Xano's documentation.

For example, if you have an image URL stored in your Xano data model, you can append ?tpl=small to the end of the URL to resize the image to a smaller size. Similarly, you can use templates like ?tpl=large or ?tpl=square to resize or reshape the image accordingly.

Step 1: Accessing the Image URL

Before we can transform an image, we need to access its URL from our Xano data model. Let's assume you have a table called "stuff" with a field named "image" that stores the image URL.

1. In your Xano project, navigate to the API endpoint where you want to retrieve the image URL.
2. Query the record from the "stuff" table using the appropriate API endpoint.
3. Copy the image URL from the response.

You can test the image URL by pasting it into your browser. This should display the original image.

Step 2: Appending the Transformation Template

Now that you have the image URL, you can append the desired transformation template to it. Here's how:

1. Add the ?tpl= parameter to the end of the image URL.
2. Specify the desired transformation template after the equal sign (e.g., ?tpl=small, ?tpl=large, ?tpl=square).

For example, if your image URL is https://example.com/image.jpg, appending ?tpl=small would result in https://example.com/image.jpg?tpl=small.

You can find the available transformation templates in Xano's documentation. Some common templates include:

• small: Resizes the image to a smaller size.
• medium: Resizes the image to a medium size.
• large: Resizes the image to a larger size.
• square: Reshapes the image to a square aspect ratio.
• original: Retrieves the original file type (useful for GIFs).

Step 3: Updating the Image URL Dynamically

While you can manually append the transformation template to the image URL, Xano also allows you to update the URL dynamically using the function stack. This is particularly useful when you need to transform multiple images or when the transformation template needs to be dynamic based on certain conditions.

1. In your Xano project, navigate to the business logic where you want to update the image URL.
2. Add an "Update Variable" action to your function stack.
3. Select the variable containing the image URL (e.g., stuff.image.url).
4. In the "Update to" field, use the concat filter to append the transformation template to the existing URL.

• For example: {{stuff.image.url}}?tpl=large

By using the concat filter, you can dynamically append the desired transformation template to the image URL.

Step 4: Handling Multiple Images (Optional)

If you need to transform multiple images at once, you'll need to incorporate a loop into your business logic. Here's how:

1. Query all records that contain images using the appropriate API endpoint.
2. Add a "For Each" loop to your function stack.
3. Inside the loop, add an "Update Variable" action to update the image URL for each item.
4. Use the concat filter with the desired transformation template, similar to Step 3.

By looping through each item and updating the image URL, you can transform multiple images simultaneously.

Step 5: Image Format and Optimization

Xano also allows you to optimize image formats for better performance. For example, you can change the image format from PNG to JPG, which typically has faster loading times.

To change the image format, simply append the desired file extension to the end of the URL after the transformation template:

https://example.com/image.png?tpl=large.jpg

This will ensure that the transformed image is served in JPG format, improving loading times.

Additionally, Xano recommends storing GIF images in their original format to preserve animation. You can use the ?tpl=original transformation template to retrieve the original GIF file.

Conclusion

Xano's dynamic image transformation feature is a powerful tool for optimizing and enhancing the user experience of your web and mobile applications. By following the steps outlined in this guide, you can resize, reshape, and optimize images on the fly, ensuring a seamless and efficient experience for your users.

Whether you're a no-code enthusiast, citizen developer, traditional developer, or part of a startup or small business, Xano's dynamic image transformation capabilities can streamline your development process and help you create high-quality applications more efficiently.

Remember to consult Xano's documentation for the latest updates and additional transformation options. Happy coding (or no-coding)!