can't find docs for adding text to the bottom of an image with a metadata object

[coreybrett]

can't find docs for adding text to the bottom of an image with a metadata object

[rikschennink]

See demo for footer example:
https://pqina.github.io/filepond-plugin-image-transform/

Information on adding markup to file items:
https://pqina.nl/filepond/docs/patterns/plugins/image-transform/#adding-markup-to-images

And on what markup is supported:
https://pqina.nl/doka/docs/patterns/api/markup/

[coreybrett]

I have the following...

fileMetadataObject: {
	'markup': [
		[
			'text', {
				text: 'hello',
				left: 0,
				bottom: 0,
				textAlign: 'left',
				zIndex: 1,
				fontColor: 'rgba(255,255,255,1)',
			},
		],
		[
			'rect', {
				left: 0,
				right: 0,
				bottom: 0,
				height: '5%',
				backgroundColor: 'rgba(0,0,0,.75)'
			},
		],
		[
			'image', {
				right: 0,
				top: 0,
				width: '10%',
				height: '10%',
				src: logo_path,
				fit: 'contain'
			}
		]
	]
},

but the text is not getting rendered.

The rectangle and the logo are.

[coreybrett]

'text', {
	text: ajaxitemnum,
	left: '10px',
	top: '20px',
	textAlign: 'left',
	zIndex: 1,
	fontColor: 'rgba(0,0,0,1)',
	fontWeight: 'normal',
	fontFamily: 'sans-serif',
	fontSize: '24px',
},

Got it working using the above.

Is there anyway to make the size of the text proportional to the image? (like width and height do for images)

[rikschennink]

I believe you can use percentages or fractions for text as well.