Image ordering

[nawok]

I would like to reorder the images attached to my products via Admin UI without deleting them and reattaching in correct order.

[attmn]

This feature would really improve the UX

[ozgeek]

I am facing the same issue, it will be good to have this feature.

[whoisaymen]

Is this still not possible?

[YaminNather]

Yeah its still not possible in the latest preview

[luluhoc]

I discovered that the architecture behind image storing in medusajs (at least v1, I haven't yet try v2) is flawed, even when images are given in the correct order to the product service they are saved without creation date or order, so when retrieving from db, I think they are ordered by id...

[attmn]

That's a good observation. I'm going to try and see if I can extend the image repository or whatever controls the creation of images and add an "order" property.

[attmn]

I managed to get ordering working by extending the image model.

Here is how to setup the backend to handle the new order property. Then all you have to do is create a custom widget in admin to show and reorder images and api route to call the product service with the new reorder function.

1. Extend the image model

// src/models/image.ts

import { Column, Entity } from "typeorm";
import { Image as MedusaImage } from "@medusajs/medusa";

@Entity()
export class Image extends MedusaImage {
  @Column({ type: "int", default: 0 }) // Add the new 'order' column
  order: number;
}

2. Modify the Image repository, replacing the functions

// src/repositories/image.ts

import { Image } from "../models/image";
import { dataSource } from "@medusajs/medusa/dist/loaders/database";
import { In } from "typeorm";
import { QueryDeepPartialEntity } from "typeorm/query-builder/QueryPartialEntity";

export const ImageRepository = dataSource.getRepository(Image).extend({
  async insertBulk(data: QueryDeepPartialEntity<Image>[]): Promise<Image[]> {
    const queryBuilder = this.createQueryBuilder()
      .insert()
      .into(Image)
      .values(data);

    if (!queryBuilder.connection.driver.isReturningSqlSupported("insert")) {
      const rawImages = await queryBuilder.execute();
      return rawImages.generatedMaps.map((d) => this.create(d)) as Image[];
    }

    const rawImages = await queryBuilder.returning("*").execute();
    return rawImages.generatedMaps.map((d) => this.create(d));
  },

  async upsertImages(imageUrls: string[]): Promise<Image[]> {
    // Retrieve existing images by URL
    const existingImages = (await this.find({
      where: {
        url: In(imageUrls),
      },
    })) as Image[];

    // Create a map of existing images for quick lookup by URL
    const existingImagesMap = new Map(
      existingImages.map<[string, Image]>((img) => [img.url, img])
    );

    const upsertedImgs: Image[] = [];
    const imagesToCreate: QueryDeepPartialEntity<Image>[] = [];

    // Determine the next available order based on existing images
    let nextOrder = existingImages.length;

    imageUrls.forEach((url) => {
      const existingImage = existingImagesMap.get(url);
      if (existingImage) {
        // If the image already exists, add it to the upserted list
        upsertedImgs.push(existingImage);
      } else {
        // If it's a new image, assign the next available order
        const newImage = this.create({ url, order: nextOrder++ });
        imagesToCreate.push(newImage as QueryDeepPartialEntity<Image>);
      }
    });

    // Bulk insert new images if there are any
    if (imagesToCreate.length) {
      const newImages = await this.insertBulk(imagesToCreate);
      upsertedImgs.push(...newImages);
    }

    return upsertedImgs;
  },
});

export default ImageRepository;

3. Create migrations for the new order field:

import { MigrationInterface, QueryRunner } from "typeorm";

export class AddImageOrder1731492688060 implements MigrationInterface {
  public async up(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(
      'ALTER TABLE "image" ADD COLUMN "order" integer NOT NULL DEFAULT 0'
    );
  }

  public async down(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query('ALTER TABLE "image" DROP COLUMN "order"');
  }
}

4. Set order for existing images using migration (Optional):

import { MigrationInterface, QueryRunner } from "typeorm";

export class SetOrderForExistingImages1731497592753
  implements MigrationInterface
{
  public async up(queryRunner: QueryRunner): Promise<void> {
    // Step 1: Retrieve all product-image associations, ordered by product_id and image_id
    const productImages = await queryRunner.query(
      `SELECT product_id, image_id FROM product_images ORDER BY product_id, image_id`
    );

    let currentProductId = null;
    let order = 0;

    // Step 2: Assign an order for each image within its product group
    for (const { product_id, image_id } of productImages) {
      // Reset the order counter when moving to a new product
      if (currentProductId !== product_id) {
        currentProductId = product_id;
        order = 0;
      }

      // Update the `order` field in the `image` table for each associated image
      await queryRunner.query(`UPDATE image SET "order" = $1 WHERE id = $2`, [
        order,
        image_id,
      ]);

      order += 1; // Increment the order for the next image in the same product
    }
  }

  public async down(queryRunner: QueryRunner): Promise<void> {
    // Optionally, reset the order values if needed
    await queryRunner.query(`UPDATE image SET "order" = 0`);
  }
}

5. Extend validators:

// src/loaders/extend-admin-product-fields.ts

export default async function () {
  const imports = (await import(
    "@medusajs/medusa/dist/api/routes/admin/products/index"
  )) as any;
  
  imports.defaultAdminProductRemoteQueryObject.images = {
    fields: [
      "id",
      "created_at",
      "updated_at",
      "deleted_at",
      "url",
      "metadata",
      "order",
    ],
  };
}

// src/loaders/extend-store-product-fields.ts

export default async function () {
  const storeImports = (await import(
    "@medusajs/medusa/dist/api/routes/store/products/index"
  )) as any;
  
   storeImports.defaultStoreProductRemoteQueryObject.images = {
    fields: [
      "id",
      "created_at",
      "updated_at",
      "deleted_at",
      "url",
      "metadata",
      "order",
    ],
  };
}

6. Extend your product service with a new function to reorder images (I have two types of images, you only need one):

// src/services/product.ts


import ImageRepository from "../repositories/image";
import { Image } from "../models/image";

// Other code to make service work

  /**
   * Reorders images for a product. This function updates the order of images
   * or factory images for a given product based on the provided order data.
   *
   * @param {string} productId - The id of the product.
   * @param {"images" | "factory_images"} type - The type of images to reorder, either "images" or "factory_images".
   * @param {Array<{ url: string; order: number }>} orderData - An array of objects containing the URL and the new order of the images.
   * @return {Promise<Product>} Resolves to the updated product with reordered images.
   */
  async reorderImages(
    productId: string,
    type: "images" | "factory_images",
    orderData: { url: string; order: number }[]
  ): Promise<Product> {
    return await this.atomicPhase_(async (manager) => {
      const productRepo = manager.withRepository(this.productRepository_);
      const imageRepo = manager.withRepository(this.imageRepository_);

      // Get the product with its images
      const product = await this.retrieve(productId, {
        relations: ["images", "factory_images"],
      });

      // Get current images based on type
      const currentImages =
        type === "images"
          ? product.images
          : (product.factory_images as Image[]);

      // Create a map of existing images for quick lookup
      const existingImagesMap = new Map(
        currentImages.map((img) => [img.url, img])
      );

      // Update order for existing images and prepare new images
      const updatedImages = await Promise.all(
        orderData.map(async ({ url, order }) => {
          const existingImage = existingImagesMap.get(url) as Image;

          if (existingImage) {
            // Update order of existing image
            existingImage.order = order;
            return await imageRepo.save(existingImage);
          } else {
            // Create new image with order
            const newImage = imageRepo.create({ url, order });
            return await imageRepo.save(newImage);
          }
        })
      );

      // Update product with reordered images
      if (type === "images") {
        product.images = updatedImages;
      } else {
        product.factory_images = updatedImages;
      }

      const result = await productRepo.save(product);

      await this.eventBus_
        .withTransaction(manager)
        .emit(ProductService.Events.UPDATED, {
          id: result.id,
          fields: [type],
        });

      return result;
    });
  }

[kasperkristensen]

Hello everyone, thanks for the suggestion! With the release of 2.0.6 it's now possible to re-order images both during product creation and updates.

The rank of an image is determined by its position in the images array of the payload. The index will populate the read-only field rank, which images are always sorted by when retrieved from the DB. To re-order images in the admin you can go to the Media form and drag and drop the images into the order you want.