Variable for photo-only posts

Similar to the idea of {{ if .Title }}, does Micro.blog (or Hugo) have a way to identify if a post only contains images and capture that to a variable?

I don’t know if there’s a built-in way, but we could approximate this functionality. Here’s a start:

{{ $images_only := and .Params.images (not .Plain) }}

{{ if $images_only }}
  🌆 This post is probably just images.
{{ end }}

That will work reasonably well but has some false positives, like posts containing no text, a photo, and a video. Another edge case is image posts that contain screenshots and illustrations instead of photos.

1 Like

Interesting, the first false positive you mentioned is exactly what I was thinking of this for; a post either with no text whatsoever, or one that starts with an image. Didn’t consider the possibility of video or audio either. Could we not catch something based on the presence of an <img> tag or similar? Even a screenshot attached would still have the tag, correct?

I think I just came across something that might work, depending how tags in the content get recognized. The substr function is used to extract parts of a string, so using the following code:


{{ $string_to_check := {{ .Content }} }}
{{ $begins_with := substr $string_to_check 0 10 }}
{{ if in $begins_with “/<img/” }}
    something to indicate media post here
{{ end }}

So long as the content of a title-less post started with some kind of media, I could target the link to be whatever I specified? I’m assuming there would need to be a way to escape the < and > so that the function will literally search for them.

The substring variant will match posts that start with an image followed by a long text. That’s not quite what you want. I think? :blush: The post is not allowed to contain text, right?

The solution I propose above will reject posts with text; the (not .Plain) part ensures that. Here’s a handful of blog post examples and how my solution will handle them:

  • Post with a single image: :green_circle: accepted.
  • Post with multiple images: :green_circle: accepted.
  • Post with text and image(s): :red_circle: rejected.
  • Post with images and an audio file: :green_circle: accepted.
  • Post with only text: :red_circle: rejected.
  • Post with only audio: :red_circle: rejected.
  • Post with a screenshot of a text-only tweet: :green_circle: accepted.
  • Post with an inline SVG image: :red_circle: rejected.
  • Post with video: :red_circle: rejected.
  • Post with video and image: :green_circle: accepted.
1 Like

That was my original thought, but now I’m remembering some people will post an image and then have text to follow it. So I want something that can search the string of the content and flag any post that starts with an <img>, <video>, or <audio> tag.

Ah, I see. Well, that changes things a bit. :blush: So, a post that starts with a sentence followed by an image, like this one, should not be flagged?

Correct! I’ve got code that compiles properly, but it’s not working as expected. Still crunching on it…

Got it to work, thanks for your help and generating ideas! Here’s the code:

{{ $stringCheck := .Content }}
		{{ $stringResult := substr $stringCheck 0 10 }}
		{{ $image := "<img" }}
		{{ $video := "<video" }}
		{{ $audio := "<audio" }}
		{{ if in $stringResult (or ($image) ($video) ($audio)) }}
			<li>
				<a class="post-link archive-article-title u-url" href="{{ .RelPermalink }}">
					<div class="post-link__heading">
						<h1 class="post-link__title">media post</h1>
					</div>
					<span class="post-date">
						<time datetime='{{ .Date.Format "2006-01-02T15:04:05.000-07:00" }}' itemprop="datePublished">{{ .Date.Format "Jan 2, 2006" }}</time>
					</span>
				</a>
			</li>

So my post with only an image looks like this in the list:

My aim is to have the index page only show a list of the most recent posts, but one that starts with an image wouldn’t have a title or excerpt text to use. Hence my plan for this instead…

1 Like

Another potential method (or an additional filter) for finding posts with photos, or more specifically posts whose main purpose is a photo or image is to use use the post type discovery algorithm. Given that Micro.blog is built on a variety of IndieWeb building blocks, most photos could/should have a class of u-photo on their img tags, so you could search for these instead or in addition to. I believe there are a set of parsers and tools out there that do this in a few languages already and someone in the IndieWeb Dev chat can direct you to them if they’re not linked to the page above.

1 Like

Wow, didn’t know about that functionality but it seems like it’s pretty capable. I think I’ll start with releasing the theme as is and then play around with that some more. If I can use it to more specifically identify and label the post types, I could see the potential of applying it to other themes going forward. Thanks, Chris!