Dashboard
Field Definitions
The Editor
Liquid Guides
Resize & crop images
ACF supports on-the-fly image transformations directly in Liquid for you to:
- Resize images to specified dimensions
- Perform content-aware padding
- Rotate or flip images
- Apply borders and/or rounded corners
- Crop images using face detection
- Adjust hue or color saturation
- Convert images to grayscale
- Apply sepia effect
- etc etc
The use of Cloudinary for ACF image transformations is included in your subscription
See the Cloudinary Cookbook for examples as well as details of the available Cloudinary transformation options.
The integration itself is handled in Liquid using a syntax that depends on your current use of the Media Upload field types. The below examples all pass "width" and "height" options to Cloudinary.
Syntax v1
For images uploaded using the "legacy" Media v1 type, you can use this Liquid syntax to pass an image through Cloudinary with applied options:
1
<img src="//cld.accentuate.io?options=w_200,h_200&image={{ product.metafields.accentuate.header_image }}"/>
Copied!
or alternatively this format:
1
<img src="{{ product.metafields.accentuate.header_image | replace: '/cdn','/cld' | append: '&options=w_200,h_200' }}"/>
Copied!
Syntax v2
This syntax applies to images uploaded using the latest - and recommended - Media v2 type:
1
{% for header_image in product.metafields.accentuate.header_images | where: "media_type", "image" %}
2
<img src="{{ header_image.cloudinary_src | append: 'w_200,h_200' }}" alt="{{ header_image.alt }}"/>
3
{% endfor %}
Copied!
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​
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 1,600 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 and f_avif to request a WEBP or AVIF image, you can use the <picture> tag in your HTML to have your visitor's browser choose between formats delivered from Cloudinary. More info here.
Last modified 11d ago