Cloudinary Fetch with Eleventy (Respecting Local Development)

Eleventy is used in conjunction with Cloudinary to enable seamless switching between local development and image processing in production environments. This document details a method that allows the use of local image URLs in a local development environment, while Cloudinary's fetch capability is used for image optimization and CDN services in a production environment.

The core is to take advantage of Cloudinary's fetch URL functionality and use its services without learning its API. Just add the Cloudinary URL prefix before the image URL, and Cloudinary is responsible for image optimization, resize, format conversion, and CDN services.

However, Cloudinary's fetch feature requires images to be located on the public Internet. In a local development environment, image URLs are usually local, not publicly accessible. Therefore, there is a need for a mechanism to use different image URLs in development and production environments.

Target:

• Local development environment: The image URL is /images/image.png
• Production environment: The image URL is https://res.cloudinary.com/css-tricks/image/fetch/w_1200,q_auto,f_auto/https://production-website.com/images/image.png

Using the Nunjucks template engine, you can build an image source like this:

 <code><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Cloudinary Fetch with Eleventy (Respecting Local Development)"></code>

The key is to set the global variables CLOUDINARY_PREFIX and FULLY_QUALIFIED_PRODUCTION_URL . RELATIVE_IMAGE_URL is written directly in the template.

Eleventy provides a convenient way to set global variables: place the .js file in the _data folder, and the contents of these files will be provided as variables to the template.

Using Node.js' process.env variable, different global variables can be set according to the environment (development or production). For example, set the environment variable PROD=true in a production environment and use the following logic in the _data/images.js file:

 module.exports = {
  imageLocation: process.env.PROD === 'true' ? 'https://coding-fonts.css-tricks.com' : '',
  urlPrefix: process.env.PROD === 'true' ? 'https://res.cloudinary.com/css-tricks/image/fetch/w_1600,q_auto,f_auto/' : ''
};

In the template, you can use {{images.imageLocation}} and {{images.urlPrefix}} to build an image source.

 <code><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174344311339212.png?x-oss-process=image/resize,p_40" class="lazy" alt="Cloudinary Fetch with Eleventy (Respecting Local Development)"></code>

In this way, in the local development environment, the image source will be the local relative path; in the production environment, the image source will be the fetch URL of Cloudinary.

Furthermore, the image size can be adjusted using Cloudinary's URL prefix function to realize responsive images.

Other methods:

Netlify redirection: You can use the Netlify redirection feature to achieve similar effects.

Eleventy Plugin: Some Eleventy plugins (such as eleventy-plugin-images-responsiver and eleventy-respimg ) can simplify the processing of responsive images.

This article summarizes a method to seamlessly switch local development and production environment image processing using Cloudinary in Eleventy, and introduces other feasible solutions. Which method to choose depends on the specific needs of the project and the developer's preferences.

The above is the detailed content of Cloudinary Fetch with Eleventy (Respecting Local Development). For more information, please follow other related articles on the PHP Chinese website!