PHPackages                             becklyn/gluggi-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. becklyn/gluggi-bundle

ActiveSymfony-bundle[Templating & Views](/categories/templating)

becklyn/gluggi-bundle
=====================

Modular layout preview system, to be used within a symfony app.

3.5.0(4y ago)512.0k↓37.5%2[1 issues](https://github.com/Becklyn/GluggiBundle/issues)[12 PRs](https://github.com/Becklyn/GluggiBundle/pulls)BSD-3-ClausePHPPHP >=7.4CI failing

Since Oct 11Pushed 3y ago1 watchersCompare

[ Source](https://github.com/Becklyn/GluggiBundle)[ Packagist](https://packagist.org/packages/becklyn/gluggi-bundle)[ Docs](https://github.com/Becklyn/GluggiBundle)[ RSS](/packages/becklyn-gluggi-bundle/feed)WikiDiscussions 3.x Synced 1mo ago

READMEChangelog (10)Dependencies (17)Versions (32)Used By (0)

Gluggi
======

[](#gluggi)

Modular layout system

Installation
------------

[](#installation)

1. First install the bundle via composer:

    ```
    composer require becklyn/gluggi-bundle
    ```
2. Load the bundle in your `AppKernel`
3. Load the routing in your `routing.yaml` or `routing_dev.yaml`:

    ```
    layout:
        resource: "@GluggiBundle/Resources/config/routes.yaml"
        prefix: /_layout/
    ```

Configuration
-------------

[](#configuration)

You can define several config values in your `app/config.yaml`:

KeyTypeRequiredDescription`layout_dir``string`noThe layout directory, relative to your `%twig.default_path%`. Can be a legacy path (like `@Layout/test` or `@Legacy`) and will be parsed as a (partial) symfony-namespaced twig path.`css``string[]`noThe CSS files that will automatically be loaded. All paths are namespaced (see `becklyn/assets-bundle`).`js``string[]`noThe JavaScript files that will automatically be loaded. All paths are namespaced (see `becklyn/assets-bundle`).`js_head``string[]`noLike `js`, but the files will be included in the head.`info_action``string`noThe action to render the info. See the section below for details.`title``string`noAn optional title of the project, that is added in some places in the output (i.e. as suffix in the HTML title and on the index page).`data``array`noAn array with arbitrary data. See below for details.### Default configuration

[](#default-configuration)

```
gluggi:
    layout_dir: _layout
    info_action:  ~
    title: ~
    data: []
    css: []
    js: []
    js_head: []
```

Usage
-----

[](#usage)

Create a `LayoutBundle` and load it in your `AppKernel`.

You can add your views in `LayoutBundle/Resources/views/{atom,molecule,organism,template,page}`.

### Including views in other views

[](#including-views-in-other-views)

Especially in views that include other subviews it is preferable to just import these subviews, instead of copy & pasting them through the layout project.

Gluggi contains a simple twig function that includes a component:

```

    {{ gluggi("atom", "example") }}

```

The function has three parameters: `gluggi(type, name [, templateContext])`

ArgumentTypeDescription`type``string`the type of the component, like `"atom"`, `"molecule"`, etc..`name``string`the name of the component (the filename with extension)`templateContext``array` (optional)the variables that are available in the templates> To keep your templates as minimal and clean as possible, you should always use `{{ gluggi() }}` instead of the twig-own `{{ include () }}` and `{% include "..." %}`.

#### Embedding other views

[](#embedding-other-views)

You can also embed other components in the current component, to extend and change some block contents. Use the `gluggi_template(type, name)` in the `embed` tag.

```
{% embed gluggi_template("atom", "example") with {a: 1, b: 2} %}
    {% block some_block %}
        More content.
    {% endblock %}
{% endembed %}
```

The function has two parameters: `gluggi_template(type, name)`

ArgumentTypeDescription`type``string`the type of the component, like `"atom"`, `"molecule"`, etc..`name``string`the name of the component (the filename with extension)### Template variables

[](#template-variables)

Components can use variables (just like any other Twig template). All templates need to work standalone, so the value of the variable must be defined in the template via `{% set variable = ... %}`.

To allow overwriting certain values, the [`|default(...)` filter from Twig](http://twig.sensiolabs.org/doc/filters/default.html) can be used. If the component is included in another template, the variables can be changed.

`atom/list.html.twig`:

```

    {% for i in 1 .. entries|default(3) %}
    Entry #{{ i }}
    {% endfor %}

```

`molecule/long-list.html.twig`:

```

    {{ gluggi("atom", "list", {entries: 10}) }}

```

### Predefined template variables

[](#predefined-template-variables)

This is list of predefined variables:

NameTypeDescription`standalone``bool`Defines, whether the component is previewed standalone or embedded in another component. Defaults to `false` in any `gluggi()` embed, `true` otherwise.You can overwrite predefined values in included templates, by passing an explicit value as template parameter:

```
{{ gluggi("atom", "example", {standalone: true}) }}
```

#### `standalone`

[](#standalone)

The purpose of this variable is to provide an indicator whether the component is previewed in isolation or embedded in another template. This is for example important if a component receives its actual width from the parent.

`atom/example.html.twig`:

```
{% if standalone %}{% endif %}

        {# ... #}

{% if standalone %}{% endif %}
```

`molecule/product.html.twig`:

```
{# here the width is defined on the product, so the helper  shouldn't be in the output #}

    {{ gluggi("atom", "example") }} {# includes with standalone = false by default #}

```

### Using assets in views

[](#using-assets-in-views)

#### Referenced assets

[](#referenced-assets)

Place your images under `Resources/public/img` (just as in any other Symfony bundle) and reference the image in your SCSS file via `url("../img/...")`.

#### Inline assets

[](#inline-assets)

Load the assets directly from the bundle via `becklyn/asset-bundle`'s `asset()` function:

```

```

#### Separating content and layout assets

[](#separating-content-and-layout-assets)

In a regular layout project, there are some assets that are required for the layout to function (like logos, background images, etc...). And there are content images, that act as placeholders in the layout previews.

It is recommended to separate the two images into two directories:

- `Resources/public/img` for layout assets
- `Resources/public/content` for content placeholder assets

### Styling helpers

[](#styling-helpers)

There is a styling helper for usage in your layout views. It adds a top margin on every direct child element, except the first child. Use it like this:

```

```

If the component itself should not get a top margin, wrap the components in a single div:

```

```

### Template Configuration

[](#template-configuration)

You can define configuration parameters in the template, for example setting the body class for a `page` component.

Template configuration is defined with a twig comment as the first element in the template:

```
{#-
    # the indention is automatically removed
    some_configuration: test
    another_value: a
-#}
```

The configuration format is YAML. All configuration parameters are optional.

#### Defined configuration parameters

[](#defined-configuration-parameters)

Parametertypeindescription`body_class``string`(*any isolated view*)Sets the given class on the body.`prevent_zoom``bool`(*any isolated view*)Sets the `viewport` meta tag to prevent mobile zoom.`add_assets``array`(*any isolated view*)Adds given assets to a component.`override_assets``array`(*any isolated view*)Overrides the given assets on a component.##### Define configuration parameters "add\_assets" and "override\_assets"

[](#define-configuration-parameters-add_assets-and-override_assets)

The configuration parameters `add_assets` and `override_assets` are defined similar to the default configuration.

```
override_assets:
    css: []
    js: []
    js_head: []

add_assets:
    css: []
    js: []
    js_head: []
```

### Index Info

[](#index-info)

The main app can embed arbitrary HTML into the index page. This will be added on the right side, next to the list of components. Just define a controller action in the configuration, and the returned HTML is embedded in the page. If the returned HTML is empty, the info container will be hidden.

```
gluggi:
    info_action: "SomeBundle:Test:gluggiInfo"
```

This will call `SomeBundle\Controller\TestController::gluggiInfo()`. This configuration option uses `{{ render(controller("...")) }}` internally, so every syntax that is accepted by this call, will be accepted by Gluggi as well.

### Template Data

[](#template-data)

You can define global data, that is accessible in all component templates.

```
gluggi:
    data:
        key1: abc
        key2: 123
        icons:
            - "add"
            - "remove"
            - "search"
```

This data can be accessed in the templates via `{{ gluggi_data(key) }}`.

So for example:

```
{% for icon in gluggi_data("icons") %}

{% endfor %}
```

To ease fast debugging, the twig function will throw an exception, if the key is not defined in the data array.

Dummy Content
=============

[](#dummy-content)

To easily produce some example pages, there are several helper functions that render to dummy content:

`content`
---------

[](#content)

Renders example rich text content.

Options:

- `headlines`: the number of headline levels to render (default: `4`)

`form`
------

[](#form)

Renders a form with a lot of different form field types + states.

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance16

Infrequent updates — may be unmaintained

Popularity31

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity74

Established project with proven stability

 Bus Factor1

Top contributor holds 71.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~127 days

Recently: every ~225 days

Total

19

Last Release

1222d ago

Major Versions

1.1.0 → 2.0.02016-10-21

2.2.0 → 3.0.0-beta.12018-01-24

PHP version history (4 changes)1.0.0PHP ^7.0

3.2.0PHP ^7.2

3.3.0PHP ^7.4

3.5.0PHP >=7.4

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1044355?v=4)[Becklyn Studios](/maintainers/becklyn)[@Becklyn](https://github.com/Becklyn)

---

Top Contributors

[![apfelbox](https://avatars.githubusercontent.com/u/1032411?v=4)](https://github.com/apfelbox "apfelbox (15 commits)")[![tkasper](https://avatars.githubusercontent.com/u/1580938?v=4)](https://github.com/tkasper "tkasper (3 commits)")[![jesko-plitt](https://avatars.githubusercontent.com/u/54807545?v=4)](https://github.com/jesko-plitt "jesko-plitt (2 commits)")[![mario-becklyn](https://avatars.githubusercontent.com/u/12392822?v=4)](https://github.com/mario-becklyn "mario-becklyn (1 commits)")

---

Tags

phpsymfonysymfony-bundle

### Embed Badge

![Health badge](/badges/becklyn-gluggi-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/becklyn-gluggi-bundle/health.svg)](https://phpackages.com/packages/becklyn-gluggi-bundle)
```

###  Alternatives

[sylius/sylius

E-Commerce platform for PHP, based on Symfony framework.

8.4k5.6M651](/packages/sylius-sylius)[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.0k15.4k](/packages/prestashop-prestashop)[shopware/platform

The Shopware e-commerce core

3.3k1.5M3](/packages/shopware-platform)[easycorp/easyadmin-bundle

Admin generator for Symfony applications

4.3k16.7M310](/packages/easycorp-easyadmin-bundle)[sulu/sulu

Core framework that implements the functionality of the Sulu content management system

1.3k1.3M152](/packages/sulu-sulu)[contao/core-bundle

Contao Open Source CMS

1231.6M2.4k](/packages/contao-core-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)