Button Link¶
Processor name: button-link
You can create a link on a button using the following text tag:
{button-link link="http://www.google.com" text="Visit Google"}
Required Tag Parameters¶
link
- The URL to link to.- If the given link is a relative, a placeholder for Django to prepend the root is outputted.
- If the
file
parameter is set toyes
, then the link will be rendered with a Django static command. Seefile
parameter below.
text
- Text to display on the button.
Optional Tag Parameters¶
file
- If set toyes
the link will be rendered with a Django static command. This is useful if you wish to create a button link to a file or image.- For example, the link
files/python-sort-example.py
would be rendered as{% static 'files/python-sort-example.py' %}
. This can be overriden, see the override section below.:
- For example, the link
The default HTML for button links is:
<a class='button' href='{{ link }}'>{{ text }}</a>
Example 1
Using the following tag:
{button-link link="http://www.google.com" text="Visit Google"}
The resulting HTML would be:
<a class="button" href="http://www.google.com">Visit Google</a>
Example 2
Using the following tag:
{button-link link="files/python-sort-example.py" text="Download Python Sorting Example" file="yes"}
The resulting HTML would be:
<a class="button" href="{% static 'files/python-sort-example.py' %}">Download Python Sorting Example</a>
Overriding HTML for Button Link¶
When overriding the HTML for button links, the following Jinja2 placeholders are available:
{{ link }}
- The URL.{{ text }}
- Text to display on the button.
If the file
parameter is set to yes
, the link is passed through the relative-image-link.html
template. The default HTML for relative images is:
{% autoescape false -%}
{{ "{% static '" }}{{ file_path }}{{ "' %}" }}
{%- endautoescape %}
Example
For example, providing the following HTML:
<a class="btn btn-primary" href="{{ link }}">{{ text }}</a>
with the following tag:
{button-link link="https://github.com/uccser/verto" text="Verto on GitHub"}
would result in:
<a class="btn btn-primary" href="https://github.com/uccser/verto">Verto on GitHub</a>