XalokNext Documentation

Appearance

Template filters ​

Intro ​

XalokNext ships with some builtin filters that can be used in wf-html.

Example: Using the date template filter to format dates

html
<div class="published-at" v-if="currentPage.firstPublishedAt">
  Publicado en [[ filters.date('YYYY-MM-dd', currentPage.firstPublishedAt) ]]
</div>

Project template filters ​

The skeleton repository already comes configured to allow adding template filters in the project. Here's a brief description of the changes needed to enable custom template filters in the project:

javascript
// config.js (project root)

adminConfig.webpack.resolve = adminConfig.webpack.resolve || {};
adminConfig.webpack.resolve.alias = adminConfig.webpack.resolve.alias || {};
Object.assign(adminConfig.webpack.resolve.alias, {
    // ... other aliases
    "wfed/wfvue/filters/index": "admin/wfvue/filters/index"
});
javascript
// src/App/Bundle/CmsAdminBundle/Resources/public/javascripts/wfvue/filters/index.js

const baseFilters = require("_wfed/wfvue/filters");

module.exports = Object.assign(baseFilters, {
    sample: require("./sample"),
});
javascript
// src/App/Bundle/CmsAdminBundle/Resources/public/javascripts/wfvue/filters/sample.js

define([], function () {
    return (value) => `sample filtered ${value}`;
});
html
<!-- 
in the wf-html template
e.g. src/App/Bundle/CmsBundle/Resources/views/Template/Article/default.html.twig
-->

<div data-attribute="filters.sample('value')"></div>

<!-- or as interpolated text --> 

<div>Here is the filtered value: [[ filters.sample('value') ]]</div>

wfcms/standard template filters ​

authorName ​

Used internally by authorNames to format author names.

authorNames ​

Returns a list of author names, separated by commas. If the author has a slug property, it wraps the author's name with a link to the author's page.

See the second example in wf-cm-text

contentPath ​

javascript
contentPath(contentModelAttributes)

Links to a content model (page, category, tag, author).

Example: Using the contentPath filter

html
<a :href="filters.contentPath(page)"></a>

Note: The above example can be written in a shorter version by using the wf-href directive:

html
<a wf-href="page"></a>

contentUrl ​

javascript
contentUrl(contentModelAttributes)

Same as contentPath, but generates an absolute URL

date ​

javascript
date(format, date, locale = 'es')

Format a date using dayjs.

Example: Using the date filter

html
<div class="published-at" v-if="currentPage.firstPublishedAt">
  Publicado en [[ filters.date('YYYY-MM-DD', currentPage.firstPublishedAt) ]]
</div>

To use a different locale, overwrite the wfed/dayjs_locales Javascript module and load the desired locale(s) from there:

javascript
define(["dayjs/locale/de", "days/locale/en"], function() {});

Then pass the desired locale as the third argument.

Example: Using the en locale:

javascript
<div class="published-at" v-if="currentPage.firstPublishedAt">
    Publicado en [[ filters.date('YYYY-MM-DD', currentPage.firstPublishedAt, "en") ]]
</div>

filterHeight ​

javascript
filterHeight(imagineFilterName)
html
<img :height="filters.filterHeight('image_50_50')" />

Used internally by the wf-filter directive to add the height attribute to images.

filterWidth ​

javascript
filterWidth(imagineFilterName)
html
<img :width="filters.filterWidth('image_50_50')" />

Used internally by the wf-filter directive to add the width attribute to images.

imageFilter ​

javascript
imageFilter(filter, image, settings, absolute)

Used internally by the wf-filter directive to add the src attribute to images.

v7.3+ jwpIframe ​

Used to generate JWP src attribute to iframe.

html
<wf-setting-element v-if="video.id" name="playerID">
    <setting-jwp-player-selector
    :commit-setting="commitSetting"
    :value="settings.playerID"
    ></setting-jwp-player-selector>
</wf-setting-element>
<iframe
    loading="lazy"
    frameborder="0"
    :src="filters.jwpIframe(video.media_id, settings.playerID)"
    scrolling="no">
    </iframe>

NOTE: This filter was created to be accompanied by the component setting-jwp-player-selector

path ​

javascript
path(routeName, routeParams = {})

Used to generate URLs for Symfony routes, similar to the path twig function. Add the route to be used in app/config/misc/fos_js_routing.yml:

yaml
fos_js_routing:
  routes_to_expose:
    - app_article_sidebar.*

Then use it in a template:

html
<wf-dynamic 
    :url="filters.path('app_article_sidebar', { id: currentPage.id })"
    v-if="currentPage.id"
/>

Note: The route name in the example above ends with .* - this is to accommodate localized routes. When you define a route app_article_sidebar in a multilanguage project, XalokNext generates app_article_sidebar.{locale} (e.g. app_article_sidebar.es) for each locale that the project uses.

Note: There's an important caveat when changing the fos_js_routing.yml included in XalokNext (vendor/wfcms/standard/Wf/Bundle/CmsBaseAdminBundle/Resources/config/third_party/fos_js_routing.yml). After saving this file, the make dev watcher detects the change and refreshes the resulting routes.json file. But, since starting with Symfony 3, changes of configuration files done in vendor/ are not refreshed automatically, one needs to manually clear Symfony's cache and then trigger the watch process again - the most simple way would be by adding a comment to the vendor/wfcms/standard/Wf/Bundle/CmsBaseAdminBundle/Resources/config/third_party/fos_js_routing.yml file.

trans ​

javascript
filters.trans(message)

Used to translate strings, similar to the twig trans filter.

Example: Using the trans filter:

javascript
[[ filters.trans('article.published_at') ]]

v7.3+ truncate ​

javascript
filters.truncate(string, length = 30, omission = '...', preserve = true)

Arguments:

  • string - the string to be truncated
  • length - the length that it should be truncated at
  • omission - the suffix that will be added in case the text was truncated
  • preserve - set to true to preserve entire words, set to false to truncate to the exact length, breaking the words if necessary

Example: Using the truncate filter:

javascript
[[ filters.truncate(page.title, 10, '…') ]]

v7.2+ url ​

javascript
url(routeName, routeParams = {})

See path for details - similar to twig's functions, path generates (by default) a relative URL, url generates an absolute one:

Example: Using the url filter:

javascript
[[ filter.url('wf_article_show', { articleSlug: currentPage.slug}) ]]