![]() ![]() ![]() We also advocate open source, so if you’re interested in seeing what we have built for the community, you can check our list of open source projects.In this article, we will build an image gallery with Next.js. If you love modern web JavaScript technologies such as babel or webpack, you will find lots of opportunities to work closely with them and bring your ideas to life at trivago, so check out our open positions. If you struggle with some of the issues that we described throughout this article, this might just be the right solution for you. Take a look at the plugin at trivago/babel-plugin-cloudinary. ![]() I’m happy to let you know that we are releasing this to the open source community! I hope you found it somehow useful for your project use cases, and of course, we would also love to hear some feedback on the plugin and suggestions to improve it. This makes the lives of our developers easier since they don’t need to learn a new tool, or do any additional work to create images’ URLs. Offers a consistent approach to create URLs on the front-end, compliant with the Cloudinary API.Compiling URLs at build time decreases our JS footprint, consequently shortens the time that our users need to wait for trivago to load on their devices.This benefits our developers and users in the following ways: In the end, we shift from a solution where we give our clients the tools to build the images’ URLs to a solution where we give them the final images’ URLs. Original Twig template Compiled template import ` Happy users and happy developers Twig templates compiling specific function calls into a URL that would be assembled at build time. ![]() We started by building a plugin for Melody, our JS framework. Soon we realized that we needed to have the ability to apply transformations using this API in the front end as well, for a more dynamic approach. There are Cloudinary SDKs available for various programming languages, JavaScript being one of them. At trivago, we started by creating a backend layer that applies the transformations interacting with the Cloudinary API, this layer is mainly used for Server Side Rendering. Using Cloudinaryįor applications to consume Cloudinary, there is a specific API that allows us to apply all these neat transformations. That’s why we adopted Cloudinary, a cloud-based image and video management platform, that allows us to optimize our image processing and manipulate them on the fly ─ this maximizes each image’s potential to its specific use case regarding size, effects and quality for the best performance. We all want to see beautiful and good quality pictures so we can have a better feeling about the place where we are going to.ĭisplaying such a vast amount of images can be costly, especially when measuring the amount of data that mobile devices need to consume when using modern web applications. I’m happy to let you know that we are releasing trivago/babel-plugin-cloudinary to the open source community! Throughout this article I will explain to you the motivation behind this project and how it works in detail.Īt trivago, we use images to a large degree to enable our users to get a visual impression of the accommodations that they’re interested in. Compile Cloudinary URLs at build time so that you don't need to ship the cloudinary-sdk in your bundle! ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |