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¶
Tag to format the enclosed text as a plain-text email.
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
Passes the delta to
core.utils.format_timedelta()
.
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
A link title attribute.
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¶
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.
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, theDoesNotExist
exception is propagated.
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¶
Outputs the HTML for a glyphicon.
See also
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"
.
An alias for a “remove” glyph in danger context.
This is the same as
{% glyph "remove" context="danger" %}
.
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 %}
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” |