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 to yes, then the link will be rendered with a Django static command. See file parameter below.

• text - Text to display on the button.

Optional Tag Parameters

• file - If set to yes 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.:

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>