t3g/symfony-template-bundle

TYPO3 Template Bundle

Installs: 2 109

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 0

Language:CSS

Type:symfony-bundle

2.3.0 2020-02-28 12:19 UTC

This package is auto-updated.

Last update: 2020-03-28 13:39:08 UTC


README

This package is used across various TYPO3 Symfony Applications to ensure a streamlined visual experience and reduced maintenance.

Installation

composer require t3g/symfony-template-bundle

Ensure that symfony default scripts are present in your composer.json file.

{
    "scripts": {
        "auto-scripts": {
            "cache:clear": "symfony-cmd",
            "assets:install %PUBLIC_DIR%": "symfony-cmd"
        },
        "post-install-cmd": [
            "@auto-scripts"
        ],
        "post-update-cmd": [
            "@auto-scripts"
        ]
    }
}

Configuration

The bundle comes with a sensible default configuration, which is listed below. You can define these options if you need to change them:

# config/packages/template.yaml
template:
    application:
        # Example: Intercept
        name: 'Template Bundle'
        # Example: intercept
        platformkey: ~
        copyright:
            author: TYPO3 GmbH
            url: https://typo3.com
        routes:
             # Example: app_index
            home: app_index
            privacy: https://typo3.com/privacy-policy
            legal: https://typo3.com/legal-notice
        menu:
            # Example: App\Menu\MenuBuilder
            class: T3G\Bundle\TemplateBundle\Menu\MenuBuilder
        assets:
            # Example: app
            encore_entrypoint: ~
        theme:
            # Example: md
            navbar_breakpoint: lg
            use_logo: false
            background: light
bin/console config:dump-reference template

Configuration will be available within the templates and can be accessed through template variable.

Examples:

<title>{% block title %}{% endblock %} - {{ template.application.name }}</title>
<a class="navbar-brand" href="{{ path(template.application.routes.home) }}">
    <i class="fab fa-typo3 text-primary"></i>
    <strong>{{ template.application.name }}</strong>
</a>

Encore

composer require symfony/webpack-encore-bundle

To enable your encore entrypoint simply configure the key within the yaml configuration.

# config/packages/template.yaml
template:
    application:
        assets:
            encore_entrypoint: app

Extending Menus

# config/packages/template.yml
template:
    application:
        menu:
            class: App\Menu\MenuBuilder
<?php
namespace App\Menu;

use T3G\Bundle\TemplateBundle\Menu\MenuBuilder as TemplateMenuBuider;

class MenuBuilder extends TemplateMenuBuider
{
    public function mainDefault(array $options)
    {
        $menu = parent::mainDefault($options);
        $menu->addChild(
            'home',
            [
                'route' => 'app_index',
                'label' => 'Home',
                'extras' => [
                    'icon' => 'home',
                ],
            ]
        );
        return $menu;
    }
}

Available methods to override mainDefault, mainProfile and mainFooter.

Page Template

Extend Default Layout

{% extends '@Template/layout.html.twig' %}

Available Blocks

title

{% block title %}Home{% endblock %}
<title>Home - {{ template.application.name }}</title>

headline

This block will only be rendered obove the body block if defined in the template.

{% block headline %}Super Headline{% endblock %}
<div class="page-wrapper">
    <!-- HEADER -->
    <!-- FLASHMESSAGES -->
    <main class="page-main">
        <div class="content-section content-section-small bg-primary text-white">
            <div class="container">
                <h1 class="h2">Super Headline</h1>
            </div>
        </div>
        <!-- BODY BLOCK -->
    </main>
    <!-- FOOTER -->
</div>

body

{% block body %}
    <div class="content-section">
        <div class="container">
            BODY CONTENT
        </div>
    </div>
{% endblock %}
<div class="page-wrapper">
    <!-- HEADER -->
    <!-- FLASHMESSAGES -->
    <main class="page-main">
        <!-- HEADLINE -->
        <div class="content-section">
            <div class="container">
                BODY CONTENT
            </div>
        </div>
    </main>
    <!-- FOOTER -->
</div>

footer

