Adding a photo post, with photos along side content

[jphastings]

I can use IndieKit today to create photo posts (I tend to use Sparkles as my micropub client), but it requires that my photos are uploaded before the text content is uploaded; which means the photo post's text is unconnected from the image content in my blog's file system.

My historic photo posts are structured like this: (edit: this is a common structure when using Hugo)

photos/
└──2024-02-29-guys-and-dolls/
   ├── adelaides-hotbox.webp
   └── index.md

But my IndieKit config seems to require that my photos and post data end up in different places:

photos/
├── ya2ic.webp
└──2024-02-29-guys-and-dolls/
   └── index.md

Is this a limitation of MicroPub? My MicroPub client? IndieKit? Does anyone have any tips?

[thejdev]

Hi @jphastings,

I have just been through this myself, so I can provide some suggestions.

My understanding indiekit can be configured to put markdown files & media files in the same folder, but you shouldn't do this, as Jekyll does not deal with this well (see here and here)

To summarise (to the best of my understanding), within a particular folder, Jekyll will either

1. Convert all md files to html and ignore all other files (if the folder is a collection, i.e. starts with '_') OR
2. Leave the folder as is (and not convert md to html).

For me, the most appropriate method was to use the _posts (or _photos) folder for markdown files, and use /assets/photos/ for the corresponding media files.

I hope this helps,

JD

[jphastings]

Thanks @thejdev! Luckily I use Hugo (not Jekyll), so I don't have the same problem 😊

Are you aware of how I'd configure Indiekit to put the photos in the same folder, given I don't need to worry about the same problem as you?

[thejdev]

Yes,

The following configuration may help. I was previously having issues as I didn't understand what PostType my micropub client was sending. The config below will work for both Notes and Photos.

{
  "publication": {
    "me": "siteurl,
    "postTypes": {
      "note": {
        "name": "Post",
        "post": {
          "path": "photos/{yyyy}-{MM}-{dd}/index.md"
        },
        "media": {
          "path": "photos/{yyyy}-{MM}-{dd}/{filename}"
        }
      },
      "photo": {
        "name": "Post",
        "post": {
          "path": "photos/{yyyy}-{MM}-{dd}/index.md"
        },
        "media": {
          "path": "photos/{yyyy}-{MM}-{dd}/{filename}"
        }
      }
    }
  }
}

[jphastings]

Sadly that doesn't work 😔

If I use the Indiekit client to publish a photo (ie. go to /posts/create/?type=photo on my Indiekit server), then choose a local photo file to add to a post it gets uploaded immediately as a file, and ignoring the {slug} part of the photo.media.path specified in that part of the config. (see mine below)

You can see the commit that uploaded the photo, the commit that uploaded the post and the manual correction commit I needed to do to make it work. (I also had to correct some of the yaml details; but I know I need to build my own Hugo preset to deal with the fact that my YAML uses media as the tag for photos & videos, not photo and images)

export default {
  publication: {
    postTypes: {
      photo: {
        name: "Photo",
        post: {
          path: "content/photos/{yyyy}-{MM}-{dd}/{slug}/index.md",
          url: "photos/{yyyy}-{MM}-{dd}/{slug}/"
        },
        media: {
          path: "content/photos/{yyyy}-{MM}-{dd}/{slug}/{filename}"
        }
      }
    }
  }
}