Resizing and cropping images using Cloudinary

ACF supports advanced image handling via an integration with Cloudinary to perform various tasks such as resizing and cropping images as well some more exotic options such as multiple image overlays, dynamic text overlay, image rotation and more.

Integration is handled directly in Liquid, depending on your current use of the Media Upload field type:

Syntax v1

For images uploaded using the "legacy" Media v1 type, you can use this Liquid syntax:

<img src="//images.accentuate.io?c_options=w_200,h_200&image={{ product.metafields.accentuate.my_image }}"/>

Syntax v2

This syntax applies to images uploaded using the latest - and recommended - Media v2:

{% for my_image in product.metafields.accentuate.my_images | where: "media_type", "image" %}
  <img src="{{ my_image.cloudinary_src | append: 'w_200,h_200' }}" alt="{{ my_image.alt }}"/>
{% endfor %}

The available Cloudinary options are the same across the two syntaxes above.

Note: Multiple Cloudinary options can be combined by separating them with commas. Some options are meant to work together and some are not meant to work together, so take care when combining them.

Also, when authoring options for your Cloudinary usage, please take note that ACF's default optimization when fetching images via cdn.accentuate.io is turned off, leaving you in control of what should be done. You might find some inspiration in this Cloudinary article

Note: As of June 19, 2020 the f_auto option will be ignored. When using f_auto, we are unable to cache the images being returned from Cloudinary, which puts an unreasonable burden on the bandwidth being used. The performance advantage of using f_auto should be offset by having the image served directly from ACF's cache with more than 200 physical locations worldwide.

A workaround is to use a Cloudinary account of your own while still fetching the image from ACF's CDN. Or, because it is still an option to use f_webp to request a WEBP image, you can use <picture> and <source> tags in your HTML to have your visitor's browser choose between formats delivered from Cloudinary. More info here (search for "webp")

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us