How to Show Image Size in the Studio

4 replies
Last updated: Aug 8, 2022
Is there a way to show image size in the studio?
Aug 8, 2022, 2:17 PM
yes! You can either choose one of the media plugins , which will do that, or build a custom input component and display it there πŸ™‚ You just have to look into the image type and understand the structure it is build/stored in.
Aug 8, 2022, 4:47 PM
Yeah I just want to warn the editors if they add a huge image (file size) to an article
Aug 8, 2022, 4:50 PM
You can also create a custom input component. Given:
export default {
  name: 'figure',
  title: 'Image',
  type: 'image',
  fields: [
    {
      name: 'size',
      title: 'Size',
      type: 'string',
      inputComponent: ImageSize,
      options: {
        isHighlighted: true,
      },
    },
//other fields

//ImageSize.js
import React, { useState, useEffect } from 'react';
import { studioClient } from '../../lib/utils/studioClient';

const ImageSize = ({ parentValue }) => {
  const [imageSize, setImageSize] = useState();

  useEffect(() => {
    const getImage = async () =>
      await studioClient
        .fetch(`*[_id == $id][0].metadata.dimensions{ height, width }`, {
          id: parentValue.asset._ref,
        })
        .then(setImageSize);
    getImage();
  }, [parentValue]);

  return (
    <p>
      Size: {imageSize?.width}px x {imageSize?.height}px
    </p>
  );
};

export default ImageSize;
That's just a quick and dirty example, though!
Aug 8, 2022, 5:01 PM
Oh, and I just realized: if you're just trying to warn a user that they've entered a large image you can use a validation rule that returns a warning if the image is above a certain size.
Aug 8, 2022, 5:42 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.