New Media Features in Prose

By Tristen Brown on May 28 2013

This week we added new features to Prose that improve the overall experience of editing content posts. Here's a breakdown of some of the new features released:

Link dropdown with searchable link population

When you select the link button from the toolbar while editing a markdown post, there is now a dropdown menu to set links to posts in your site. Selecting existing links pre-populate the dropdown form fields making it easy to edit links under the same interface.

What's more, you can include a formatted link list as a JSON document and add the following line to your prose.yml file:

prose:
  relativeLinks: 'URL-TO-THIS-FILE.jsonp'

This produces a searchable listing of those links making it easy to reference internal site links or important external links.

Animated link dropdown

Image Dialog

We've made it easier for Prose users to add images to posts. To make this an inline experience, we introduced drag-and-drop uploading for images as well as the option to provide a browsable media directory to embed existing media to a page.

Uploading

Taking advantage of HTML5 drag-and-drop and GitHub's new file CRUD api, you can now attach images fast by dragging and dropping them onto the post editor, the old school way of selecting them from the file selection menu, or by pasting URLs from the clipboard.

Media Dialog

View of the Media Dialog

If you have specified a media directory, content is automatically uploaded there. Otherwise, it is placed in the same directory as the file you are on. When you select an image to upload while the image dropdown is open, you can provide a custom path (from the url form field) of where you want the image to be uploaded.

Media Directory

If you specify a media value to your prose.yml file, authors are provided a listing of available images in that directory to add to a post. Here's what that configuration line looks like:

prose:
  media: 'DIRECTORY'

If media directory is not specified, the dropdown accounts for this by adjusting size:

Insert an Image

Insert image dropdown when a media directory is not specified

A new inline help section

Prose uses GitHub Flavored Markdown, a subset of Markdown that provides additional functionality. For helpful documentation of the available options, we've added inline help to quickly scan through:

Help Dialog

View of the Help Dialog

Next up

Over the next few weeks we will responsively adapt Prose's smart, simple UI as well as make some key performance improvements. Development of Prose is open source so you can track or participate on the progress of queued work from the issues page

As with any of the new features that require configuration you can keep up to date or learn more from the wiki page on GitHub

Start using Prose today now at prose.io, or check out the source on GitHub.

0 tweets link to this blog post. Start a conversation with @developmentseed on Twitter.

Search

No results found.
About
Projects
Team
Blog