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

5 Visual Engagement Tactics That Convert Online Buyers

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

Partner news: Cloudinary-Getty Images Integration

Supported by intelligent automation, Cloudinary serves as an effective conduit between media asset management and delivery so you can take maximum advantage of assets, compress workflows, and build and coordinate engaging and inspiring customer experiences. Through Cloudinary’s Digital Asset Management (DAM) solution, which employs the company’s innovative image and video APIs, creative and marketing teams can benefit from them, as well as from many AI-powered and automated capabilities. As a result, you can transform, optimize, and deliver media at scale on an intuitive UI.

Read more
Why Audio in Video Matters

Many content creators and consumers tend to regard video as visuals, but that’s only part of the experience. Immersive video content includes strong audio. Just like in a movie, the audio for video content comprises many components: the narrator or subjects, the background music that sets the mood and draws viewers in, sound effects, and so forth.

Read more

For Developers: the HTML <picture> Element Explained

By Amarachi Amaechi
For Developers: the HTML <picture> Element Explained

We all know the good ol', tireless <img> element, which has been a long-time go-to for inserting graphics into webpages. Time doesn’t stop, however, and neither do technological advancements. So, let’s get you up to speed with the element’s modern alternative: the <picture> element.

Read more