o-blog

Adding an image into a post

2012-08-21T10:43:00Z

Adding an image to a post is pretty simple since Org-mode offers a special link scheme for that. Image source file can be stored anywhere since its path is valid. During the export process, the image file is copied into a folder related to the post and all links are corrected to point to its new location.

For example, the following piece of code will copy the emacs-logo.png from the current directory and is is then copied into it into tips/2012/08/21_adding-an-image-into-a-post/emacs-logo.png.

file:emacs-logo.png

The HTML result is something similar to:

<img src="21_adding-an-image-into-a-post/emacs-logo.png"  alt="21_adding-an-image-into-a-post/emacs-logo.png" />

A best practice is to have all files info a /files folder. Then you can create a sub-folder for each posts such as:

/files/post1/file1
/files/post1/file2
/files/post2/file
…

Create static pages

2012-05-21T12:48:00Z

Static pages are create exactly like blog pages. The only thing you need to add is a PAGE property. The exported path is relative to #+PUBLISH_DIR:.

You can also specify a custom template for your static page by adding a TEMPLATE property. The template path is relative to #+TEMPLATE_DIR:.

* Static page
   :PROPERTIES:
   :PAGE:     path/to/static/page.html
   :TEMPLATE: static-page.html
   :END:

Add a custom font

2012-05-07T16:38:00Z

Google webfonts can be easily used in o-blog in 2 different ways: using the Google API, or by providing resources in the templates/style directory.

Caution

Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.

Both examples below use the Yanone Kaffeesatz font.

Using Google API

The quick use provides an import snippet such as:

@import url("http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700&subset=latin,latin-ext");

That line should be included into the templates/style/less/o-blog-default.less file in which you should also add something like:

h1, h2, h3, h4, h5, h6 {
    font-family: "Yanone Kaffeesatz", sans-serif;
}

And that's it.

Providing resources

That is less efficient in terms of network resources but provides a good alternative for offline publications.

The script get-font does all needed jobs.

get-font

You can run:

./get-font 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700&subset=latin,latin-ext'

And add the font declaration in templates/style/less/o-blog-default.less:

@import "font-Yanone-Kaffeesatz.less";

Finally, declare its use as in the Google API version:

h1, h2, h3, h4, h5, h6 {
    font-family: "Yanone Kaffeesatz", sans-serif;
}

Some bootstrap features

2012-05-03T21:40:00Z

Hero-unit

#+begin_o_blog_hero_unit
#+HTML: <h1>Heading</h1>

 tagline

#+BEGIN_HTML
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
#+END_HTML
#+end_o_blog_hero_unit

Heading

tagline

Learn more

Page header

#+begin_o_blog_page_header
#+HTML: <h1>Page header</h1>
Some text
#+end_o_blog_page_header

Using labels

Label and annotate text using a label:TYPE link prefix where TYPE is one of default, success, warning, important, info or reverse. The URL part of the link is used as the label text.

[[ob-label:default][Default]]
[[ob-label:success][Success]]
[[ob-label:warning][Warning]]
[[ob-label:important][Important]]
[[ob-label:info][Info]]
[[ob-label:inverse][Inverse]]

Default
Success
Warning
Important
Info
Inverse

Using badges

Indicators and unread counts as for labels. Use the badge:TYPE link prefix.

[[ob-badge:default][Default]]
[[ob-badge:success][Success]]
[[ob-badge:warning][Warning]]
[[ob-badge:important][Important]]
[[ob-badge:info][Info]]
[[ob-badge:inverse][Inverse]]

Default
Success
Warning
Important
Info
Inverse

Using progress bars

For loading, redirecting, or action status. Use a progress:TYPE link where TYPE is one of info, success, warning or danger. Additional classes (striped or active) can be added using comma. The URL is the progress percent.

[[ob-progress:info][25]]
[[ob-progress:success,striped][50]]
[[ob-progress:warning,striped,active][75]]
[[ob-progress:danger][100]]

Well

Use the well as a simple effect on an element to give it an inset effect.

 #+begin_o_blog_well
, Look, I'm in a well!
 #+end_o_blog_well

Look, I'm in a well!

Using Bootstrap grid

2012-02-10T01:19:00Z

Bootstrap scaffolding can be defined using both #+begin_o_blog_row and #+end_o_blog_row directives (or <og TAB shortcut). A new column can be started using #+o_blog_row_column single directive (or <ogr TAB shortcut).

Example

#+begin_o_blog_row 2 -1 show-grid
Column 1
#+o_blog_row_column 2
Column 2
#+end_o_blog_row

Output

Column 1

Column 2

The syntax is:

#+begin_o_blog_row SPAN OFFSET GRID-CLASS
Column 1
#+o_blog_row_column SPAN OFFSET
Column 2
...
#+o_blog_row_column SPAN OFFSET
Column n
#+end_o_blog_row

Adding icons

2012-02-10T00:19:00Z

Icons from glyphicons are supported, by simply naming the icon using italics style forward-slashes:

Source example

/icon-calendar/ calendar

Rendered output

icon-calendar calendar

Icons can also be used for the top navbar using something like:

Source example

