HTML filters

Attribute Return type Description
css_tag string or null Creates <link> HTML tag.
script_tag string or null Creates <script> HTML tag.
default_pagina­tion string or null Creates a set of links for paginated results.
highlight string or null Highlighs part of a string.
img_tag string or null Creates <img> HTML tag.
link_tag string or null Creates <a> HTML tag.
texy string or null Creates HTML syntax from Texy syntax.

css_tag

Creates <link> HTML tag.

{{ 'http://www.example.com/some.css' | script_tag }}
{# <link href="http://www.example.com/some.css" rel="stylesheet" media="all"> #}

You can provide media attribute:

{{ 'http://www.example.com/some.css' | script_tag('print') }}
{# <link href="http://www.example.com/some.css" rel="stylesheet" media="print"> #}

script_tag

Creates <script> HTML tag.

{{ 'http://www.example.com/some.js' | script_tag }}
{# <script src="http://www.example.com/some.js"></script> #}

default_pagination

Creates a set of links for paginated results.

It's used with pagination object.

{{ pagination | default_pagination }}
{#
<ul class="pagination">
   <li class="pagination-previous"><a href="http://www.example.com/category/name?page=4">&laquo;</a></li>
   <li class="pagination-first"><a href="http://www.example.com/category/name">1</a></li>
   <li>&hellip;</li>
   <li><a href="http://www.example.com/category/name?page=4">4</a></li>
   <li class="current"><a href="http://www.example.com/category/name?page=5">5</a></li>
   <li><a href="http://www.example.com/category/name?page=6">6</a></li>
   <li>&hellip;</li>
   <li class="pagination-last"><a href="http://www.example.com/category/name?page=10">10</a></li>
   <li class="pagination-next"><a href="http://www.example.com/category/name?page=6">&raquo;</a></li>
</ul>
#}

Default pagination uses the labels » and « for links to the next and previous pages. You can override these labels by passing new words to the default_pagination filter. Labels are not escaped, so they can contain HTML.

You can also provide a range parameter to set how many pages will be around the current page.

{{ pagination | default_pagination('<i class="fa"> Previous', 'Next <i class="fa">', 2) }}
{#
<ul class="pagination">
   <li class="pagination-previous"><a href="http://cli.sellastica.com/?page=5"><i class="fa"> Previous</a></li>
   <li class="pagination-first"><a href="http://cli.sellastica.com/">1</a></li>
   <li>&hellip;</li>
   <li><a href="http://cli.sellastica.com/?page=4">4</a></li>
   <li><a href="http://cli.sellastica.com/?page=5">5</a></li>
   <li class="current"><a href="http://cli.sellastica.com/?page=6">6</a></li>
   <li><a href="http://cli.sellastica.com/?page=7">7</a></li>
   <li><a href="http://cli.sellastica.com/?page=8">8</a></li>
   <li>&hellip;</li>
   <li class="pagination-last"><a href="http://cli.sellastica.com/?page=11">11</a></li>
   <li class="pagination-next"><a href="http://cli.sellastica.com/?page=7">Next <i class="fa"></a></li>
</ul>
#}

highlight

Highlighs part of a string.

It's often used in search results. Part of a string will be highlighted with <mark></mark> tags

{{ 'Some unhighlighted string' | highlight('highlighted') }}
{# Some un<mark>highlighted</mark> string #}

img_tag

Creates <img> HTML tag.

{{ 'http://www.example.com/picture.png' | img_tag }}
{# <img src="http://www.example.com/picture.png"> #}
{{ 'http://www.example.com/picture.png' | img_tag('Some alt') }}
{# <img src="http://www.example.com/picture.png" alt="Some alt"> #}

Creates <a> HTML tag.

{{ 'http://www.example.com/' | link_tag }}
{# <a href="http://www.example.com/">http://www.example.com/</a> #}
{{ 'http://www.example.com/' | link_tag('Some title') }}
{# <a href="http://www.example.com/">Some title</a> #}

Optionally, you can provide any HTML attribute:

{{ 'http://www.example.com/' | link_tag }}
{# <a href="http://www.example.com/">http://www.example.com/</a> #}
{{ 'http://www.example.com/' | link_tag('Some title', { class: 'some-class', id: 'some-id' }) }}
{# <a href="http://www.example.com/" class="some-class" id="some-id">Some title</a> #}

texy

Creates HTML syntax from Texy syntax.

For more information, please see https://texy.info/

{{ 'Some text' | texy }}
{# <p>Some text</p> #}

layout.contact_modal.title

layout.contact_modal.lead

layout.contact_modal.text