Feature Request: Add Alt Text to images

[nolanfilter]

Hello! I'm using tumblr.js to upload a daily image post and would like to add alt text to the image. Currently I put the image description in the caption, but I'd like to match standard accessibility practices.

I'm using the createPhotoPost() method to post, but it doesn't allow for alt text in the options. I've also tried using the postRequest() method to post to the NPF endpoint, but the library isn't prepared to turn content blocks in the params object into a form (this is the issue I've run into).

Ideally the library would accept alt text as an option on post create methods. If that's not possible, is there a workaround you can suggest? Thank you!

[sirreal]

The library should support this. I'm planning to work on an NPF post creation method (#165). I suspect that will solve the issue as we should be able to add a content block like:

{
  type: "image",
  alt_text: "The alternate text for the image block.",
  //…
}

[sirreal]

I've added NPF support to tumblr.js. Media uploads as part of NPF post creation doesn't seem to work correctly right now. See tumblr/docs#88.

There is a workaround I can propose, @nolanfilter. It involves uploading media by creating a legacy photo post, then using that media in an NPF post and adding alt_text to the image block. I've included some tests that do something similar. The media object here is from a legacy photo post:

tumblr.js/integration/write.mjs

Lines 98 to 132 in 9d23608

	test('creates a post with media', async () => {
	const media = {
	media_key: '9fb3517d95570cbd752caa77172f1ebb:60e936a44dbb258b-12',
	type: 'image/jpeg',
	width: 400,
	height: 108,
	url: 'https://64.media.tumblr.com/9fb3517d95570cbd752caa77172f1ebb/60e936a44dbb258b-12/s400x600/27f27482d8c9c631a05f478107976a0aeda2c9a5.jpg',
	has_original_dimensions: true,
	};
	assert.isOk(
	await client.createPost(blogName, {
	content: [
	...postContent,
	{
	type: 'image',
	media,
	caption: 'Arches National Park',
	alt_text: 'A mountain landsacpe',
	attribution: {
	type: 'link',
	url: 'https://openverse.org/en-gb/image/38b9b781-390f-4fc4-929d-0ecb4a2985e3',
	},
	},
	],
	tags: [
	'tumblr.js-test',
	`tumblr.js-version-${client.version}`,
	'test-npf',
	'test-npf-media',
	],
	}),
	);
	});

This would look something like:

const c = require('tumblr.js').createClient(CREDS);
const { id } = await c.createLegacyPost(MY_BLOG_ID, { ...params });
const {posts} = await c.blogPosts(MY_BLOG_ID, { id, npf: 'true' });

// Here we have our uploaded media object to use
const media = posts[0].content[0].media[0];
await c.editPost(MY_BLOG_ID, id, {content: [/* todo */]})

Note that this is for the 4.0 version that hasn't been released yet.

[sirreal]

Good news! This should be supported as of [email protected] (currently tagged next).

You can see a working example of how to post with the library in the integration test suite:

tumblr.js/integration/write.mjs

Lines 139 to 172 in 7845924

	await client.createPost(blogName, {
	content: [
	...postContent,
	{
	type: 'image',
	media: createReadStream(new URL('../test/fixtures/image.jpg', import.meta.url)),
	caption: 'Arches National Park',
	alt_text: 'A mountain landsacpe',
	attribution: {
	type: 'link',
	url: 'https://openverse.org/image/38b9b781-390f-4fc4-929d-0ecb4a2985e3',
	},
	},
	{
	type: 'video',
	media: createReadStream(new URL('../test/fixtures/video.mp4', import.meta.url)),
	width: 92,
	height: 69,
	title:
	'Phosphatidylinositol (4,5) Bisphosphate Controls T Cell Activation by Regulating T Cell Rigidity and Organization',
	attribution: {
	type: 'link',
	url: 'https://commons.wikimedia.org/wiki/File:Phosphatidylinositol-(45)-Bisphosphate-Controls-T-Cell-Activation-by-Regulating-T-Cell-Rigidity-and-pone.0027227.s020.ogv',
	},
	},
	],
	tags: [
	'tumblr.js-test',
	`tumblr.js-version-${client.version}`,
	'test-npf',
	'test-npf-media-upload',
	],
	}),