XalokNext Documentation

Appearance

HTML modules examples ​

Simple modules ​

  • Simple text module

    html
    <p wf-module="wfed/body_text/paragraph" class="body-text">Put a paragraph of text too</p>

  • Placeholder

    As this is part of a twig template, you can also use translation for the placeholder:

    html
    <p wf-module="wfed/body_text/paragraph" class="body-text">
  {{ 'paragraph.placeholder'|trans({}, 'ProjectDomain') }}
</p>

  • More options

    html
    <p wf-module="wfed/body_text/paragraph"
     wf-role="paragraph"
     wf-allow="+-"
     wf-new
     wf-toolbar-position="bottom"
     wf-formattings="b,u,ul"
     >
    {{ 'paragraph.placeholder'|trans({}, 'ProjectDomain') }}
 </p>

  • Image module

    html
    <div wf-module="wfed/image/simple"
    wf-filter="avalanche_filter"
    class="image"
    ></div>

    Don't forget to add the avalanche_filter in app/config/misc/avalanche.yml (or use an existing one)

Page composite module ​

This module allows the editor to choose a link to a different page (used in a board):

html
<div wf-module="wfed/composite/page"
     wf-new
     wf-allow=""
     wf-toolbar-position="bottom"
        >
    <div class="text-modules">
        <a class="title page-link"
           wf-module="wfed/title/title"
                ></a>
        <p class="epigraph"
           wf-module="wfed/body_text/page_epigraph"
           wf-toolbar-position="none"
                ></p>
    </div>
    <div class="image">
        <a wf-module="wfed/image/simple"
           wf-filter="avalanche_filter"
           wf-toolbar-position="right"
           class="page-link"
                >
        </a>
    </div>
</div>

