From ab7f43e18135f2d5aab3703a104aec79bbadb7fd Mon Sep 17 00:00:00 2001 From: Ryan Watters Date: Wed, 12 Apr 2017 15:24:32 -0500 Subject: [PATCH] Update math function page to include "add" usage with strings Closes rdwatters/hugo-docs-concept#85 --- content/functions/math.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/content/functions/math.md b/content/functions/math.md index 8de26f38a..767589eee 100644 --- a/content/functions/math.md +++ b/content/functions/math.md @@ -29,3 +29,38 @@ There are 6 basic mathematical operators that can be used in Hugo templates: | `modBool`| Boolean of modulus of two integers. Evaluates to `true` if = 0. | `{{modBool 15 3}}` → true | | `mul` | Multiplies two integers. | `{{mul 2 3}}` → 6 | | `sub` | Subtracts two integers. | `{{sub 3 2}}` → 1 | + +## Using `add` with Strings + +You can also use the `add` function with strings. You may like this functionality in many use cases, including creating new variables by combining page- or site-level variables with other strings. + +For example, social media sharing with [Twitter Cards][cards] requires the following `meta` link in your site's `` to display Twitter's ["Summary Card with Large Image"][twtsummary]: + +```html + +``` + +Let's assume you have an `image` field in the front matter of each of your content files: + +```yaml +--- +title: My Post +image: my-post-image.jpg +--- +``` + +You can then concatenate the `image` value (string) with the path to your `images` directory in `static` and leverage a URL-related templating function for increased flexibility: + +{{% code file="partials/head/twitter-card.html" %}} +```html +{{$socialimage := add "images/" .Params.image}} + +``` +{{% /code %}} + +{{% note %}} +The `add` example above makes use of the [`absURL` function](/functions/absurl/). `absURL` is a more elegant and future-proofed approach to creating URLs than combining `.Site.BaseURL` with hard-coded strings—a templating style sometimes seen in older [Hugo themes](/themes). `absURL` works very well, for example, when creating `link` references to stylesheets and other metadata in your rendered site's ``. +{{% /note %}} + +[cards]: https://dev.twitter.com/cards/overview +[twtsummary]: https://dev.twitter.com/cards/types/summary-large-image \ No newline at end of file