Many times, we have different images with varying characteristics such as width, height, aspect ratio, metadata, etc. Let us learn how we can dynamically only manipulate images that satisfy custom conditions without additional code logic.

Check the sandbox demo on Codesandbox.

You can also get the project GitHub repo using Github.

For this walkthrough, we will be building on Nuxt.Js. It is an excellent Vue.Js framework built for convenience and performance.

To proceed, ensure you have either Yarn or NPM v5.2+/v6.1+ installed. Open your preferred working directory and run the following command.

yarn create nuxt-app nuxtjs-conditional-image-transformations
# OR
npx create-nuxt-app nuxtjs-conditional-image-transformations
# OR
npm init nuxt-app nuxtjs-conditional-image-transformations
Code language: PHP (php)

This will result in a set of setup questions. Here are our recommended settings.

This will allow the installer to customize the app to our specifications. Once this is done we can enter and run the app on localhost:3000

cd nuxtjs-conditional-image-transformations

yarn dev
# OR
npm run dev
Code language: PHP (php)

Implementing conditional image transformations is a huge undertaking programmatically. To do it easily, we will be using a media management platform called Cloudinary. If you do not have an account, feel free to register one here. Once logged in, proceed to the media library and create a folder called nuxtjs-conditional-image-transformations. Within the folder, upload the following files:

• pexels-micheilecom-_-visual-stories-11573079.jpg
• pexels-anastasiia-goncharova-11659832.jpg
• pexels-megan-ruth-11494641.jpg
• pexels-danil-lysov-11741441.jpg

These are the images we will transform. You should have a resultant folder similar to this one:

Now that our Cloudinary account is set up and our files are uploaded, let us install the recommended Nuxt.Js plugin. Run the following command in the project folder.

yarn add @nuxtjs/cloudinary
# OR
npm install @nuxtjs/cloudinary
Code language: CSS (css)

Once the installation is complete, let’s add the plugin to the modules section of the nuxt.config.js file.

// nuxt.config.js
export default {
    ...
    modules: [
        '@nuxtjs/cloudinary'
    ],
  ...
}
Code language: JavaScript (javascript)

We additionally want to link our plugin to our Cloudinary account. We do this by configuring the cloud-name which can be obtained from the Cloudinary dashboard.

First, let’s create a .env file. This is the file that will house our environmental variables, and values we do not want to be stored in our codebase.

<!-- .env -->
NUXT_ENV_CLOUDINARY_CLOUD_NAME=<your-cloudinary-cloud-name>
Code language: HTML, XML (xml)

We can now reference the value above in our codebase. Let us create a cloudinary section in the nuxt.config.js file to configure the plugin.

// nuxt.config.js
export default {
    ...
    cloudinary: {
        cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
        useComponent: true
    }
}
Code language: JavaScript (javascript)

First and foremost, let us load our images into the state. We will add both the Cloudinary publicId as well as the credits to the sources.

// pages/index.vue
<script>
export default {
  data(){
    return {
      images: [
        {
          publicId: "nuxtjs-conditional-image-transformations/pexels-micheilecom-_-visual-stories-11573079.jpg",
          credit:"Photo by micheile.com || visual stories from Pexels"
        },
        {
          publicId: "nuxtjs-conditional-image-transformations/pexels-anastasiia-goncharova-11659832.jpg",
          credit:"Photo by Danil Lysov from Pexels"
        },
        {
          publicId: "nuxtjs-conditional-image-transformations/pexels-megan-ruth-11494641.jpg",
          credit:"Photo by Anastasiia Goncharova from Pexels"
        },
        {
          publicId: "nuxtjs-conditional-image-transformations/pexels-danil-lysov-11741441.jpg",
          credit:"Photo by Anastasiia Goncharova from Pexels"
        },
      ]
    }
  }
}
</script>
Code language: HTML, XML (xml)

We will have 4 different conditional transformations:

• Cartoonify if the initial width is greater than 4300px
• Oil paint if the initial height is greater than 3000px
• Pad horizontally or vertically if the aspect ratio is less or greater than 1.0
• If the face is detected, crop around it and apply a vignette

The syntax for adding conditional transformations in Vue.Js is by adding a CldTranformation component inside a CldImage component. We use an if, else, end syntax with the following structure to detail the conditions

<image characteristic>_<operator>_<image characteristic value>

Let us add the HTML to conditionally transform our images.

<template>
  <div>
    <h1>Conditional image transformations in Nuxt.Js</h1>
    <div v-for="(image,key) in images" :key="key">
      <h2>{{image.credit}}</h2>
      <div>
        <div>
          <cld-image :publicId="image.publicId">
            <cld-transformation height="500" crop="fit" />
            <cld-transformation if="iw_gt_4300" />
            <cld-transformation effect="cartoonify" />
            <cld-transformation if="end" />
          </cld-image>
          <p>Cartoonify if inital width is greater than 4300px</p>
        </div>
        <div>
          <cld-image :publicId="image.publicId">
            <cld-transformation height="500" crop="fit" />
            <cld-transformation if="ih_gt_3000" />
            <cld-transformation effect="oil_paint" />
            <cld-transformation if="end" />
          </cld-image>
          <p>Oil paint if inital height is greater than 3000px</p>
        </div>
        <div>
          <cld-image :publicId="image.publicId">
            <cld-transformation height="500" crop="fit" />
            <cld-transformation if="ar_lt_1.0" />
            <cld-transformation background="auto" height="800" width="400" crop="pad" />
            <cld-transformation if="else" />
            <cld-transformation background="auto" height="400" width="800" crop="pad" />
            <cld-transformation if="end" />
          </cld-image>
          <p>Pad horizontally or vertically if aspect ratio is less or greater than 1.0</p>
        </div>
        <div>
          <cld-image :publicId="image.publicId">
            <cld-transformation height="500" crop="fit" />
            <cld-transformation if="fc_gte_1" />
            <cld-transformation gravity="face" height="400" width="400" crop="thumb" />
            <cld-transformation effect="vignette" />
            <cld-transformation if="end" />
          </cld-image>
          <p></p>
        </div>
      </div>
    </div>
  </div>
</template>
Code language: HTML, XML (xml)

With the above codebase, we should now have an output similar to this one:

As visible, the different images have been transformed differently.

With the above knowledge, we are able to conditionally apply image transformations. To learn more about how conditional transformations work and the different supported image characteristics, feel free to read through the documentation. You can also refer to the image transformations documentation to learn more on how to manipulate your images.