- [[#][/icon-book icon-white/ Documentation]]
  - [[file:./templates.html][Templates]]
  - [[file:./structures.html][Structures]]
  - [[file:./functions.html][Functions]]
  -
  - [[file:./faq.html][FAQ]]

- [[#][/icon-file icon-white/ Blog]]
  - [[file:./tips/2012/08/21_adding-an-image-into-a-post.html][Adding an image into a post]]
  - [[file:./tips/2012/05/21_create-static-pages.html][Create static pages]]
  - [[file:./tips/2012/05/07_add-a-custom-font.html][Add a custom font]]
  - [[file:./tips/2012/05/03_some-bootstrap-features.html][Some bootstrap features]]
  - [[file:./tips/2012/02/10_using-bootstrap-grid.html][Using Bootstrap grid]]

- [[file:./templates.html">Templates

Structures

Functions



FAQ





icon-file icon-white Blog

Adding an image into a post

Create static pages

Add a custom font

Some bootstrap features

Using Bootstrap grid





icon-tags icon-white Tags

Please note the blank line between menu items. If blanks are omitted, the rendered result might be damaged.

Using modal source code

2012-02-09T23:13:00Z

The Modal bootstrap script can be used to display the content of an external file in a modal window. The magic line is:

#+O_BLOG_SOURCE: path/to/file [mode]

The org template shorcut is <os TAB. Two parameters might be used:

The mandatory /path/to/file which is the path to the file from which content should be read.
The optional mode parameter, which can be determined if omitted.

Here is an example of the sample-init.el file:

sample-init.el

Alerts

2012-01-15T20:40:00Z

Alerts are declared in o_blog_alert blocks. There are 4 types of them:

info
success
warning
error

#+begin_o_blog_alert <TYPE> <title>
Text of the alert
#+end_o_blog_alert

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl.

Danger

Caution

Tip

Information

Some HTML5 samples

2012-01-10T20:58:00Z

tag: <details>

This tag works only with the Chrome browser.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.
Sed diam.
Nam vestibulum accumsan nisl.

#+HTML: <details>
#+HTML: <summary>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</summary>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.
- Sed diam.
- Nam vestibulum accumsan nisl.
#+HTML: </details>

Example of some org syntax

2012-01-07T11:23:00Z

Titles

This is a level 1

Level 2

This is a level 2

Level 3

This is a level 3

Level 4

This is a level 4

Level 5

This is a level 5

Level 6

This is a level 6

Up to 6 levels of indentation can be used.

Praragaphs

Nullam eu ante vel est convallis dignissim. Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum, lacus tellus malesuada massa, quis varius mi purus non odio. Pellentesque condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non luctus diam neque sit amet urna. Curabitur vulputate vestibulum lorem. Fusce sagittis, libero non molestie mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia eros. Sed id ligula quis est convallis tempor. Curabitur lacinia pulvinar nibh. Nam a sapien.

Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo. Vestibulum convallis, lorem a tempus semper, dui dui euismod elit, vitae placerat urna tortor vitae lacus. Nullam libero mauris, consequat quis, varius et, dictum id, arcu. Mauris mollis tincidunt felis. Aliquam feugiat tellus ut neque. Nulla facilisis, risus a rhoncus fermentum, tellus tellus lacinia purus, et dictum nunc justo sit amet elit.

Great clouds overhead
Tiny black birds rise and fall
Snow covers Emacs

– AlexSchroeder

Everything should be made as simple as possible, but not any simpler – Albert Einstein

Everything should be made as simple as possible,
but not any simpler

Lists

As taken from the Org-mode manual:

My favorite scenes are (in this order)

The attack of the Rohirrim
Eowyn's fight with the witch king
- this was already my favorite scene in the book
- I really like Miranda Otto.
Peter Jackson being shot by Legolas
- on DVD only
He makes a really funny face when it happens.

But in the end, no individual scenes matter but the film as a whole. Important actors in this film are:

Elijah Wood: He plays Frodo
Sean Austin: He plays Sam, Frodo's friend. I still remember him very well from his role as Mikey Walsh in The Goonies.

Footnotes

The Org-mode homepage¹ now looks a lot better than it used to.

Emphasis and monospace

You can make words bold, italic, underlined, code and verbatim, and, if you must, ‘+strike-through+’. Text in the code and verbatim string is not processed for Org-mode specific syntax; it is exported verbatim.

Horizontal rules

A line consisting of only dashes, and at least 5 of them, will be exported as a horizontal line (‘<hr/>’ in HTML and \hrule in LaTeX).

As shown previously.

Comment lines

Lines starting with ‘#’ in column zero are treated as comments and will never be exported. If you want an indented line to be treated as a comment, start it with ‘#+ ’. Also, entire subtrees starting with the word ‘COMMENT’ will never be exported. Finally, regions surrounded by ‘#+BEGIN_COMMENT’ … ‘#+END_COMMENT’ will not be exported.

Images and Tables

Table

This is the caption for the next table (or link)
Header 1	Header 2	Header 3	Header 4	Header 5
1.1	1.2	1.3	X	This cell has a very `long` `line` with _special ^layouts
2.1	2.2	3.3	Y
3.1	3.1	C.1	D.1	E.1

Image

Literal examples

Some example from a text file.

Here is an example

Some example from a text file.

(defun org-xor (a b)
  "Exclusive or."
  (if a (not b) b))

1:  (save-excursion
2:     (goto-char (point-min)))

In line 1 we remember the current position. Line 2 jumps to point-min.

Special symbols

Angles are written as Greek letters α, β and γ.

Subscripts and superscripts

The mass of the sun is M_sun = 1.989 x 10³⁰ kg. The radius of the sun is R_sun = 6.96 x 10⁸ m.

Footnotes:

¹ The link is: http://orgmode.org