Skip to main content

GameCMS Twig

Twig filters & functions are made to help you design your website. We have some custom filters & functions. Our themes use a block-based system where base.html is the main file. This allows you to define blocks that can be overridden in child templates, making it easy to customize and extend your themes.

What Is Twig Template

info

To understand more about Twig, please refer to HTML Editor.

Blocks

  • headBeforeCustomCss - For adding custom elements in the head section before the custom CSS.
  • head - The head section, typically for meta tags and links.
  • header - The header section of the page.
  • content - The main content area of the page.
  • servers - Used for the Servers List module.
  • javascript - For adding JavaScript files or inline scripts.

Functions

Our platform comes with several helpful functions, including:

  • match - Checks if a string matches a pattern and returns a boolean result.
  • var_dump - Dumps information about a variable for debugging purposes.
  • print_r - Prints human-readable information about a variable.
  • config - Retrieves a theme setting based on the ID from schemes.json. The first argument must be the unique ID from schemes.json, and the second argument can be a default value.
  • configList - Outputs the list of theme settings.
  • time - Returns the current Unix timestamp.

Example:

{% set themeSetting = config('setting_id', 'default_value') %}
{{ time() }}

Filters

  • formatDate - Formats a date. The first argument must be a valid date, and the second argument must be a valid format.
  • formatTime - Formats a time. The first argument must be a valid integer (Unix timestamp), and the second argument must be a valid format.

Example:

{{ '2024-07-27' | formatDate('d-m-Y') }}
{{ 1658928000 | formatTime('H:i:s') }}

Schemes

Schemes are settings that are stored inside a JSON file. Each of our default themes contains a scheme settings file, so everyone can see and create custom ones for their themes. Think of these schemes as extra website settings but for the current theme.

You can do types like:

  1. input: Allow users to input text.
  2. select: Allows users to select from multiple choices.
  3. image: Allows users to upload an image.
  4. number: Allows users to input a number.
  5. color: Allows users to input a color.

Example:

Using Theme Configuration Values

To retrieve any value from the website theme settings, you can use the config function.

Example: Using config('selectId', 'No') will return the value selected in the Yes or No option from the select input. If the user has not selected anything, the default value provided ('No' in this case) will be used.

This allows you to dynamically adjust your theme based on the configuration settings defined in your schemes.

{
"author": "Wohaho",
"config": [
{
"header": "Landing page",
"description": "This section you can enable and control the Landing page. Remove the image if you want to hide any button.",
"options": [
{
"id": "selectId",
"name": "The user will be allowed to select yes or no.",
"description": "Description for the user what this is about.",
"default": "No",
"type": "select",
"values": [
"Yes",
"No"
]
},
{
"id": "colorId",
"name": "The user will be allowed to input a color.",
"description": "Description for the user what this is about.",
"default": "#1B1B1B",
"type": "color",
"values": []
},
{
"id": "numberId",
"name": "The user will be allowed to input a number.",
"description": "Description for the user what this is about.",
"default": "30",
"type": "number",
"values": []
},
{
"id": "imageId",
"name": "The user will be allowed to upload an image.",
"description": "Description for the user what this is about.",
"default": "https://cdn.gamecms.org/images/213343905164e5b7966cf2b9.33128237.png",
"type": "image",
"values": []
},
{
"id": "inputId",
"name": "The user will be allowed to input text.",
"description": "Description for the user what this is about.",
"default": "Cool link 1",
"type": "input",
"values": []
},
{
"id": "textareaId",
"name": "The user will be allowed to input a text area.",
"description": "Description for the user what this is about.",
"default": "Here are our social networks where you can follow us in order to know the news of the server.",
"type": "textarea",
"values": []
}
]
}
]
}
info

Each key must be unique and not repeated anywhere in the file.