{"id":36369,"date":"2024-11-29T07:00:00","date_gmt":"2024-11-29T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36369"},"modified":"2025-11-27T11:45:49","modified_gmt":"2025-11-27T19:45:49","slug":"customize-midjourney-images-e-commerce","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce","title":{"rendered":"Customize Midjourney Images for Your E-commerce Website"},"content":{"rendered":"\n<p>A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success. AI-generated images, like those from <a href=\"https:\/\/www.midjourney.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Midjourney<\/a>, offer a scalable, cost-effective way to produce high-quality product images without the need for professional photoshoots.&nbsp;<\/p>\n\n\n\n<p>However, beautiful images alone aren\u2019t enough. They have to be optimized for web and mobile to ensure fast loading times and enhance overall performance. With <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/\" rel=\"noreferrer noopener\">Cloudinary<\/a>, you can dynamically resize, crop, and enhance your images, so they load quickly at high quality no matter what device your customer uses.<\/p>\n\n\n\n<p>This blog post will show you how to generate product images with Midjourney and customize, optimize, and deliver them with Cloudinary. The completed source code for this project is on <a target=\"_blank\" href=\"https:\/\/github.com\/ugwutotheeshoes\/midjourney-ecommerce-store\" rel=\"noreferrer noopener\">GitHub<\/a>.<\/p>\n\n\n\n<p>Before we get started, you\u2019ll need:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A free <a href=\"https:\/\/cloudinary.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary account<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.midjourney.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">A Midjourney Premium account<\/a> to generate AI images.&nbsp;<\/li>\n\n\n\n<li>A basic understanding of <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js<\/a> and <a href=\"https:\/\/www.typescriptlang.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Typescript<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Set Up the Project<\/h2>\n\n\n\n<p>Once you set up your Cloudinary and Midjourney Premium accounts, use the command below to start a Next.js app.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>npx create-next-app@latest<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>As you receive prompts to set up the app, select <strong>Typescript<\/strong> and <strong>App Router<\/strong>, which are essential for building this project. Then, run <code>npm run dev<\/code> to render a development server at <a href=\"https:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/localhost:3000\/<\/a> in your browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Generate and Upload the AI Images<\/h2>\n\n\n\n<p>For this project, you\u2019ll use Midjourney to create a background that enhances product images without replacing them entirely. Access Midjourney\u2019s Discord, use the \/imagine command to generate visuals related to your product category and save these images as background elements.<\/p>\n\n\n\n<p>Once you\u2019ve generated suitable images, upscale them in Midjourney to enhance quality, then download and upload them to Cloudinary. Check out this blog post on <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\" rel=\"noreferrer noopener\">how to upload images to Cloudinary<\/a>.<\/p>\n\n\n\n<p>In a production environment, image uploads can be done on a backend server and rendered in the application.<\/p>\n\n\n\n<p>After uploading the images, copy and store the public ID of each image somewhere safe. To copy the public ID, head to your <a target=\"_blank\" href=\"https:\/\/console.cloudinary.com\/console\/c-aa7c88771b3da6ee908385041ab96c\/media_library\/homepage\" rel=\"noreferrer noopener\">Cloudinary <\/a><a target=\"_blank\" href=\"https:\/\/console.cloudinary.com\/console\/c-aa7c88771b3da6ee908385041ab96c\/media_library\/homepage\" rel=\"noreferrer noopener\">M<\/a><a target=\"_blank\" href=\"https:\/\/console.cloudinary.com\/console\/c-aa7c88771b3da6ee908385041ab96c\/media_library\/homepage\" rel=\"noreferrer noopener\">edia <\/a><a target=\"_blank\" href=\"https:\/\/console.cloudinary.com\/console\/c-aa7c88771b3da6ee908385041ab96c\/media_library\/homepage\" rel=\"noreferrer noopener\">L<\/a><a target=\"_blank\" href=\"https:\/\/console.cloudinary.com\/console\/c-aa7c88771b3da6ee908385041ab96c\/media_library\/homepage\" rel=\"noreferrer noopener\">ibrary<\/a>, click the <strong>Assets<\/strong> tab, then copy the desired image public ID as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764272594\/blog-Customize_Midjourney_Images_for_Your_E-commerce_Website-1.png\" alt=\"The Media Library page with the Assets tab outlined in red\"\/><figcaption class=\"wp-element-caption\">Click the Asset tab<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764272597\/blog-Customize_Midjourney_Images_for_Your_E-commerce_Website-2.png\" alt=\"The Media Library with the image of &quot;cherrybg&quot; selected\"\/><figcaption class=\"wp-element-caption\">Copy the Public ID<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Create a Dataset<\/h2>\n\n\n\n<p>Next, you&#8217;ll create a dataset with product information such as <strong>name<\/strong>, <strong>price<\/strong>, and <strong>image URLs<\/strong>. Each image URL will be generated by combining the public IDs of the product and background images. This dataset will serve as a list of product items for the e-commerce store.<\/p>\n\n\n\n<p>Ideally, this product image data would come from your e-commerce system, a <a href=\"https:\/\/cloudinary.com\/guides\/digital-asset-management\/product-information-management\">product information management<\/a> (PIM) system, or any other tool you use to retrieve product images stored on Cloudinary.&nbsp;<\/p>\n\n\n\n<p>Navigate to the src\/app folder and create a new file called data.ts. In the data.ts file, copy and paste the code snippet below.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ src\/app\/data.ts<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> interface ProductDataProp {\n\n\u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: string;\n\n\u00a0 \u00a0 url: string;\n\n\u00a0 \u00a0 price: number;\n\n}\n\n<span class=\"hljs-keyword\">const<\/span> orangeImagesId = &#91;<span class=\"hljs-string\">\"Orange_Juice\"<\/span>, <span class=\"hljs-string\">\"orangebg.jpg\"<\/span> ]\n\n<span class=\"hljs-keyword\">const<\/span> mangoImagesId = &#91;<span class=\"hljs-string\">\"Mango_Juice\"<\/span>, <span class=\"hljs-string\">\"mangobg\"<\/span>]\n\n<span class=\"hljs-keyword\">const<\/span> cherryImagesId = &#91;<span class=\"hljs-string\">\"Cherry_Juice\"<\/span>, <span class=\"hljs-string\">\"cherrybg.jpg\"<\/span>]\n\n<span class=\"hljs-keyword\">const<\/span> appleImagesId = &#91;<span class=\"hljs-string\">\"Apple_Juice\"<\/span>, <span class=\"hljs-string\">\"applebg\"<\/span> ]\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> ProductData: ProductDataProp&#91;] = &#91;\n\n\u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Cherry Jubilee Juice\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`https:\/\/res.cloudinary.com\/&lt;YOUR_CLOUD_NAME&gt;\/image\/upload\/l_<span class=\"hljs-subst\">${cherryImagesId&#91;<span class=\"hljs-number\">0<\/span>]}<\/span>,w_250,h_1000,g_center\/v1730338860\/<span class=\"hljs-subst\">${cherryImagesId&#91;<span class=\"hljs-number\">1<\/span>]}<\/span>`<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">1.2<\/span>,\n\n\u00a0 \u00a0 },\n\n\u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Orange Jubilee Juice\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`https:\/\/res.cloudinary.com\/&lt;YOUR_CLOUD_NAME&gt;\/image\/upload\/l_<span class=\"hljs-subst\">${orangeImagesId&#91;<span class=\"hljs-number\">0<\/span>]}<\/span>,w_170,h_1000,g_center\/v1730336212\/<span class=\"hljs-subst\">${orangeImagesId&#91;<span class=\"hljs-number\">1<\/span>]}<\/span>`<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">2.1<\/span>,\n\n\u00a0 \u00a0 },\n\n\u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Apple Jubilee Juice\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`https:\/\/res.cloudinary.com\/&lt;YOUR_CLOUD_NAME&gt;\/image\/upload\/l_<span class=\"hljs-subst\">${appleImagesId&#91;<span class=\"hljs-number\">0<\/span>]}<\/span>,w_220,h_800,g_center\/v1730336212\/<span class=\"hljs-subst\">${appleImagesId&#91;<span class=\"hljs-number\">1<\/span>]}<\/span>`<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">2.5<\/span>,\n\n\u00a0 \u00a0 },\n\n\u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Mango Jubilee Juice\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`https:\/\/res.cloudinary.com\/&lt;YOUR_CLOUD_NAME&gt;\/image\/upload\/l_<span class=\"hljs-subst\">${mangoImagesId&#91;<span class=\"hljs-number\">0<\/span>]}<\/span>,w_205,h_1050,g_center\/v1730336212\/<span class=\"hljs-subst\">${mangoImagesId&#91;<span class=\"hljs-number\">1<\/span>]}<\/span>`<\/span>, \u00a0 \u00a0 \u00a0 \u00a0\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">3<\/span>,\n\n\u00a0 \u00a0 },\n\n]<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the code block above, the <code>ProductDataProp<\/code> interface defines each object&#8217;s properties (<code>name, url, price<\/code>) in the <code>ProductData<\/code> constant. The props in the <code>ProductData<\/code> constant represent:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>name<\/code>. A random product image name.<\/li>\n\n\n\n<li><code>url<\/code>. An image URL generated by combining the public IDs of the product image and background image.<\/li>\n\n\n\n<li><code>price<\/code>. A random product image price.<\/li>\n<\/ul>\n\n\n\n<p>The images are dynamically created using Cloudinary transformations to layer each product&#8217;s primary image over a background image. Here&#8217;s a breakdown:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image ID Arrays<\/strong>. Each product (orange, mango, cherry, and apple) has an array with two strings: the public ID of the product image and the background image&#8217;s public ID. For instance:<\/li>\n<\/ul>\n\n\n\n<p><code>const orangeImagesId = [\"Orange_Juice\", \"orangebg.jpg\"]<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The first item (<code>Orange_Juice<\/code>) is the public ID for the product image.<\/li>\n\n\n\n<li>The second item (<code>orangebg.jpg<\/code>) is the background image&#8217;s public ID.<\/li>\n<\/ul>\n\n\n\n<p>Product Data Array (<code>ProductData<\/code>) contains objects with properties for each product, including name, url, and price.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>name<\/code>. The product&#8217;s display name, e.g., &#8220;Cherry Jubilee Juice&#8221;.<\/li>\n\n\n\n<li><code>url<\/code>. The dynamically generated Cloudinary URL for each product image. It uses transformations to layer the product image over the background.\n<ul class=\"wp-block-list\">\n<li><code>l_${cherryImagesId[0]}<\/code>. Layers the product image (using the public ID from the array, like &#8220;Cherry_Juice&#8221;).<\/li>\n\n\n\n<li><code>w_250,h_1000,g_center<\/code>. Specifies the layered image&#8217;s width, height, and center alignment.<\/li>\n\n\n\n<li><code>v1730338860\/${cherryImagesId[1]}<\/code>. Specifies the version number and background image.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>price<\/code>. The product price.<\/li>\n<\/ul>\n\n\n\n<p>When the transformation string above is applied to the image URL, Cloudinary will process the image according to these specified transformations and return the modified image URL. This allows you to chain multiple transformations based on your requirements without manually editing the image. Also, since Cloudinary&#8217;s transformations are URL-based, they only consume additional storage space if you explicitly upload new transformed images.<\/p>\n\n\n\n<p>Below is an example of one of the images from the list, &#8220;Cherry Jubilee Juice&#8221;, which clearly illustrates the visual changes made by Cloudinary transformations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764272599\/blog-Customize_Midjourney_Images_for_Your_E-commerce_Website-3.png\" alt=\"Cherry juice on a white background\"\/><figcaption class=\"wp-element-caption\">Product image<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764272602\/blog-Customize_Midjourney_Images_for_Your_E-commerce_Website-4.png\" alt=\"Cherries\"\/><figcaption class=\"wp-element-caption\">Background image<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764272606\/blog-Customize_Midjourney_Images_for_Your_E-commerce_Website-5.png\" alt=\"Cherry juice on top of cherry background\"\/><figcaption class=\"wp-element-caption\">Combination of the product and background image<\/figcaption><\/figure>\n\n\n\n<p>In this application, the url property uses <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference\" rel=\"noreferrer noopener\">URL-based transformations<\/a>. However, this is just one way to handle image transformations in Cloudinary. You can also apply transformations in multiple ways, such as during <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/upload_parameters#transformations\" rel=\"noreferrer noopener\">upload <\/a>or <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_sdks\" rel=\"noreferrer noopener\">programmatically via SDKs<\/a>,or combine both depending on your use case.<\/p>\n\n\n\n<p>To learn more about applying transformations like these, explore the <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\" rel=\"noreferrer noopener\">Cloudinary image transformations documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Build the E-commerce Store<\/h2>\n\n\n\n<p>With the product dataset ready, you can now build the e-commerce store. For this, you\u2019ll create an app component to render the list of product items. Head to the pages file in the src\/app directory and update the file with the code snippet below.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ src\/app\/pages<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/page.module.css\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { ProductData, ProductDataProp } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/data'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0 <span class=\"hljs-keyword\">const<\/span> data: ProductDataProp&#91;] = ProductData\n\n\u00a0 <span class=\"hljs-keyword\">return<\/span> (\n\n\u00a0 \u00a0 <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.page}<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.main}<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>digital art store<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.section}<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {data.map((image) =&gt; {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return (\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.list}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{image.name}<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.img}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{image.url}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{image.name}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>{image.name}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>${image.price}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>&gt;<\/span>buy<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 )\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })}\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n\n\u00a0 );\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The app component imports and renders the list of product items from the <code>ProductData<\/code> array. The product items contain certain information, such as <code>name, image, and price<\/code><strong>.<\/strong> Let&#8217;s break it down step by step:<\/p>\n\n\n\n<p>First, the component imports the <code>ProductData<\/code> array containing the product items and the <code>ProductDataProp<\/code> interface, defining the props of each object in the array.<\/p>\n\n\n\n<p>Next, the imported <code>ProductData<\/code> array is destructured and assigned to a variable named data.<\/p>\n\n\n\n<p>Then, the data variable type is declared as an array of ProductDataProp objects. This helps ensure type safety and provides better code clarity. This variable is then iterated to render the product items.<\/p>\n\n\n\n<p>Now that your app is set up, you can add CSS styles to make it look appealing. Navigate to the page.module.css file in the src\/app folder and replace the boilerplate code with the snippet below.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/\/\/EDIT CSS FILE<\/span>\n\n<span class=\"hljs-comment\">\/\/ src\/app\/page.module.css<\/span>\n\n.page {\n\n\u00a0 align-items: center;\n\n\u00a0 justify-items: center;\n\n\u00a0 min-height: <span class=\"hljs-number\">100<\/span>svh;\n\n\u00a0 padding: <span class=\"hljs-number\">5<\/span>rem;\n\n\u00a0 gap: <span class=\"hljs-number\">64<\/span>px;\n\n\u00a0 font-family: <span class=\"hljs-keyword\">var<\/span>(--font-geist-sans);\n\n}\n\n.main {\n\n\u00a0 display: flex;\n\n\u00a0 flex-direction: column;\n\n\u00a0 gap: <span class=\"hljs-number\">32<\/span>px;\n\n\u00a0 grid-row-start: <span class=\"hljs-number\">2<\/span>;\n\n}\n\n.main h1 {\n\n\u00a0 text-transform: capitalize;\n\n\u00a0 text-align: center;\n\n}\n\n.section {\n\n\u00a0 margin: <span class=\"hljs-number\">2<\/span>rem <span class=\"hljs-number\">0<\/span>;\n\n\u00a0 display: grid;\n\n\u00a0 grid-template-columns: <span class=\"hljs-number\">2<\/span>fr <span class=\"hljs-number\">2<\/span>fr;\n\n\u00a0 gap: <span class=\"hljs-number\">6<\/span>rem;\n\n}\n\n.section li {\n\n\u00a0 display: grid;\n\n\u00a0 align-items: center;\n\n\u00a0 justify-content: center;\n\n}\n\n.section span{\n\n\u00a0 display: flex;\n\n\u00a0 justify-content: space-between;\n\n\u00a0 align-items: center;\n\n}\n\n.<span class=\"hljs-keyword\">list<\/span> {\n\n\u00a0 gap: <span class=\"hljs-number\">8<\/span>px;\n\n}\n\n.<span class=\"hljs-keyword\">list<\/span> img {\n\n\u00a0 width: <span class=\"hljs-number\">420<\/span>px;\n\n\u00a0 height: <span class=\"hljs-number\">420<\/span>px;\n\n}\n\n.<span class=\"hljs-keyword\">list<\/span> h3, .<span class=\"hljs-keyword\">list<\/span> p{\n\n\u00a0 color: <span class=\"hljs-keyword\">var<\/span>(--foreground);\n\n}\n\n.<span class=\"hljs-keyword\">list<\/span> button{\n\n\u00a0 padding: <span class=\"hljs-number\">0.8<\/span>rem <span class=\"hljs-number\">1.4<\/span>rem;\n\n\u00a0 font-size: <span class=\"hljs-number\">1<\/span>rem;\n\n\u00a0 background-color: <span class=\"hljs-keyword\">var<\/span>(--foreground);\n\n\u00a0 color: <span class=\"hljs-keyword\">var<\/span>(--background);\n\n\u00a0 text-transform: capitalize;\n\n\u00a0 border: none;\n\n\u00a0 border-radius: <span class=\"hljs-number\">25<\/span>px;\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">The Final Result<\/h2>\n\n\n\n<p>The app will display a digital art store featuring background images for your products generated by Midjourney and uploaded to Cloudinary, each with a name and price. The images will be dynamically transformed and optimized by Cloudinary with resizing, cropping, borders, watermarks, and quality adjustments. <a href=\"https:\/\/www.loom.com\/share\/1701f706abe945aabb178acf801984b9?sid=941b3c54-88cc-4d7f-a8f0-cd23c506e014\">Here&#8217;s<\/a> how the app will look.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>This blog post explains how Cloudinary makes it easy to customize and deliver AI-generated images in web apps. <a href=\"https:\/\/cloudinary.com\/contact\">Contact us today<\/a> to learn more about how Cloudinary ensures your image dimensions, formats, and quality are consistently enhanced, as well as accelerates page load times, leading to improved performance and user experience.<\/p>\n\n\n\n<p>Resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary Documentation &#8211; Image Transformations<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\" target=\"_blank\" rel=\"noreferrer noopener\">Article: Upload Images to Cloudinary with Node.js and React<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/cookbook\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary Cookbook<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success. AI-generated images, like those from Midjourney, offer a scalable, cost-effective way to produce high-quality product images without the need for professional photoshoots.&nbsp; However, beautiful images alone aren\u2019t enough. They have to be optimized [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":36370,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[98,409,165],"class_list":["post-36369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-e-commerce","tag-generative-ai","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Customize Midjourney Images for Your E-commerce Website<\/title>\n<meta name=\"description\" content=\"A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize Midjourney Images for Your E-commerce Website\" \/>\n<meta property=\"og:description\" content=\"A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-29T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-27T19:45:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Customize Midjourney Images for Your E-commerce Website\",\"datePublished\":\"2024-11-29T15:00:00+00:00\",\"dateModified\":\"2025-11-27T19:45:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce\"},\"wordCount\":1146,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA\",\"keywords\":[\"E-commerce\",\"Generative AI\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce\",\"url\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce\",\"name\":\"Customize Midjourney Images for Your E-commerce Website\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA\",\"datePublished\":\"2024-11-29T15:00:00+00:00\",\"dateModified\":\"2025-11-27T19:45:49+00:00\",\"description\":\"A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customize Midjourney Images for Your E-commerce Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Customize Midjourney Images for Your E-commerce Website","description":"A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce","og_locale":"en_US","og_type":"article","og_title":"Customize Midjourney Images for Your E-commerce Website","og_description":"A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success.","og_url":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce","og_site_name":"Cloudinary Blog","article_published_time":"2024-11-29T15:00:00+00:00","article_modified_time":"2025-11-27T19:45:49+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Customize Midjourney Images for Your E-commerce Website","datePublished":"2024-11-29T15:00:00+00:00","dateModified":"2025-11-27T19:45:49+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce"},"wordCount":1146,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA","keywords":["E-commerce","Generative AI","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce","url":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce","name":"Customize Midjourney Images for Your E-commerce Website","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA","datePublished":"2024-11-29T15:00:00+00:00","dateModified":"2025-11-27T19:45:49+00:00","description":"A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/customize-midjourney-images-e-commerce#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customize Midjourney Images for Your E-commerce Website"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1728670232\/customize_mindjourney_ecomm_store-blog\/customize_mindjourney_ecomm_store-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=36369"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36369\/revisions"}],"predecessor-version":[{"id":39490,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36369\/revisions\/39490"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/36370"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=36369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=36369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=36369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}