Creating content

The blog app contains three different models to create content:

  • A Page is intended as a static page.
  • A Blog post is a page for the front page blog. It’s like a page, but with just a few extra properties.
  • An Image allows a content creator to upload images. Images don’t show up anywhere by default, but can be included in pages or blog posts.

All content can be created in the Admin interface at /admin/.

TinyMCE

TinyMCE is used for all HTML-formatted text. It is somewhat tuned to integrate with Bootstrap:

  • Tables are created with the table class Bootstrap uses for styling tables.
    • Extra buttons in the “Table” menu are provided to make tables striped, bordered or condensed or make rows hover. The “Responsive” button wraps the table in a div to make the table responsive on small devices.
    • Row- and Cell-Properties can be set for contextual background.
  • Use the “Formats” menu to create alerts and contextual text classes.
  • The main menu also includes submenus for Bootstrap labels and Glyphicons.

Templating

Pages and Blog posts are rendered as templates, which means you can use any standard Django templating constructs in them, e.g.:

{% page_url "clients" as clients_url %}

{% if clients_url %}
   This is only visible if you have a page with the slug "clients".
{% endif %}

Some extra context variables are also available:

Variable Description
FACEBOOK_PAGE The FACEBOOK_PAGE setting.
TWITTER_HANDLE The TWITTER_HANDLE setting.
default_site The default site from the DEFAULT_XMPP_HOST setting.
object The current page or blog post (use e.g. {{ object.title.current }}).
other_langs All languages except the current one.
site The currently used site from the XMPP_HOSTS setting.

So for example you could write:

Welcome to {{ site.BRAND }}. Our Twitter username is {{ TWITTER_HANDLE }}.

Template tags

The custom templatetags described here are available in all blog posts and pages. You don’t have to use the {% use %} template tag to load them, just do, for example:

Please see {% page 23 title="this page" %}

Core

core.templatetags.core.do_mailformat(parser, token)[source]

Tag to format the enclosed text as a plain-text email.

core.templatetags.core.format_filesize(size)[source]

Format a filesize according to the current translation.

A few example, given the template:

{% format_filesize 200 %}
{% format_filesize 3000 %}
{% format_filesize 30000000 %}

You will get:

200 bytes
2.93 kilobyte
28.61 megabyte
core.templatetags.core.format_timedelta(delta)[source]

Passes the delta to core.utils.format_timedelta().

core.templatetags.core.path(urlname, text='', title=None, anchor=None, **kwargs)[source]

Return a HTML link to the given urlname.

The difference to this tag and Django’s builtin {% url %} template tag is that this tag returns a complete HTML link. The primary use is to use dynamic links to paths in rendered blog posts or pages.

Parameters:

urlname : str

The URL name to resolve and link to. URL names are configured in an apps url.py, examples are "account:register" or "feed:rss2".

text : str

The link text. If omitted, a warning is logged and the urlname will be used instead.

title : str, optional

anchor : str, optional

Any HTML anchor to be added to the resolved URL.

**kwargs

Any keyword arguments will be passed as kwargs to the URL resolver.

Blogs/Pages

blog.templatetags.blog.page(context, pk, text=None, anchor=None, **attrs)[source]

Get a link to a page based on its primary key or slug.

This template tag allows you to generate a HTML link based on the database primary key or slug of a page object. The link (which uses the editable slug) will adapt if the slug is changed. You can also pass anchor tag, any keyword arguments will be HTML attributes.

Example:

{% page 23 %} -> <a href="/p/slug-of-page-23/">title-of-page-23</a>.
{% page 23 text="foobar" %} -> <a href="/p/slug-of-page-23/">foobar</a>.
{% page 23 text="foobar" anchor='foo' class='whatever'%}
   -> <a href="/p/slug-of-page-23/#foo" class="whatever">foobar</a>.
Parameters:

pk : int

The database primary key of the page to link to. The easiest way to get this is from the URL of the admin interface.

