Content Management System

The Content Management System, or CMS, is a powerful component that allows you to add custom pages and content to your website.

CMS consists of 3 sub-components. Pages, snippets and resources.

Pages allow you to create fully custom pages on your website. Each page is accessible via its URL key.

Pages are managed from the admin panel. Found under Settings -> Pages.

When creating a page, you must provide:

• Title: The name of the page, shown in the browser tab and used for SEO.
• URL Key: The path at which the page will be accessible on your site (e.g. about makes the page available at https://example.org/about). This can include slashes for nested paths (e.g. about/team). Leave blank to make the page your home page.
• Type: The editing mode for this page. This cannot be changed after creation.
  • Twig: Write the page content directly as Twig/HTML code.
  • Page Builder: Build the page visually using a drag-and-drop widget interface.

After creation, you can also configure:

• SEO Description: A short description of the page used by search engines.
• SEO Keywords: Keywords relevant to the page content, used by search engines.
• CSS: Custom CSS that is loaded only on this page.
• JavaScript: Custom JavaScript that is loaded only on this page.

Pages support access control. You can restrict which roles are allowed to view a page using the lock icon on the pages list. By default, no roles can view a page, so make sure to configure the access control after creating a page.

To make a page accessible from your site's navigation menu, add it via the Menu Builder. When adding a menu item, select the Page type and choose the page you want to link to.

Twig pages give you full control over the page markup. The Twig code you write is the full source of the page. You have access to all standard Twig features as well as the CMS Twig functions snippet(), resource(), and widget().

A typical Twig page extends the forumify frontend layout:

{% extends '@Forumify/frontend/page.html.twig' %}
{% block body %}
    <h1>Hello World!</h1>
    {{ snippet('my-intro-snippet') }}
{% endblock %}

The Page Builder lets you compose a page visually by dragging widgets onto the canvas. Widgets are organized into four categories:

Structural widgets used to arrange other widgets.

• Box: A styled container box. Useful for visually grouping content.
• Card: A card with a title, body, and footer slot.
• Two / Three / Four / Six Column: A responsive multi-column grid. Each column is a slot that accepts other widgets. You can configure the gap between columns and, when using the responsive option, customize the column widths at different breakpoints.

Widgets for displaying content.

• Rich Text: A WYSIWYG editor for formatted text.
• Button: A clickable button or link. You can configure the title, URL, visual style (Primary, Outlined, Call To Action, or Link), and whether it opens in a new tab.
• Resource: Displays an uploaded resource (e.g. an image). Select from your existing resources.
• YouTube: Embeds a YouTube video. Requires the video ID from the YouTube URL.
• Twig: A raw Twig/HTML code block for advanced use cases.

Widgets that pull in content from your forum.

• Topic: Displays the most recent topic from a selected forum.
• Topic List: Displays a configurable list of topics from a selected forum. You can set the number of topics, sort order, and which meta information to show.
• Gallery: A slideshow of images from an image or mixed-type forum. Supports autoscroll with a configurable interval and optional hidden navigation controls.
• Online Users: Displays a list of users who are currently online.

Widgets for embedding social platform components.

• Discord: A button that links to your Discord server. Requires your server's ID and a display name.
• TeamSpeak: A button that links to your TeamSpeak server via TSViewer. Requires your TSViewer ID and a display name.

Snippets are small pieces of content that can be re-used, or more easily modified compared to entire pages. It's generally a good idea to turn static content into manage-able snippets.

Snippets can be managed from the admin panel. Found under Settings -> Snippets.

Currently there are 2 types of snippets.

• Rich Text: Use a WYSIWYG rich text editor to enter content.
• Twig: For raw Twig HTML code, requires some web development skill.

After saving a snippet, it will be given a slug. This slug is what you will need to use your snippet in pages or other snippets.

You can use your snippets anywhere in Twig code, including CMS pages, or even nested in other snippets.

To use a snippet, use the snippet('snippet-slug') Twig function.

For example, if you created a snippet with the name "My Cool Snippet", the generated slug would be "my-cool-snippet". Then to use your snippet in a page:

{% extends '@Forumify/frontend/page.html.twig' %}
{% block body %}
    {{ snippet('my-cool-snippet') }}
{% endblock %}

While you could link to any resource, or upload your own assets to your website, the resource system makes it easy for your site admins to find and replace static assets.

Resources could be anything, images, downloads,...

Resources can be uploaded from the admin panel, they can be found under Settings -> Resources.

Simply supply a name and the file and press save. After saving your resource, it will be given a slug. Take note of it, this is what you will need to use the resource in pages and snippets.

Resources can be used in pages and snippets using the resource('resource-slug') Twig function

For the following examples, we've created a resource named "My Cool Resource". The slug that was generated for it is "my-cool-resource".

To display a resource as an image, use the <img> tag, with the resource in the src attribute.

<img src="{{ resource('my-cool-resource') }}">

To make the client download a resource, you can use an <a> tag, with the resource in the href attribute and setting the download attribute.

This example shows a download button.

<a class="btn-primary" href="{{ resource('my-cool-resource') }}" download>
    <i class="ph ph-download-simple"></i>
    Download
</a>