Masseria Website Content Editing

How to use Prose.io to edit content for www.masseria-dc.com.

Prose.io Page and Post Editor

Prose.io is a simpler editor for text pages.

Unlike the barebones editor that GitHub provides, Prose includes a toolbar that makes inserting Markdown text simpler.

Visit http://prose.io to get started. Click “Authorize with GitHub” and use your GitHub user id and password to log in.

Pick the website you want to work with from the list (either “masseria” or “test-masseria”).

Then you’ll be treated to a list fo the pages on the website.

  1. Click on a filename to edit the basic page. About.md, careers.md, etc. are basic pages
  2. The _posts folder holds Team Bios and Press Room stories, tucked into folders named appropriately
  3. Click the View Drafts button to see a list of posts that are not yet published

Prose.io Page and Post Editor

Editing with Prose.io

To edit the text of a web page, click on its filename from the list. Here we’re editing index.md, the site homepage:

http://prose.io/#elstudio/masseria/edit/gh-pages/index.md

  1. The toolbar provides shortcut for headings, lists and inserting links and images
  2. Preview the page as it will look when you save it
  3. Front matter is hidden by default. Click the lines icon to edit front matter variables
  4. The gear icon allows you to rename the file or move it to another folder
  5. Save your changes when you’re done. If you like, you can provide a comment about what changed.

Editing with Prose.io

Uploading Images

You can use Prose.io to upload an image to the website.

  1. Click the photo icon in the editor toolbar
  2. Drag an image onto the window, or click the green link to select an image for upload
  3. Or choose an image that has already been uploaded. Scroll this list down to see what other images are available
  4. Click Insert to actually upload your image

Uploading Images

If this is a Team Bio or Press Room story, don’t leave your image inline

  1. Prose.io uploads your image to the server. (The save icon is replaced by a spinning green arrow while this is happening.)
  2. By default, Prose includes the Markdown code to insert the image inline in your page. If this is a regular page like Reservations/Events, this may be what you want.
  3. But if this is post – either a Team Bio or Press Room story, then we’re not quite done. To get the consistent image formatting that Posts require, we need to add the image filename to the post header. First copy the image filename to your clipboard – just the part highlighted in purple, without any /media/ or slashes. Once you’ve copied the filename, you can delete this line from the editor.
  4. Click the dashed lines icon to switch over to the metadata view…

If this is a Team Bio or Press Room story, don't leave your image inline

Update the post’s metadata

Edit the post’s metadata to tell the post to use your image.

  1. Click on the dashed lines icon to switch to the metadata screen
  2. Paste the image filename into the image: variable
  3. Click Done
  4. When you’re ready, save your changes

Update the post's metadata

Updating Menus and Cocktail Lists

While Prose.io is great for editing text and uploading images, it won’t upload PDFs, which we use for the daily menus and wine list.

These will have to be uploaded by Git directly, or by putting them into a public folder on Dropbox.

Once they are available for anyone to download, make sure to edit the metadata of menus.md to point to the files.

  1. menu: URL for the menu pdf
  2. wines: URL for the wine list pdf
  3. cocktails: URL for the cocktail list pdf

If you simply replace the existing menu pdf file, these may not have to change.

Updating Menus and Cocktail Lists