BoltCM

Sophisticated, Lightweight and Simple

Jump to docs navigation
Edit on GitHub

Templating » Linking in Templates

There are three functions in Twig you can use to link to other pages, or to include assets like CSS and Javascript resources in your HTML. They are:

asset

Use the {{ asset() }} Twig function to create public link to the so-called assets in your theme, like JavaScript, CSS or other files.

The asset function definition is:

    {{ asset(path, packageName) }}

The asset function takes two parameters:

Packages are analogous to locations of "groups of file assets". Bolt defines a few of these packages, that can be used to create links to files in specific areas of Bolt.

Defined package names are:

Examples:

{# Include theme.css from the 'css' folder in your theme. #}
<link rel="stylesheet" href="{{ asset('css/theme.css', 'theme') }}">

{# Include jquery.min.js from the 'js' folder in your theme. #}
<script src="{{ asset('js/jquery.min.js', 'theme') }}"></script>

{# Display the kitten.jpg image, that was uploaded to the `files/` folder. #}
<img src="{{ asset('kitten.jpg', 'files') }}"></script>

This would produce, on an default install, the following output:

<link rel="stylesheet" href="/theme/base-2016/css/theme.css">

<script src="/theme/base-2016/js/jquery.min.js"></script>

<img src="/files/kitten.jpg">

For a more in-depth description of the asset function, see the Symfony documentation on assets.

Note: This function replaces the deprecated {{ paths }} template variable. As such, it's encouraged to use this function instead.

path

Use the path Twig function to create valid URI strings to paths configured on your site.

The path function definition is:

    {{ path(name, parameters = [], relative = false) }}

The path function takes three parameters:

Example 1:

<a href="{{ path('homepage') }}">Home</a>

This will create a simple link to the homepage of the site. Bolt has a Route defined that's called 'homepage', and as such, Bolt can generate a link to that specific route.

You can also pass in extra parameters, that are used to generate the link.

For example, to produce a link relative to the base of your site:

<a href="{{ path(
    'contentlink',
    {
        'contenttypeslug': link_content_type,
        'slug': link_slug,
        'section': query_section
    })
}}">
    Link to a relative path of the ContentType "{{ link_content_type }}", with
    the slug of "{{ link_slug }}", and the query parameter `section` with the
    value of {{ query_section }}
</a>

This would produce, on an default install, the following output:

<a href="/pages/about?section=koala">
    Link to a relative path of the ContentType "pages", with the slug of
    "about", and the query parameter `section` with the value of koala
</a>

Alternatively, if you wish to have the link relative to teh current page, you can set the relative parameter to `true, e.g.:

<a href="{{ path(
    'contentlink',
    {
        'contenttypeslug': link_content_type,
        'slug': link_slug,
        'section': query_section
    },
    true)
}}">
    Link to an absolute URL of the ContentType "{{ link_content_type }}", with the
    slug of "{{ link_slug }}", and the query parameter `section` with the value of
    {{ query_section }}
</a>

This would produce, on an default install, the following output:

<a href="../pages/about?section=koala">
    Link to an absolute URL of the ContentType "pages", with the
    slug of "about", and the query parameter `section` with the value of
    koala
</a>

Under the hood, this function creates links to routes defined in the Routing inside Bolt. This is the case both Bolt core functionality, but extensions can also add paths that can be used with this function.

The most commonly used routes are:

For more in-depth information about this function, see Linking to pages in the Symfony documentation.

url

The url function definition is:

    {{ url(name, parameters = [], schemeRelative = false) }}

The url function takes three parameters:

{% set link_content_type = 'pages' %}
{% set link_slug = 'about' %}
{% set query_section = 'about' %}

<a href="{{ url('contentlink',
    {
        'contenttypeslug': link_content_type,
        'slug': link_slug,
        'section': query_section
    })
}}">
    Link to a relative URL of the ContentType "{{ link_content_type }}", with the
    slug of "{{ link_slug }}", and the query parameter `section` with the value of
    {{ query_section }}
</a>

This would produce, on an default install, the following output:

<a href="/pages/about?section=about">
    Link to a relative path of the ContentType "pages", with the
    slug of "about", and the query parameter `section` with the value of
    koala
</a>
{% set link_content_type = 'pages' %}
{% set link_slug = 'about' %}
{% set query_section = 'about' %}

<a href="{{url(
        'contentlink',
        {
            'contenttypeslug': link_content_type,
            'slug': link_slug,
            'section': query_section
        },
        true)
}}">
    Link to an absolute URL of the ContentType "{{ link_content_type }}", with the
    slug of "{{ link_slug }}", and the query parameter `section` with the value of
    {{ query_section }}
</a>

This would produce, if for example you were at the site URL/people/me, the following output:

<a href="../pages/about?section=about">
   Link to an absolute URL of the ContentType "pages", with the
   slug of "about", and the query parameter `section` with the value of
   koala
</a>

Couldn't find what you were looking for? We are happy to help you in the forum, on Slack or on IRC.
Spotted a typo, or have something to add? Edit this page on GitHub.