Twig - markhowellsmead/helpers GitHub Wiki
{% if post.thumbnail %}
{% set thumbnail_src = TimberImage(post.thumbnail).src('original')|fit(1170, 780) %}
{% if post.thumbnail.aspect >= 3 %}
{% set thumbnail_class = 'with--thumbnail-xwide' %}
{% elseif post.thumbnail.aspect >= 2 %}
{% set thumbnail_class = 'with--thumbnail-wide' %}
{% elseif post.thumbnail.aspect < 1 %}
{% set thumbnail_class = 'with--thumbnail-tall' %}
{% else %}
{% set thumbnail_class = 'with--thumbnail-horizontal' %}
{% endif %}
{% set thumbnail_percentage = (1/post.thumbnail.aspect)*100 %}
{% endif %}(For use in WordPress.)
'<a href="%1$s">%2$s</a>'|format(fn('antispambot', 'mailto:' ~ theme.theme_mod('company_email')), fn('antispambot', theme.theme_mod('company_email'))),/**
* Resize image to fit within width and height constraints
* https://github.com/timber/timber/issues/1332
* Usage: {{ image.src('original')|fit(600, 400) }}
*/
$twig->addFilter(new \Twig_SimpleFilter('fit', function ($src, $w, $h = 0) {
// Instantiate TimberImage from $src so we have access to dimensions
$img = new TimberImage($src);
// If the image is smaller on both width and height, return original
if ($img->width() <= $w && $img->height() <= $h) {
return $src;
}
// Compute aspect ratio of target box
$aspect = $w / $h;
// Call proportional resize on width or height, depending on how the image's
// aspect ratio compares to the target box aspect ratio
if ($img->aspect() > $aspect) {
return ImageHelper::resize($src, $w);
} else {
return ImageHelper::resize($src, 0, $h);
}
}));{% set image_width = 1036 %}
{% set generated_image = image.src('original')|tojpg|resize(image_width) %}
{% set image_height = ((image.height/image.width) * image_width)|round(0, 'floor') %}
<figure class="post-figure">
<img width="{{ image_width }}" height="{{ image_height }}" class="lazyload withlowres post-image" src="{{ image|resize(26) }}" data-src="{{ generated_image }}" alt="{{ image.alt }}" />
<noscript><img class="withlowres post-image lazyload" width="{{ image_width }}" height="{{ image_height }}" src="{{ generated_image }}" alt="{{ image.alt }}" /></noscript>
</figure>$twig->addFilter(new Twig_SimpleFilter('telephone_url', function ($number) {
$nationalprefix = '+41';
$protocol = 'tel:';
$formattedNumber = $number;
if ($formattedNumber !== '') {
// add national dialing code prefix to tel: link if it's not already set
if (strpos($formattedNumber, '00') !== 0 && strpos($formattedNumber, '0800') !== 0 && strpos($formattedNumber, '+') !== 0 && strpos($formattedNumber, $nationalprefix) !== 0) {
$formattedNumber = preg_replace('/^0/', $nationalprefix, $formattedNumber);
}
}
$formattedNumber = str_replace('(0)', '', $formattedNumber);
$formattedNumber = preg_replace('~[^0-9\+]~', '', $formattedNumber);
$formattedNumber = trim($formattedNumber);
return $protocol . $formattedNumber;
}));and
'<a href="%1$s">%2$s</a>'|format(theme.theme_mod('company_phone')|telephone_url, theme.theme_mod('company_phone'))Using Twig's batch filter in the following example, the data in component.images will be grouped into sets of four, so that each group of four can be wrapped in its own HTML.
{% if component.images|length %}
{% for batch in component.images|batch(4) %}
<div class="row align-left">
{% for image in batch %}
<div class="column small-12 large-3">
<img src="{{ Image(image).src('original')) }}">
</div>
{% endfor %}
</div>
{% if not loop.last %}
<hr>
{% endif %}
{% endfor %}
{% endif %}$twig->addFilter(new \Twig_SimpleFilter('strip_nbsp', function ($string) {
return preg_replace('~\ ~', ' ', $string);
}));{{ 'Hello World'|strip_nbsp }}