Let's test some photo frame renders! [Currently Obsessed]
Home About Projects

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:

(Other) A screenshot of a web page or application interface showing a text editor and image formatting options. Text: CURRENTLY OBSESSED Title Let's test some photo frame renders! Markdown For fun, 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 looks like this: Pretty simple, but also powerful. <handwriting>To turn any text into handwriting, you can add some markup to it.</handwriting> **Results in:** <handwriting>To turn any text into handwriting, you can add some markup to it.</handwriting> <photorealpreview style="wood-frame-landscape"> ![](https://sloppy-joe-app.imgix.net/blog_images/ii_ljttyt75y.jpg) </photorealpreview> AI WRITING TOOLS TEXT FORMATTING Handwriting Remove handwriting UPCASE lowercase Titlecase Capitalize IMAGE FORMATTING Polaroid iPhone 13 Pro Macbook Pro Gallery Frame Wood Frame Test Render UPLOAD IMAGES Drop file here or click to upload. Note: This image shows a user interface, which doesn't fit neatly into the provided categories. It combines elements of text, code, and interactive buttons.

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:

(Photo) A photo of a cluster of colorful houses in a rocky landscape, likely a coastal town. buildings, landscape | outdoor | colorful houses, rocky terrain | landscape Note: The image is a real-world capture of a scene, depicting buildings and landscape, with photographic qualities like depth of field and natural lighting.

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”

(Photo) A framed photograph of icebergs in a calm body of water, with a mountainous backdrop partially obscured by clouds. landscape | outdoor | icebergs, mountains, clouds | #a0b0c0 | #e0f0ff | #708090 | landscape | Colors: #a0b0c0, #e0f0ff, #708090 Note: The image is a realistic depiction of a natural scene, captured through photography. The presence of icebergs, water, and mountains suggests a real-world location.

Teide National Park, Canary Islands with “Wood Frame”

(Photo) A framed panoramic photograph of a mountainous desert landscape at sunrise. landscape | outdoor | mountainous terrain, sunrise | #D8B385 | #F5E9D6 | #A18A6E | landscape | Colors: #D8B385, #F5E9D6, #A18A6E Note: The image is a realistic depiction of a natural scene captured by a camera, making it a photograph. The wooden frame suggests it's presented as artwork.

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

(Photo) A photo of a young boy holding a large ice cream cone and smiling at the camera. Text: Pull Straight Down Tire sur la sornette Tire hacia abajo person | outdoor | Ice cream cone | candid Note: The image is a realistic depiction of a person in a real-world setting, captured by a camera. It clearly falls under the category of a photograph.

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”

(Photo) A photo of a young boy holding a large ice cream cone, displayed on a phone screen. Text: 14:04 sloppyjoe.com Pull Straight Down Tear to the Back ES DIAN ACRES JUNIORS 19 5G 1 person | outdoor | Ice cream cone, child, casual attire | candid Note: The image is a captured moment of a person, clearly a photograph, displayed on a phone's screen. The context suggests a casual snapshot.

(Illustration) An illustration of a lobster interacting with a laptop, depicted in vibrant, contrasting colors. #ff0000 | #ffa500 | #0000ff | #800080 | flat | Colors: #ff0000, #ffa500, #0000ff, #800080 Note: The image is a stylized, non-realistic depiction of a lobster, clearly an artistic creation rather than a photograph or other type of image.

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 »