Markdown + Flickr, YouTube Shortcodes

The advantages to using Markdown and shortcodes instead of a rich text editor cannot be underestimated. Add to that the practice of hosting media outside of a website, e.g., Flickr for images and YouTube for video. Together these create a fantastic best practice for content management. We use WordPress and associated plugins but it is highly likely this same system can be adopted for many other platforms.

Advantages

• Faster to write, read and edit than using rich text editors
• Smaller to store in the database and therefore faster to retrieve
• Can be extended to include a variety of media using short codes
• Any text editor can be used to include the formatting
• Formatting is done semantically by the writer rather than added later by a different person

Markdown

Markdown is a free and open source formatting syntax and translation tool that supports a variety of platforms, most notably WordPress. The markdown syntax is transformed into HTML on the fly. Using markdown requires th following:

• Installing a plugin to enable Markdown on the website
• Learning the Markdown syntax
• Understanding the SEO and semantic aspects of the HTML equivalences

Markdown Syntax

Italics

_Text_ (single underscores) = <em>Text</em>

Displayed usually as italics. For initial introduction of key terms or proper nouns, or anything that was previously marked up by a single quotation mark (predating use of italics in typesetting).

Bold

__Text__ (double underscores) = <strong>Text</strong>

This is displayed as bold but semantically is used best as a label inside a sentence or paragraph, for example in long bulleted lists.

Block Quotes

> Text (greater than sign and a space) = <blockquote>Text</blockquote>

This should have two hard returns before and after its use. The blockquote is used for long quotations or for a pull-out. Usually formatted as indented and italicized.

Paragraphs

In between paragraphs, use of two hard returns (enter, enter) will indicate a paragraph break =

<p>Paragraph text here.</p>

Bulleted Lists

* Bulleted list item (asterisk + space) =
<ul><li>Bulleted list item</li></ul>

All lists should have two hard returns before and after the list, and a single hard return at the end of each list item. Sub-bulleted lists can be added by simply indenting four spaces, as such:

* Bullet
    * Sub-bullet

Renders as such:

• Bullet
  • Sub-bullet

Ordered Lists

1. First
2. Second (number, period, space) = ordered list
<ol><li>First item</li><li>Second item</li></ol>.

Renders as:

1. First
2. Second

Indented list items can be added as with sub-bullets, by adding four spaces.

## Subhead ##
### Sub-Subhead ###

All subheads should be preceded by double enter and have a single or double enter afterward. These are equivalent to:

<h2>Subhead</h2> and
<h3>Sub-Subhead</h3>

H3s are not necessary for any given web page, but can be used if it is particularly helpful for the information being presented. Most subheads should have keywords in them, and at the same time appear natural to the reader. They should be fairly short, perhaps 3-7 words. And they should indicate the contents of the section.

URLs are created with anchor text and destination and optionally a Title attribute. For example:

[Anchor text](http://domain.com/page.html)
[Anchor text](http://domain.com/page.html "Title")

Note that there are no spaces between the square brackets or parentheses, only within the Anchor text, if needed. Note that email addresses can be created with a simple enclosing with angle brackets, e.g.,

<name@domain.com>

In addition, if the Anchor text is the same as the full URL, simply use the same angle brackets as with an email address:

<http://domain.com/page.html>

Horizontal Rule

--- (three hypens) = <hr /> horizontal rule

Additional HTML Characters

In addition to these shortcodes, there are several HTML entities which should be used when writing copy for the web:

© = copyright sign

— = m-dash

• A wider dash which replaces a double hyphen to create a dash between parenthetical asides.

& = ampersand

• Note this should not be used in any subheads or link titles, but only in body text.

™ = trademark TM

® = reserved mark R

HTML Table in Markdown

Markdown extra has a nice readable syntax for table markup. Note the colon at the end of the second column divider, that signifies right alignment.

| Item   | Cost |
|--------|-----:|
| Flight | 5000 |
| Taxi   |  900 |

Renders as:

YouTube Videos

We use the Smart YouTube plugin that allows us to set the width and height for body and sidebar, and embed a YouTube video by adding a v to the http in the YouTube video URL, as follows:

httpv://www.youtube.com/watch?v=us5mc-cyNos

Renders as follows

Flickr Images

Flickr is an extremely useful way of storing and managing images. There are several advantages:

• Faster than uploading and managing images to a WordPress installation
• Essentially a free-to-use distributed cache server, faster to serve images
• Allows for effective discovery and image search results ranking
• Provides useful links back to the pages using the image
• Image URLs can be reused on any given website
• WordPress plugins allow for support of gallery and tag-based collection display

Flickr Shortcodes

Currently we recommend the use of an updated version of the Flickr Gallery plugin. There are some bugs that have crept into this plugin especially with the use of flightbox as the lightbox.

Use Flickr Gallery for images

Flickr Gallery is useful and has been around a long time. It supports different sizes and floating left or right. The default size has been adjusted to the 640 longest edge (if landscape it is 640px in width, if portrait it is 640px in height).

[flickr]imagenumber[/flickr]
[flickr size=”small” float=”right”]imagenumber[/flickr]

The imagenumber is the unique number assigned to any given image in Flickr. This number is located in the URL of the Flickr image page. What is useful is that any flickr image publicly available can be embedded (not only one’s own images). For example, this search will provide the list of interesting Creative Commons’ licensed images.

• http://www.flickr.com/search/?l=commderiv&ss=2&ct=6&mt=all&adv=1&s=int

Flickr Gallery Thumbnails and Lightbox

Slickr Flickr has a much faster lightbox effect currently. There are many other options including transitioning slideshows. See the Slickr Flickr site for more detail.

[flickr-gallery mode=”tag” tags=”tagname” tag_mode=”all”]

This will display a set of up thumbnails with lightbox effect, that have been tagged with “tagname”

Additional Note on Alt and Title

To make it simple and automatic, we use an additional plugin called SEO Friendly Images. This is then tuned so that Alt and Titles are added based on the page title. This does not require any user intervention.

Print PDF

No related posts.