Mixed-media workflow
Create image and text social threads
Create image and text social threads by treating every selected image as an ordered chunk beside the surrounding text. Social Threader supports browser paste or drag input and a native mobile image-picker path, with different clipboard limitations on each.
Quick verdict Use the rendered timeline as the source of truth for order. Copy text and images as separate chunks, and test your target browser before relying on rich image clipboard support.
Primary audienceImage-led thread authors
Core outcomeOrdered mixed-media chunks
Why mixed-media threads need an explicit order
A screenshot or diagram often belongs between two specific explanations. Treating every image as an attachment at the end loses that relationship. Social Threader instead creates image records, assigns placeholder tokens or source offsets, and rebuilds a timeline containing separate text and image chunks.
This is preparation, not upload. The final destination still determines how images are attached and posted. Social Threader’s job is to make the intended sequence visible and offer the supported copy actions.
How to create image and text social threads
- Enter the text before and after the point where an image belongs.
- On the web, paste or drag the image into the editable area; in the mobile app, use the image picker.
- Select a character maximum and review the generated timeline, including every separate image chunk.
- Copy text and image chunks individually in the displayed order, then attach or post them manually on the destination platform.
The browser helper builds real image markup for a matched image record. This implementation excerpt is copied directly from the repository:
function createImageChunk(imageRecord) {
const altText = imageRecord.altText || TEXT_CONTENT.PASTED_IMAGE_ALT;
const sanitizedAlt = templateHelpers.escapeHtml(altText);
const htmlMarkup = `<img src="${imageRecord.dataUrl}" alt="${sanitizedAlt}" draggable="false">`;
return {
variant: "image",
plainText: "",
htmlContent: htmlMarkup,
clipboardHtml: htmlMarkup,
imageDataUrl: imageRecord.dataUrl
};
}Read the full rich-text helper on GitHub for placeholder translation and chunk construction.
Web and mobile behavior are not identical
| Behavior | Browser app | Mobile app code |
|---|---|---|
| Add an image | Paste or drag into the editable source area. | Select one image through Expo Image Picker. |
| Preserve order | Ordered placeholder tokens are translated into image chunks. | Source offsets keep images between text segments as the draft changes. |
| Copy one image | Uses rich clipboard data when ClipboardItem is supported. |
Uses the native image clipboard path with base64 image data. |
| Share the full thread | No combined share action is documented. | The combined text share message represents images with [Image]. |
Feature-to-benefit map
| Feature | Why it matters here | Example |
|---|---|---|
| Separate image chunks | Keeps image actions independent from text copying. | Copy a screenshot after the text that introduces it. |
| Ordered placeholders or offsets | Preserves where the image belongs in the source flow. | Place a diagram between setup and explanation sections. |
| Accessible alt field | Provides a text label for rendered image elements. | The browser fallback uses “Pasted image”; mobile can use the selected filename. |
| Explicit compatibility errors | Avoids claiming an image copy succeeded when the browser API is unavailable. | Safari’s unsupported branch displays an error for the image chunk. |
Three mixed-media scenarios
A screenshot walkthrough
Put each screenshot immediately after the text that introduces it. Review the rendered timeline after editing earlier paragraphs.
A diagram with commentary
Keep the diagram as its own chunk, then follow it with a text chunk that explains what the reader should notice.
An image-only sequence
The tested models allow image-only content. Confirm each image and destination caption manually because the chunker does not generate descriptive copy.
A mobile draft with native sharing
Copy image chunks individually. The combined Share
action carries text plus [Image]
placeholders rather than binary image attachments.
Objections and limitations
Can I assume rich image copying works everywhere?
No. The browser path depends on Clipboard API support and includes a documented Safari error branch. Test the actual browser and destination workflow you plan to use.
Does Social Threader create or edit images?
No image-generation or editing capability is documented. It accepts supplied images, renders them as chunks, and exposes supported copy or removal controls.
Does the workflow prove images remain private?
No. The implementation uses data URL or base64 records, but the hosted site also loads external analytics and feedback integrations and publishes no privacy guarantee. Do not infer a broader data-handling promise from the chunking code alone.
Frequently asked questions
How do I add an image to a browser thread?
Paste or drag an image into the editable source area. Social Threader represents the image with an ordered placeholder and renders it as its own chunk alongside the surrounding text.
Can every browser copy an image chunk?
No. Rich image copying depends on ClipboardItem support. The documented Safari compatibility branch surfaces an image-copy error when that API is unavailable, while text-only chunks retain their plain-text copy path.
Does the mobile Share action include the image file?
Not in the documented combined share message. Mobile sharing substitutes an [Image] placeholder; individual image chunks can be copied through the native image clipboard path.
Will images stay between the same text sections?
The mobile model stores source offsets and updates them as surrounding text changes. Browser input uses ordered placeholder tokens. Review the rendered thread after substantial edits.
Does Social Threader upload or store my images?
The repository documents in-memory data URL or base64 handling and no cloud image-storage feature. The hosted site still includes external analytics and feedback integrations, so this is not a privacy guarantee.
Related Social Threader guides
Review the image order before you post
Add supplied images, choose the text limit, and use the rendered timeline to copy every chunk in the sequence you intend.