Skip to main content

My goal is to create custom shapes for a storyboard that will export to a csv file for further manipulation. I have not found out-of -the-box shapes that will export image data, so I’m trying to create a custom shape that will.
I also need the images to be visible in shapes within lucidchart ,and easily input from files not urls.

My attempts with the following code have failed to show images in a shape at instantiation and with data input.

Is it possible to reach my goal? If so, what can be altered in this to make it work?

{
  "properties": "
    {
      "name": "ImageName",
      "default": "clockwise-one-arrow.png",
      "label": "Image name",
      "type": "file"
    }
  ],
  "images": {
    "logo": {
      "type": "file",
      "path": "{{=@ImageName}}"
    }
  },
  "style": {
    "fill": {
      "type": "image",
      "ref": "logo"
    }
  },
  "geometry":
    {
      "type": "rect"
    }
  ]
}

Hi KevinTP, I’m Alec, I’m a developer at Lucid. I admit that I’m not an expert with our Custom Shape definitions, but a part of our documentation found here might have the answer you’re looking for.

From that section of our docs, it would appear that you can make your use case work by skipping the middle-man of trying to define your image name in properties, and instead reference it directly like so:
 

{
images: {
"myImage": {
type: 'file'
path: 'clockwise-one-arrow.png'
}
}
style: {
fill: {
type: 'image'
ref: 'myImage'
mode: 'stretch'
}
stroke: { color: '#00000000', width: 1 }
rounding: 0
}
geometry: e
{ type: rect }
]
}

 

Hopefully this works for your use case, let us know if you have any further questions!


Thanks Alec,

This code worked to bring in the image file in the shape, but by removing the Properties the image cannot be changed as additional shapes are added.
In a storyboard scenario I will need to add shapes, change images from files, ultimately add much copy under the image for descriptions, audio, etc, then output to a csv.


I’m not sure I understand all the specifics of what you are hoping for in your flow, but let me refer you to a similar question I helped field a couple weeks ago found here.

With what I understand about your use case (which may not be correct, forgive me if I misunderstand), the biggest problem you might run into is defining additional images. Our Custom Shape code will require you to define all the images in the actual shape definition if you are trying to access them from your local machine. However, if you follow the route described in the community thread I linked, you should see a way to dynamically alter the image background of a custom shape (although this will require that your image can be found through a URL, and not just a local upload).

I hope this helps! If not, a more detailed explanation of your desired use case/workflow might help me find any other available workarounds.

 


Reply