How to check if a post starts with an image and get that image

Development

AI-generated summary

Theme Component Issue: Sean_Li is facing two problems with a theme component that generates a shareable image with post content. The issues occur when a post starts with an image:

  • the extracted text includes image details (e.g., {imagename}1080x2100 14 KB) before the actual text
  • if the post only contains an image, the extracted text is the image details, and Sean_Li wants to get the image instead. The goal is to have either the post text or the image, without the image details.
1

I am running into 2 related problems at the moment in my theme component,

  1. Check if the post starts with an image, I am currently getting the post content using document.querySelector(“.topic-post:first-child .cooked”) but if the post starts with an image, I get the image name and size before the start of the text, so I want a way to remove this.
  2. If the post is only an image, with no text, I want a way to get that image (or a link to the image).

The purpose of the theme component is to have a share button that generates an image which users can download to share that contains the post title and the first few lines of the post. If the post has no text, instead have the image in the post inside of the generated image. I currently have the text parts figured out, but there are two cases where issues crop up, one, where the image is near the start of the post so the text I extract is “{imagename}1080x2100 14 KB[rest of the text]” or where the only thing in the post is an image and the text extracted is “{imagename}1080x2100 14 KB”
And what I want is either to have just text, or just an image.

2 Likes