Adding the page-link class to the <a> tags will autopopulate these tags with links to that page (there may be other hrefs inside this module that you don't want to be autopopulated)

Slider module ​

html
<div wf-module="wfed/slider/simple"
     wf-new>
    <div class="slider-pane">
        <div wf-module="wfed/composite/module"
             wf-toolbar-position="none"
             wf-content-type="image"
             class="slide"
        >
            <div class="image">
                <div wf-module="wfed/image/simple"
                     wf-filter="article_related_item"
                        ></div>
            </div>
            <div class="caption">
                <p wf-module="wfed/body_text/block"></p>
            </div>
        </div>
    </div>
</div>
  • slider with arrows
html
<div class="slider slider-with-arrows"
     wf-module="wfed/slider/simple"
     wf-new>
    <div class="slider-pane">
        ...content type module...
    </div>
    <div class="slider-buttons">
        <div class="slider-button left-arrow"></div>
        <div class="slider-button right-arrow"></div>
    </div>
</div>
  • listing to slider (slider only shown on public)
html
<div class="slider-wrapper">

    <div class="slider"
         wf-slider-options='{"perPage": "4"}'
    >
        <div wf-module="wfed/dynamic/listing"
             wf-new
        ></div>
    </div>
    <div class="slider-buttons">
        <div class="slider-button left-arrow"></div>
        <div class="slider-button right-arrow"></div>
    </div>
</div>

Add js code to public.js:

    (function adaptListToSlider() {
        $('.slider .listing').addClass('slider-pane').find('.listing-item').addClass('slide');
    })();

Dynamic Board Module ​

html
<div wf-module="wfed/dynamic/board"
     wf-new>
    <wf-slugs>
        <slug value="x">X</slug>
        <slug value="y">Y</slug>
    </wf-slugs>
</div>

Note: included boards should not have the same template (same selector). It will not work when adding the dynamic board second time.

Dynamic Menu Module ​

html
<div wf-module="wfed/dynamic/menu"
     wf-new>
    <wf-slugs>
        <slug value="menu-slug"></slug>
    </wf-slugs>
</div>
html
<div wf-module="wfed/collection/related"
     wf-role="related"
     wf-new
     wf-placeholder={{ 'related_placeholder'|trans|json_encode|raw }}
>
  <div wf-module="wfed/composite/related_page">
    <a wf-module="wfed/body_text/paragraph"
       class="page-item-link"
    ></a>
  </div>
</div>

Switching modules (wf-group) ​

html
    	<div class="tab-container">
	        <div wf-module="wfed/dynamic/listing"
	             wf-allow=""
	             wf-toolbar-position="top"
                 wf-role="listing"
                 wf-group="lists"
	             wf-new
                 wf-tab-detail
	             wf-placeholder={{ 'listing_placeholder'|trans|json_encode|raw }}
	        >
                <wf-setting type="select" name="most-tabs-articles-type-select">
                    <title>{{ "most_tabs.settings.type_of_articles"|trans }}</title>
                    <option value="">{{ "select"|trans }}</option>
                    <option value="most_viewed">{{ "most_tabs.settings.most_viewed"|trans }}</option>
                    <option value="most_shared">{{ "most_tabs.settings.most_shared"|trans }}</option>
                </wf-setting>
	        </div>
            <div wf-module="admin/dynamic/most_shared"
                 wf-group="lists"
                >
            </div>
	   </div>

Picture module type ​

Multiple filters can be added for different devices resolutions. The part with :320 after the filter is the media query media="(max-width: 320px)" added to source element. The first filter is default and will be added to img element.

html
     <picture wf-module="wfed/picture/simple"
              wf-role="picture"
              wf-new
              wf-toolbar-position="top"
              wf-allow="-+"
              wf-filter="default_filter|filter1:320|filter2:728"
              class="picture"
              >
     </picture>

The result will look like this:

html
     <picture>
         <source srcset="/filter1/default.jpg" media="(max-width: 320px)">
         <source srcset="/filter2/default.jpg" media="(max-width: 728px)">
         <img srcset="/default_filter/default.jpg" alt="My default image">
     </picture>
html
    <div wf-module="wfed/dynamic/imported_gallery"
         wf-role="imported_gallery"
         wf-new
         wf-allow="+-"
         wf-placeholder="Import gallery"
         wf-filter="imported_gallery"
         wf-article-types="gallery"
         ></div>

Dynamic listing add advertisement boards option ​

When editing the listing module a new tab will be present with the boards added at wf-slugs and the option to set position in listing elements.

html
    <div class="category-listing-secondary">
       <div
            wf-module="wfed/dynamic/listing"
            wf-role="category_secondary"
            wf-new
            wf-toolbar-position="top"
            wf-allow=""
        >
            <wf-slugs>
                <slug value="category_secondary_ad1">{{ 'dynamic_board.ads_subcategory_first'|trans }}</slug>
                <slug value="category_secondary_ad2">{{ 'dynamic_board.ads_subcategory_second'|trans }}</slug>
            </wf-slugs>
        </div>
    </div>

Note: The old documentation used the value for slugs with - like this:

html
<!-- PRE v6 -->
    <slug value="category-secondary-ad1">{{ 'dynamic_board.ads_subcategory_first'|trans }}</slug>
    <slug value="category-secondary-ad2">{{ 'dynamic_board.ads_subcategory_second'|trans }}</slug>

Now it is mandatory to use the slugs with underline, like this:

html
<!-- v6 -->
<slug value="category_secondary_ad1">{{ 'dynamic_board.ads_subcategory_first'|trans }}</slug>
<slug value="category_secondary_ad2">{{ 'dynamic_board.ads_subcategory_second'|trans }}</slug>

This has changed because now the boards are not rendered with wf_cms_render_page(slug) function anymore. The actual value of the slug is used as a block name that can offer the possibility to add a board or a custom action:

html
{% block category_secondary_ad1 %}
    {{ wf_cms_render_board('listing-ads', {
        template: 'board/home/freehtml',
        title: 'board-title.listing-ads'|trans,
    }) }}
{% endblock %}

{% block category_secondary_ad2 %}
    {{ wf_cms_render_board('listing-ads2', {
        template: 'board/home/freehtml',
        title: 'board-title.listing-ads2'|trans,
    }) }}
{% endblock %}

Attention! These blocks must be defined in the Listing/default_listing.html.twig inside the project.