Cloudinary Blog

Taking Cloudinary’s Magento Extension to the Next Level

Get More from Your Media with New Magento Extension

Having an e-commerce platform that both provides a seamless and satisfactory shopping experience, while also serving as a powerful back-office system is crucial to business success today.

As a leading e-commerce platform, Magento offers numerous essential features. Additionally, you can leverage its extensions, such as those for dedicated payments and advanced media management, for other purposes. Cloudinary, long a popular Magento extension, just released a new version with the following powerful features:

  • A complete digital-asset-management solution, available directly from the Magento UI
  • More extensive support for video in Magento 2
  • A richer, more flexible Product Gallery

Out With the Old, In With the New

In 2015, we launched version 1 of an extension for Magento, adding media optimization and on-the-fly transformations to the Magento world. That meant faster page loads, a richer experience, and higher conversion rates. We’ve continued to improve our extension and the latest update contains some great new Cloudinary capabilities.

Comprehensive Digital Asset Management Without Leaving Magento

The latest release of our Magento extension contains key capabilities for managing and organizing your digital assets. We’ve embedded our Media Library into Magento to make available our advanced-search feature; the option to tag, categorize and sort media assets into folders and collections; and collaboration through comments and sharing. Even though these capabilities have been available through Cloudinary for a while, you can now leverage them directly from Magento without switching context, saving time and boosting productivity.

Here’s the user interface of Cloudinary’s Media Library in Magento, annotated with explanations:

Annotated example of Media Library in Magento

Once you view an asset, you can get a summary, view and edit the metadata. Or, as shown below, see the analysis of the content and apply pre-configured transformations before inserting.

Analysis of media asset in Media Library

You can also apply your own changes and special effects by selecting transformations and then add your transformed assets from the Media Library UI:

Transform media asset in Media Library

Ultimately, along with the many transformations and optimizations you can apply, Cloudinary ensures that you get the most leverage from your media assets. It’s now even easier to tag, sort and manage your assets, with the help of AI and machine-learning tools, and all directly from within the Magento UI.

Product Pages to be Proud of

No matter how outstanding your products are, you must showcase them to consumers in an engaging manner as a springboard for sales. Our Product Gallery, which superbly demonstrates Cloudinary’s many image and video capabilities, can serve as a template for showing off your products in the most captivating way possible.

Customizing the Experience

The default styling, UI, and colors in the Cloudinary Product gallery are suggestions only. Here’s how the product gallery in the Cloudinary sample store looks by default:

Example of product gallery in Magento

For a richer experience, it’s easy to customize the look and feel to match your brand and the design of your product pages by following these three steps:

First, identify your theme colors, which are the leading elements of the design.

Customize theme colors

Second, configure the main viewer parameters for the gallery and choose the animations and behaviors of the UI.

Configure main viewer parameters

Third, set the carousel parameters to tailor the display of the images and videos in your carousel: size, and number of thumbnails, and so forth.

Set carousel parameters

See the Product Gallery Reference for details of the customization options. Take a look at this demo page too, which shows Cloudinary’s Product Gallery in action.

The example below demonstrates some customizations in the Cloudinary sample store’s product gallery. The gallery now matches our brand colors, we’ve moved the location of the thumbnails and changed the shape to be circular. We’ve also enabled a useful, eye-catching zoom feature on hover.

Example of customized product gallery in Magento

Targeting Your Transformations

You can transform and optimize either all, or a selection of your media assets with Cloudinary for online display. The processes are simple, intuitive, and fast.

Recall that, with the new Cloudinary extension, you can perform those tasks in Magento, for example, adding a “Sale” or “New” banner to the media asset with a certain tag by means of an overlay. Take the example below:

  • The first part of the transformation is to check if the image has the sale and in_stock tags.
  • If the tags exist, the next part applies the sale_icon image as an overlay.
  • The last part positions the overlay in the bottom right corner of the backpack image.

You could use this transformation across all your product images to ensure any in-stock sale items show the sale banner.

Example of adding sale banner

You can find more information about how to use conditional transformations in our documentation.

Keep in mind the flexibility of Cloudinary transformations: you can specify them for all assets, for specific products, or for individual assets, as you desire.

Bringing it to Life with Video

Cloudinary’s video capabilities bring product pages to life with fast loading and optimization, all managed by and delivered through Cloudinary. Product videos that load momentarily and that perform visual storytelling well are proven to increase engagement and raise conversion rates. In fact, 64% of customers are more likely to purchase after watching a product video.

See it for yourself; pull in your product videos to your product gallery on Cloudinary and transform them on our dynamic video platform. You’ll be amazed and impressed.

Here's an example product video for a car within the Cloudinary product gallery, using the same customizations we added before. We've also added a vignette effect to the video to adjust the look a little. With the new Cloudinary Magento extension you can easily transform your videos and add them directly to your own product gallery, just like you would with product images:

Note
Cloudinary’s video capabilities are only available for the Magento 2 extension.

Next Steps

Make the most of your media on Magento with the latest version of Cloudinary’s Magento extension, and deliver a superior shopping experience for your consumers. Simultaneously, your back-office team will be gratified by the efficient, time-savers for those no-brainer tasks. It’s a win-win all around.

Add the new extension from the Magento Marketplace. For details on the setup and features, see the related documentation.


Want to learn more about image editing?

Have a look at these articles:

Recent Blog Posts

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more