Using the Plasmic CMS with uploaded image in Image URL Field

Plasmic Studio Questions
1

What are you trying to do? I have a component that I have made it so you can dynamically update the image. The only way to do it is through an ImageURL. Ideally, I’d like to use as few systems as possible, so I’d prefer to be able to upload the image to the Plasmic CMS and from the Plasmic CMS, there be a URL generated for the image to use within the Plasmic Studio.

What have you tried so far?

Nothing else so far; but I vaguely remember there being a way to create an image upload function for the dynamic image; that would work as well; but I haven’t been able to find it

Relevant links:

2

You should be able to build a dynamic image component with a dynamic value for the image URL.

Screenshot 2024-08-06 at 17.32.11
Screenshot 2024-08-06 at 17.32.11906×948 55 KB

s

3

Yes, I’ve done that. But say I have my image within my project uploaded as an image asset, is there a way I can get a URL for the image?

4

We don’t have an easy way to get that right now :confused:

I suppose you can preview the image and grab the URL for now.

5

Ok, that will be helpful in getting me closer to my goal; thanks!

6

hmm, couldn’t figure out how to preview the image

It would be handy if the image could open by itself in another window and be able to grab the url of the image

7

If there’s a limited number of images, you could create a single-select variant to choose one of the images from the image assets within the project.

Can you create a code component with a slot prop (and add all images to the slot) and expose image URLs as state?

function Test({ slot, onChange }: any) {
    const images = flattenChildren(slot);

    useEffect(() => {
        onChange?.(images.map((img) => (img as any).props.src?.src));
    }, [images])

    return (
        <div>
            Hello World
        </div>
    )
}

PLASMIC.registerComponent(Test, {
    name: "test",
    props: {
        slot: {
            type: 'slot'
        },
        urls: {
            type: "array",
            hidden: () => true,
        },
        onChange: {
            type: "eventHandler",
            argTypes: [{ name: "value", type: "object" }],
        }
    },
    states: {
        imageUrls: {
            type: "writable",
            valueProp: "urls",
            onChangeProp: "onChange",
            variableType: "array",
        },
    }
})