How to Show Image Size in the Studio
4 repliesLast updated: Aug 8, 2022
Is there a way to show image size in the studio?
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.
Yeah I just want to warn the editors if they add a huge image (file size) to an article
You can also create a custom input component. Given:
That's just a quick and dirty example, though!
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;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.
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
