Duda’s Image Picker: More Than Meets the Eye
Duda’s new Image Picker is richer, more powerful and more flexible than before. Not only does it include millions of free images and GIFs, it also enables direct access to premium images from Shutterstock, and includes handy management tools like easy image renaming, folder creation, and more.
All of these changes aim at making it even easier for you to build gorgeous customized websites for your customers quickly.
The features you’ll find in the new Image Picker are designed for ease of use, but posed quite a few challenges in their construction. We’d like to tell you a bit about these challenges, and explain what we did in the background so that you could enjoy features such as infinite scrolling, speedy search, automatic resizing and more.
The Challenge Of Infinite Scrolling
When you look for an image in the new Image Picker, you’ll notice that you have many options to choose from. You may also notice that you don’t have to click Forwards or Backwards to see more images. You can just keep on scrolling.
This is known as infinite scrolling, and it’s a web-design technique that loads content continuously as you scroll. Not only does it eliminate the need for pagination, but it is a convenient way for users to consume huge amounts of information (for example, thousands upon thousands of images) with ease.
Infinite scrolling looks great but places a heavy load on a website. When it comes to showing thousands of images, for example, true infinite scrolling would require an immense amount of data to be loaded. As you can imagine, this would really slow a website down.
The challenge we faced, then, was to provide the sense of infinite scrolling without weighing down the website with data. We did this by mimicking the experience.
What we actually do is build the next page that you are going to see when you scroll, so we can show it as a scroll of the current page. As for the images that you have already seen, though you think they are at the top of the scroll, they have actually been removed from the view port.
As for the images that you have already seen, though you think they are at the top of the scroll, they have actually been removed from the view port.
To create this illusion, we built an indicator that shows you where you are in the scroll and enables you to go back to viewed images if you want. It took a week or two to develop, but we succeeded by removing the viewed images from the view port and pushing something else in their place so you have a sense of how far you’ve scrolled. The trick requires caching, which we do at our end so that you can retrieve the images instantly.
It took a week or two to develop, but we succeeded by removing the viewed images from the view port and pushing something else in their place so you have a sense of how far you’ve scrolled. The trick requires caching, which we do at our end so that you can retrieve the images instantly.
The trick requires caching, which we do at our end so that you can retrieve the images instantly.
Speedy Search: Not As Simple As It Looks
Another Image Picker feature designed to make your website building process faster and smoother is its speedy search. You can search for a term (for example, summer) and get results from a range of sources (including Duda’s library, Unsplash, Facebook, Google Plus and more) in a matter of moments.
To provide you with such a rich search, we’ve integrated several APIs, and to ensure that the speed of the search isn’t compromised by this richness, we set up the API call so that you don’t have to wait for every API to come through in order to receive all of the relevant images. Instead, images are loaded as they come.
Instead, images are loaded as they come.
If an API is stuck or unable to load relevant images, there’s no delay in what you receive. We just display the images from the APIs that have responded. This means your ability to pull images doesn’t depend on every single API working properly. If one or more APIs are slow or unstable, this doesn’t ruin the user experience, nor does it stop you from retrieving images from other APIs.
If one or more APIs are slow or unstable, this doesn’t ruin the user experience, nor does it stop you from retrieving images from other APIs.
We divide the process into Duda images, which are fastest, then Free images and Premium images. Every group follows its own logic in order to bring images. Nothing gets stuck because a single API won’t load.
React: For Consistency From A Through Z
Another challenge we faced was making the Image Picker consistent with the rest of the responsive website builder.
Consistency is important for creating an easy user experience, and we wanted to follow through with it in the Image Picker.
For example, in the website builder, when you open a widget, the editing panel opens to the right. We wanted the same experience in the Image Picker.
We applied this consistency throughout the Image Picker so that the same UI would be followed for the Quick View and Full View, for the tabs between filters, for the left panel tabs, and so on.
To do this, we designed the Image Picker in React using Central State Management. This is how we rebuilt the entire Duda website builder, so that every component is independent, and all components are managed in a single place. We use the MobX library for this. It is an increasingly popular, easy-to-use library that allows for one central model, one source of truth.
If we want to change something in the UI, we change it in the model, not the component. All the components observe the state and react to it. This enables us to build a complex model (like the Image Picker) using a slim state, hiding all the logic in the components instead of trying to synchronize them.
Adapting Every Image, Every Time
In addition to enabling you to choose images quickly, the Image Picker ensures that the images you add to your websites load quickly, so that your websites do too. In order to make this happen, every image that you upload or import is automatically multisized.
The moment you publish a site, we go through all of its images to detect the size of the visible area where the image will be displayed.
Depending on that, we serve the image in the most appropriate size. If we detect that an image is relatively small (for example, it’s a thumbnail image or a small image in a team bio), we use a smaller version of the image.
If the image is being used as a background image, we choose the larger version of the image, so that it looks as good as it can.
Also, for every image that you upload, access to the image is through the Amazon CDN. Amazon servers are located all over the world, so that website visitors everywhere receive the images in your website from their closest possible server.
Image Management Info: Adding Numbers
Easy image management is a key quality of the new Image Picker and something we developed to make it easier for professional website builders who have multiple staff working on a website to manage their images with ease.
A feature you may have noticed that supports this capability is the small (but significant) number that appears in the corner of images as they are moved or deleted.
This number aims to help you manage your images so that you know just how many you are moving at a time.
To create this image, we used HTML5 <canvas> which enables us to creates graphics on the fly. We draw the number in <canvas> because we can’t put an actual image here.
The number is drawn in real-time, the drawing goes to the API, and it’s displayed as you drag. Each and every time you select images, the number is redrawn and displayed.
All of this occurs behind the scenes, and with no detectable delay.
Just The Beginning
Another quality of the Image Picker is the fact that it is designed to be easily adapted to new functions and improvements.That’s how we added GIFs and premium images, and we plan on more improvements and upgrades in the future.
Tell us about new features and capabilities you’d like to see in the Image Picker, and we’ll do our very best to make them happen. The challenges are often greater than they seem at first glance, but the results are always worth it.