{% block footer %}
    <div class="content-section">
        <div class="container">
            FOOTER CONTENT
        </div>
    </div>
{% endblock %}
<div class="page-wrapper">
    <!-- HEADER -->
    <!-- FLASHMESSAGES -->
    <!-- MAIN HEADLINE AND BODY -->
    <footer class="page-footer">
        <div class="content-section">
            <div class="container">
                FOOTER CONTENT
            </div>
        </div>
        <!-- COPYRIGHT AND FOOTER MENU -->
    </footer>
</div>

stylesheets

Stylesheet block will be rendered after the base and encore css before the closing </head>.

javascripts

JavaScript block will be rendered after base and encore javascript before the closing </body>.

EMail Template

Extend Default Layout

{% extends '@Template/email.html.twig' %}

Available Blocks

email_subject

{% block email_subject %}Reset Your Password{% endblock %}

email_plaintext

{% block email_plaintext %}
Forgot your password? Let's get you a new one.

We got a request to change the password for the account with the username {{ user.username }}.

You can reset your password by accessing {{ confirmationUrl }}

If you don't want to reset your password, you can ignore this email.
{% endblock %}

email_html_preview

{% block email_html_preview %}
You requested a password reset for your account.
{% endblock %}

email_html_body

{% block email_html_body %}
<h3>Forgot your password?<br>Let's get you a new one.</h3>
<p>We got a request to change the password for the account with the username <strong style="color: #222222;">{{ user.username }}</strong>.</p>

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="buttonBlock" style="min-width:100%;">
    <tbody class="buttonBlockOuter">
        <tr>
            <td style="padding-top: 36px; padding-right:18px; padding-bottom:36px; padding-left:18px;" valign="top" align="center" class="buttonBlockInner">
                <table border="0" cellpadding="0" cellspacing="0" class="buttonContentContainer" style="border-collapse: separate !important;border-radius: 3px;background-color: #ff8700;">
                    <tbody>
                        <tr>
                            <td align="center" valign="middle" class="buttonContent" style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, Verdana, sans-serif; font-size: 16px; padding: 18px;">
                                <a class="button " title="Reset Your Password" href="{{ confirmationUrl }}" rel="noopener noreferrer" target="_blank" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;">Reset Your Password</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

<p style="font-size: 12px;">Or reset your password using this link: {{ confirmationUrl }}</p>
<p style="font-size: 12px;">If you don't want to reset your password, you can ignore this email.</p>
{% endblock %}

Utilities

AvatarUtility::getAvatar(string $email, int $size)

<?php
use T3G\Bundle\TemplateBundle\Utility\AvatarUtility;
echo AvatarUtility::getAvatar('info@typo3.com', 32);
// <img src="https://...avatar.png" class="avatar" height="32" width="32">

AvatarUtility::getAvatarUrl(string $email, int $size)

<?php
use T3G\Bundle\TemplateBundle\Utility\AvatarUtility;
echo AvatarUtility::getAvatarUrl('info@typo3.com', 32);
// https://...avatar.png

Twig Extensions

avatar

Twig function to display avatars.

{{ avatar('info@typo3.com', 32) }}
<img src="https://...avatar.png" class="avatar" height="32" width="32">

template_function_exist

A function to check if a function is available within the current Twig Environment.

{% if template_function_exist('relativetime') %}
    The relativetime function is available.
{% endif %}

template_function_call

Twig always checks for all functions with a template, also within a condition. This function is a wrapper around the original function call that is only executed if the function actually exists.

# Template will still work if `encore_entry_link_tags` is not defined, function just returns null.
{{ template_function_call('encore_entry_link_tags', template.application.assets.encore_entrypoint) }}

# Template will fail if `encore_entry_link_tags` is not registered.
{{ encore_entry_link_tags(template.application.assets.encore_entrypoint) }}

Twig Tags

frame

Option Type Default
id string
size small/default default
color default/primary/secondary/light/dark default
indent bool false
rulerBefore bool false
rulerAfter bool false
center bool false
backgroundImage string
height auto/small/medium/max auto
innerWidth small/full/default default

Usage

{% frame with options %}Inner Content{% endframe %}

Example

{% frame with { id: 'identifier', color: 'primary', center: true } %}
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
{% endframe %}
<div id="identifier" class="frame frame-size-default frame-background-primary frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner text-center">
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>