PHPackages                             field-interactive/cito-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. field-interactive/cito-bundle

ActiveSymfony-bundle

field-interactive/cito-bundle
=============================

Field CitoBundle

1.4.4(6y ago)1700[2 issues](https://github.com/field-interactive/cito-bundle/issues)MITPHPPHP ^7.2CI failing

Since May 3Pushed 6y ago3 watchersCompare

[ Source](https://github.com/field-interactive/cito-bundle)[ Packagist](https://packagist.org/packages/field-interactive/cito-bundle)[ Docs](https://www.field-interactive.com)[ RSS](/packages/field-interactive-cito-bundle/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (1)Dependencies (16)Versions (14)Used By (0)

Cito Framework
==============

[](#cito-framework)

---

Setup
-----

[](#setup)

### Installation

[](#installation)

- clone the completed project from Github
    - `git clone https://github.com/field-interactive/cito-bundle.git`
- or create a new project with composer
    - `composer create-project field-interactive/cito-skeleton`

To install the PHP and JS packages you need Composer and Yarn.

### Configuration

[](#configuration)

If you install only the package and not the skeleton, you have to create the directories and files by hand.

1. Create a folder `pages` in your project-root. This will be the Directory, where you store your content pages.
2. Create a config file `cito.yaml` in `config/packages`. This file contains:

    ```
     cito:
         pages: '%kernel.project_dir%/pages/'

    ```
3. Create a routes config `z_cito.yaml` in `config/routes`. This file contains:

    ```
     field_interactive_cito:
         resource: "@CitoBundle/Resources/config/routes.yaml"

    ```
4. Add the string `'%kernel.project_dir%/pages'` to `paths` in `config/packages/twig.yaml`.
5. Add the `picture_macro` to `filter_sets` in `config/packages/imagine.yaml`. The content of `picture_macro`:

    ```
     jpeg_quality: 85
         png_compression_level: 8
         filters:
             relative_resize:
                 widen: 600

    ```

    1. If `config/packages/imagine.yaml` is missing you can copy the file from `vendor/field-interactive/cito-bundle/Resources/config/packages/imagine.yaml`.
6. If the file `config/routes/imagine.yaml` does not exist, add it and set the content:

    ```
     _liip_imagine:
         resource: "@LiipImagineBundle/Resources/config/routing.yaml"

    ```

---

Twig Functions, Filters and Macros
----------------------------------

[](#twig-functions-filters-and-macros)

### CitoController

[](#citocontroller)

Search the page to the current route, if you did not define the route. The controller is searching for the page in the `pages` folder in your project-root.

Example: `/example/page`

The controller search for `%project_dir%/pages/example/page.html.twig` and `%project_dir%/pages/example/page/index.html.twig`.

### Navigation

[](#navigation)

Adds an 'active' class to the current link item in the navigation list. The navigation needs to be a simple ` ` list, with an `` tag inside.

```
{{ navigation('path/to/nav.html') }}

```

You can add a parameters array:

- breadcrumbs (boolean): generate breadcrumbs to the current route
    - `{{ navigation('path/to/nav.html', {'breadcrumbs': true}) }}`
- range (int/array): generate the navigation from a level
    - `{{ navigation('path/to/nav.html', {'range': 2}) }}`
    - `{{ navigation('path/to/nav.html', {'range': [2,4]}) }}`

### Page

[](#page)

Loads a page object to get its blocks, link, path or name.

```
{% set page = page('path/to/page.html.twig') %}

```

You can access the attributes like an object:

- `{{ page('path/to/page.html.twig').blocks.title }}`

### Pagelist

[](#pagelist)

Loads a directory or set of pages as a list of [page objects](#page).

```
{% set pagelist = pagelist({'dir': 'path/to/dir'}) %}
{% set pagelist = pagelist({'files': [
    'path/to/file_1.html.twig',
    'path/to/file_2.html.twig',
    'path/to/file_1.htm3.twig'
    ]}) %}

```

You can iterate over the list and access every page:

- `{% for page in pagelist %}`

You can sort and limit the result:

- `{% set pagelist = pagelist({'dir': 'path/to/dir', 'sortOrder': 'desc|asc', 'sortBy': 'link', 'limit': 10}) %}`

### Picture

[](#picture)

Creates an html picture tag for an image with a set of given sizes.

```
{% import '@Cito/macros.html.twig' as macro %}
{{ macro.picture('/path/to/image.jpg', [1200, 900, 600]) }}

```

You can set up to 6 sizes.

### InlineSVG

[](#inlinesvg)

Adds or replaces attributes to an svg image.

```
{{ asset('path/to/image.svg')|inline_svg({attr: {class: 'your-class', id: 'svg-1'}})|raw }}

```

You can also add some classes:

- `{{ asset('path/to/image.svg')|inline_svg({classes: 'add-classname another-classname'})|raw }}`

### Body class and id

[](#body-class-and-id)

Set the class and the id of the `` tag.

```
{% set body_class = 'your-class' %}
{% set body_id = 'your-id' %}

```

### IncludeUserAgent

[](#includeuseragent)

Includes a template with user agent checks

There are two usages:

Replace 'template file' with the file you want to include. The file will be searched for in the pages directory set in cito.yml. Setting no folder will automatically choose it based on the User Agent. If the folder is set, it will take the include the file from there.

```
{{ include_ua('template file') }}
or
{{ include_ua('template file', 'folder') }}

```

---

JavaScripts and Webpack
-----------------------

[](#javascripts-and-webpack)

### Lazyload

[](#lazyload)

[vanilla lazyload](https://github.com/verlok/lazyload)

### Sass compiling

[](#sass-compiling)

To write better and cleaner css you can use sass, which you can compile over `npm build`. You only need the `assets/sass/default.sass` where you combine your sass files.

### Watcher

[](#watcher)

Auto compiles sass and minifys css and js. You can start a watcher with the command `npm watch`. If you want to auto refresh the browser after new compiling you can use the browser sync `gulp serve`.

---

Useful documentations
---------------------

[](#useful-documentations)

- [Symfony](https://symfony.com/doc/current/index.html)
- [Twig](https://twig.symfony.com/doc/2.x/)

About Us
--------

[](#about-us)

We are [Field-Interactive](https://www.field-interactive.com)

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor2

2 contributors hold 50%+ of commits

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 ~65 days

Recently: every ~92 days

Total

10

Last Release

2346d ago

PHP version history (2 changes)1.0.0PHP ^7.0

1.3.7PHP ^7.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/8bb38b2f49b579ea8053fbd4c4e55981482f3630e46de0270661d3e164f627b0?d=identicon)[FieldInteractive](/maintainers/FieldInteractive)

---

Top Contributors

[![domideimel](https://avatars.githubusercontent.com/u/32941053?v=4)](https://github.com/domideimel "domideimel (8 commits)")[![timworxDE](https://avatars.githubusercontent.com/u/37555726?v=4)](https://github.com/timworxDE "timworxDE (7 commits)")[![Crystallix](https://avatars.githubusercontent.com/u/35036188?v=4)](https://github.com/Crystallix "Crystallix (4 commits)")[![BukkitPlaysMC](https://avatars.githubusercontent.com/u/11799837?v=4)](https://github.com/BukkitPlaysMC "BukkitPlaysMC (3 commits)")[![marcharding](https://avatars.githubusercontent.com/u/3768?v=4)](https://github.com/marcharding "marcharding (2 commits)")

---

Tags

cito

### Embed Badge

![Health badge](/badges/field-interactive-cito-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/field-interactive-cito-bundle/health.svg)](https://phpackages.com/packages/field-interactive-cito-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)[ec-cube/ec-cube

EC-CUBE EC open platform.

78527.0k1](/packages/ec-cube-ec-cube)[shopware/platform

The Shopware e-commerce core

3.3k1.5M3](/packages/shopware-platform)[kimai/kimai

Kimai - Time Tracking

4.6k7.4k1](/packages/kimai-kimai)[sulu/sulu

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

1.3k1.3M152](/packages/sulu-sulu)

PHPackages © 2026

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