text : str, optional

The link text to use. If not given, the page title in the current language will be used.

anchor : str, optional

Optionally adds an anchor tag to the link.

**attrs

Any other keyword arguments will be used as HTML attributes in the link.

blog.templatetags.blog.page_url(pk_or_slug, quiet=True)[source]

Returns the URL to the given primary key or slug.

Parameters:

pk_or_slug : int or str

If an int is passed, it’s assumed to be the primary key of the requested page, otherwise it’s assumed to be the slug of the page.

quiet : bool, optional

Unless False, the function will return an empty string if the page is not found. Otherwise, the DoesNotExist exception is propagated.

blog.templatetags.blog.post(context, pk, text=None, anchor=None, **attrs)[source]

Get a link to blog post based on its primary key.

This templatetag works the same as page(), except that it links to blog posts.

Bootstrap

bootstrap.templatetags.bootstrap.glyph(glyph, context=None)[source]

Outputs the HTML for a glyphicon.

Examples:

{% glyph "ok" %}
{% glyph "remove" context="danger" %}
Parameters:

glyph : str

Name of the glyphicon. You only have to give the bare name, e.g. "ok".

context : str, optional

Contextual color of the glyphicon, e.g. "danger".

bootstrap.templatetags.bootstrap.glyph_no()[source]

An alias for a “remove” glyph in danger context.

This is the same as {% glyph "remove" context="danger" %}.

bootstrap.templatetags.bootstrap.glyph_yes()[source]

An alias for an “ok” glyph in success context.

This is the same as {% glyph "ok" context="success" %}.

CSS conveniences

  • Add the colored-glyphicon class to any element to consistently color some of the contained Glypicons:
    • “Question Sign” will be grey.
    • “OK” will be green.
    • “Remove” will be red.

Footnotes

Use the Insert/edit footnote button in TinyMCE to insert a footnote. Footnotes are automatically numbered, hovering over them will display a tooltip text. They are implemented purely in CSS, with no Javascript or server-side code required. Note that “footnote” is somewhat a misnomer, in that the text is never displayed at the bottom of the page.

The tooltip can contain raw HTML, e.g. See <a href="...">here</a>.. The footnote text is optional, in case you do not want to display any text. This is useful for example if you want to add a footnote next to a link, but with no extra text.

Footnotes are a simple <span> element and will merge with any style in similar context (e.g. with a Glyphicon)

To remove a footnote, simply edit the footnote again and don’t set any tooltip text.

TinyMCE is not very easy to extend in that even basic functionality requires a lot of Javascript code. As such, the buttons behaviour is far from perfect:

  • Footnotes don’t handle very well if used without any text. The cursor is never in the context of the footnote, it thus can’t easily be altered or removed.
  • Because the footnote style merges with Glypicons, removing a footnote on a Glyphicon also removes it.

OS-specific content

The os-* CSS classes can be used to display content only for specific operating systems. Content using the classes will be hidden unless the user appears to be using the specific platform. We use this functionality for our clients page.

The following operating system classes are available:

CSS class Description
os-osx MacOS X (apple Desktop machines)
os-linux Linux or any Unix derivate
os-ios Apple iOS (iPhone, iPad, ...)
os-android Google Android
os-win Microsoft Windows

You can use multiple classes as well, e.g. <span class="os-linux os-win">Only Linux and Windows</a>.

You can always force a particular platform by appending the URL with the os query parameter. For example, https://jabber.at/p/clients/?os=android will always display android related content.

You can also add a select box to allow the user to choose his operating system and display content appropriately using the core.templatetags.core.os_selector() tag:

{% os_selector %}
core.templatetags.core.os_selector(context)[source]

Display a selector for OS-specific content.

There are a few meta-classes available:

CSS class Description
os-mobile Displays on both iOS and Android
os-console Displays if the user selects “Linux (console)” and on Linux.
os-browser Displays if the user selects “Browser”