Image caption

[pawepaw]

Hi,

Is it possible to add image caption? couldn't see any information about it in docs. If not could you point me where +/- it should be added I can try to add pull request.

[jjhbw]

Hi!

No its not possible at this time i'm afraid. I don't know the docx spec well enough to judge whether this would be difficult to add...

This is the function that is concerned with injecting image-related nodes into the document XML.

docx-templates/src/processTemplate.ts

Lines 759 to 854 in f3e33ff

	const processImage = async (ctx: Context, imagePars: ImagePars) => {
	validateImagePars(imagePars);
	const cx = (imagePars.width * 360e3).toFixed(0);
	const cy = (imagePars.height * 360e3).toFixed(0);
	let imgRelId = imageToContext(ctx, getImageData(imagePars));
	const id = String(ctx.imageId);
	const alt = imagePars.alt || 'desc';
	const node = newNonTextNode;
	const extNodes = [];
	extNodes.push(
	node('a:ext', { uri: '{28A0092B-C50C-407E-A947-70E740481C1C}' }, [
	node('a14:useLocalDpi', {
	'xmlns:a14': 'http://schemas.microsoft.com/office/drawing/2010/main',
	val: '0',
	}),
	])
	);
	if (ctx.images[imgRelId].extension === '.svg') {
	// Default to an empty thumbnail, as it is not critical and just part of the docx standard's scaffolding.
	// Without a thumbnail, the svg won't render (even in newer versions of Word that don't need the thumbnail).
	const thumbnail: Image = imagePars.thumbnail ?? {
	data: 'bm90aGluZwo=',
	extension: '.png',
	};
	const thumbRelId = imageToContext(ctx, thumbnail);
	extNodes.push(
	node('a:ext', { uri: '{96DAC541-7B7A-43D3-8B79-37D633B846F1}' }, [
	node('asvg:svgBlip', {
	'xmlns:asvg':
	'http://schemas.microsoft.com/office/drawing/2016/SVG/main',
	'r:embed': imgRelId,
	}),
	])
	);
	// For SVG the thumb is placed where the image normally goes.
	imgRelId = thumbRelId;
	}
	const pic = node(
	'pic:pic',
	{ 'xmlns:pic': 'http://schemas.openxmlformats.org/drawingml/2006/picture' },
	[
	node('pic:nvPicPr', {}, [
	node('pic:cNvPr', { id: '0', name: `Picture ${id}`, descr: alt }),
	node('pic:cNvPicPr', {}, [
	node('a:picLocks', { noChangeAspect: '1', noChangeArrowheads: '1' }),
	]),
	]),
	node('pic:blipFill', {}, [
	node('a:blip', { 'r:embed': imgRelId, cstate: 'print' }, [
	node('a:extLst', {}, extNodes),
	]),
	node('a:srcRect'),
	node('a:stretch', {}, [node('a:fillRect')]),
	]),
	node('pic:spPr', { bwMode: 'auto' }, [
	node('a:xfrm', {}, [
	node('a:off', { x: '0', y: '0' }),
	node('a:ext', { cx, cy }),
	]),
	node('a:prstGeom', { prst: 'rect' }, [node('a:avLst')]),
	node('a:noFill'),
	node('a:ln', {}, [node('a:noFill')]),
	]),
	]
	);
	const drawing = node('w:drawing', {}, [
	node('wp:inline', { distT: '0', distB: '0', distL: '0', distR: '0' }, [
	node('wp:extent', { cx, cy }),
	node('wp:docPr', { id, name: `Picture ${id}`, descr: alt }),
	node('wp:cNvGraphicFramePr', {}, [
	node('a:graphicFrameLocks', {
	'xmlns:a': 'http://schemas.openxmlformats.org/drawingml/2006/main',
	noChangeAspect: '1',
	}),
	]),
	node(
	'a:graphic',
	{ 'xmlns:a': 'http://schemas.openxmlformats.org/drawingml/2006/main' },
	[
	node(
	'a:graphicData',
	{ uri: 'http://schemas.openxmlformats.org/drawingml/2006/picture' },
	[pic]
	),
	]
	),
	]),
	]);
	ctx.pendingImageNode = drawing;
	};

Happy to take a look at a PR.

[jjhbw]

Should be possible to add this feature in a way similar to how image rotation was added in #221 . See http://officeopenxml.com/drwPic-nvPicPr.php

[PhuocHoangMinhNguyen]

Hi @jjhbw, have we had this feature in the latest version of docx-template?

[jjhbw]

@PhuocHoangMinhNguyen i'm afraid not. I didn't get around to it yet. Rotation can be handled from JS though, outside of docx-templates.

[PhuocHoangMinhNguyen]

@jjhbw It's okay man. Just wondering what do you mean by "didn't get around to it yet"? Is it hard or you haven't had time to look into it? If it is the latter, I will try to look in the code then, we are in dire need of this feature.

[jjhbw]

Would be great if you could take a look. I'm swamped with other work at the moment, but happy to look at your PR.

[jwasnoggin]

I also needed this functionality so I've created a PR for this: #286

[jjhbw]

Thanks @jwasnoggin ! Looks like a sensible solution to me.

[as19ish]

Hi @jjhbw
When are you planing to release this feature ?

[jjhbw]

@as19ish
The release is lined up, see https://github.com/guigrpa/docx-templates/releases/tag/v4.10.0

The GH Action that we use to publish on NPM broke due to a new 2FA requirement. I'm working with @guigrpa to get that resolved. If you'd rather not wait you can install the commit directly from github in the meantime, see https://stackoverflow.com/a/18049685