Quick facts

Basic settings for the rendering of templates are made in the render environments.
Global variables can be defined for the rendering of templates.

How to use

Details will follow ...

Structure

The render environments are divided into three main areas.

{
    "twig_options": {
        ...
    },
    "render_global_vars": {
        ...
    },
    "env": {
        ...
    }
}

Settings for the rendering of Twig templates can be made in the section "twig_options". The "render_global_vars" area contains all globally available variables that are available wehen rendering templates. The "env" section contains additional settings, for example for the themes or the automatic rendering of <picture>-tags.

Twig options

Details will follow ...

Global variables

Variables can be defined in the render environments that are always provided when the templates are rendered. Basic settings for the website, for example, can be made here.

The typical structure of the array in Hublify is as follows. We encapsulate the global variables in an array called "HFY_SITE" in order to be able to better assign the origin of the variables in templates.

{
    "render_global_vars": {
        "HFY_SITE": {
            "assetUrl": "https://www.your-domain.com/my-asset-folder",
            "metaCharset": "utf-8",
            "metaTitle": "We drive your commerce",
            "metaTitleBefore": "",
            "metaTitleAfter": " | Hublify",
            ...
        }
    }
}

Path to asset folder

Im Asset folder befinden sich Dateien, auf die du sicherlich immer wieder zugreifen möchtest. Zum Beispiel CSS- oder JavaScript-Dateien. Über die Variable "pathAssets" kannst Du die URL zum Asset folder global festlegen. In deinen Twig-Templates kannst Du dann einfach auf deine Assets zugreifen.

<link rel="stylesheet" href="{{ HFY_SITE.assetUrl }}/my-stylesheet.css">

Meta data

Auch Meta-Daten können komfortabel per globaler Variabel gespeichert werden. Zum Beispiel der Titel der Website, ein dazugehörigen Prefix oder Suffix usw. Auch diese Daten kannst Du in deinen Templates einfach verwenden.

<meta charset="{{ HFY_SITE.metaCharset }}">
<meta name="copyright" content="{{ HFY_SITE.metaCopyright }}">
<meta name="description" content="{{ HFY_SITE.metaDesc }}" />

<title>{{ HFY_SITE.metaTitleBefore }}{{ HFY_SITE.metaTitle }}{{ HFY_SITE.metaTitleAfter }}</title>

Env

The "env" area contains additional settings. Details will follow ...

Content blocks

If you work with content blocks, you can define your themes here.

{
    "env": {
        "contentblocks_themes": [
            {
                "tplns_label": "myNamespaceLabel",
                "theme": "my-theme"
            },
            {
                "tplns_label": "hfyCblksBaseLibTpl",
                "theme": "hfy-default"
            }
        ]
    }
}

You can find more details here: Content Blocks - Theming

Picture configurations

If you use the automatic rendering of images in Hublify, you can define various presets in the "env" area that describe for which viewports and in which quality the images should be rendered.

{
    "env": {
        "pic_configs": {
            "my-config-1": {
                "picSources": [
                    {
                        "w_max": 576,
                        "quality": 50
                    },
                    {
                        "w_max": 768,
                        "quality": 50
                    },
                    ...
                ]
            }
            "my-config-2": {
                "picSources": [
                    ...
                ]
            }
        }
    }
}

You can find more details here: hublify.image()

Render-Environments