add support for image posts, links, reblogs

[isaacs]

Either using a new plugin to handle the tumblr exported data, or the yaml frontmatter in markdown files

[isaacs]

Using Remark for all content organizing. The frontmatter will determine what the template does.

[isaacs]

Text, answers, and chats are all straightforward.

Photo posts are challenging.

If there's one photo, it should be a single 100% width image. Easy peasy, then the remark images and link-files plugins will do the trick to make sure it's in the right place.

But multi-photo sets with a photoset_layout field are more tricky. Tumblr does some magic heuristics to make it look nice with a little bit of a border around them all. The padding is easy enough with CSS, but the trickier magic is in making them all line up nice when there's more than one in a row.

For a single photo, I could just drop it into the markup. But photos with a layout need a bunch of math to be done, and I don't want to have to do that whenever I write a post. I'd much rather just dump a bunch of URLs into the yaml and let the site figure it out.

Also, I'm not going to want to get the dimensions and whatnot whenever I make a photos post.

And, all of this has to end up as markup in the body of the post, or else the file plugins won't do the right thing to pull it in, and I'm left with weird file references in the frontmatter, pointing to something that the site won't serve.

So, I think the solution here is to create a remark plugin that:

1. looks at the actual image file
2. does the math to figure out the widths
3. spits out the fancy HTML into the post body, complete with CSS to truncate the images that go over the height. (eg: http://blog.izs.me/post/99517243813/pb-and-marceline-is-one-of-the-most-poignant-love)

At that point, I can maybe get to something like this:

---
title: Some photos I took
tags:
  - kids
  - flowers
  - bread
photo_layout: '12'
photos:
  - ./juniper.jpg alt text goes here cuz why not
  - ./rose.jpg this is a rose
  - ./sourdough.jpg I like making bread
---
These are some things I like to take pictures of.

And why not do that for one photo, also? It's easier than ![alt text](./foo.jpg "title i guess?").

What I don't want to do is have the importer do the math and write out the HTML body, and then have to write HTML every time I want to share photos, because I'll just never do that. (Or, more likely, I'll let my tumblr stay alive, and just write and re-import whenever I do, but that feels hella jank.)

[isaacs]

Oh, another thought: I could just look at what gatsby-remark-images is doing, and do the same thing but with the images in the photos list in the frontmatter, and then leave it for the template to templatize the frontmatter.photos stuff (now transformed to /static/blerg.png urls, with height and width and whatnot attached).

[isaacs]

Or maybe ditch the tumblr-style photo_layout cleverness, and do something like this?

---
title: Some photos I took
tags:
  - kids
  - flowers
  - bread
photos:
  - ./juniper.jpg alt text goes here cuz why not
  - - ./rose.jpg this is a rose
    - ./sourdough.jpg I like making bread
---
These are some things I like to take pictures of.

Ie, instead of doing '12' to say "1 on the first row, 2 on the second", I could just make nested arrays. Then each item in the photos array is a row with 1 or more photos in it.

I'd still have to do all the same math, but then the authoring feels a little clearer and less error-prone.

[isaacs]

Ok, the plugin is doing the right thing with photosets and photos now, but I think I need to have it also do audio and video in the same way somehow. Using the <Media> tag is cute, but it doesn't give me the hooks I need to ensure that they're rendered in the ideal width, so they look pretty jank, and it's harder to style properly.

[isaacs]

These are all in now.