Let's test some photo frame renders!

Joe Heitzeberg
July 17, 2022

I’m creating the blogging software I’ve always wanted. One aspect is the idea of enabling handwritten posts and beautiful visuals for the photos without much (any?) effort. It’s a work in progress, but here are some examples so far.

The editor, which didn’t exist ~48 hours ago, so please don’t laugh, looks like this:

For example, this code:

<handwriting>
  To turn any text into handwriting, you can add some markup to it.
</handwriting>

Results in:

And the following tag can be wrapped around any ordinary image…

<photorealpreview style="wood-frame-landscape">
   ![](https://sloppy-joe-app.imgix.net/blog_images/ii_ljttyt75y.jpg)
</photorealpreview>

…to automatically transform the image into what looks like a photograph of a framed photo of that image:

That’s a photo of Ittoqqortoormiit, Greenland, by the way.

The user doesn’t have to understand anything about markdown, HTML or any of these special tags – they just select their text and click the tool panel buttons – all of the manipulation is taken care of automatically.

Here are some more examples of the handwriting and image manipulation.

Scoresby Sund, Greenland with “Wood Frame”

Teide National Park, Canary Islands with “Wood Frame”

Here’s “Wood Frame” in portrait orientation. Portrait vs. landscape is handled automatically.

This one is called “Gallery Frame”

Oh, I almost forgot, pretty formatting of code is automatic too. The blog of my dreams, I say!

I’ve been using Octopress for my personal blog for a few months now, and I’ve been very happy with it. I’ve been meaning to get around to writing a post about it, but I haven’t had the time.

But there’s one thing that I’ve been wanting to do for a while now, and that’s to add comments to my blog. Octopress has a few options for comments, but they all require setting up your own server, which I don’t really want to do.

So, I decided to see if I could get Disqus to work with Octopress. Disqus is a popular commenting system that you can use for free, and it doesn’t require you to set up your own server.

It turns out that it’s actually pretty easy to get Disqus working with Octopress. I’ll show you how in this post.

def self.process(operation_name, full_text, start_selection_index, end_selection_index)
  if !SUPPORTED_TEXT_FORMATTING_OPERATIONS.include?(operation_name)
    raise "Unsupported text formatting operation: #{operation_name}"
  end
  # ... snip
end

Here’s a design called “Test Render”. Some day I’ll have a library of awesome designs and better names.

This one is called “iPhone 13 Pro”

Next up: the AI Writing Tools that you may have noticed in the screenshot.

Ready for more?

Check out other posts from this blog.

View all »