- 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.
If you install only the package and not the skeleton, you have to create the directories and files by hand.
-
Create a folder
pagesin your project-root. This will be the Directory, where you store your content pages. -
Create a config file
cito.yamlinconfig/packages. This file contains:cito: pages: '%kernel.project_dir%/pages/' -
Create a routes config
z_cito.yamlinconfig/routes. This file contains:field_interactive_cito: resource: "@CitoBundle/Resources/config/routes.yaml" -
Add the string
'%kernel.project_dir%/pages'topathsinconfig/packages/twig.yaml. -
Add the
picture_macrotofilter_setsinconfig/packages/imagine.yaml. The content ofpicture_macro:jpeg_quality: 85 png_compression_level: 8 filters: relative_resize: widen: 600- If
config/packages/imagine.yamlis missing you can copy the file fromvendor/field-interactive/cito-bundle/Resources/config/packages/imagine.yaml.
- If
-
If the file
config/routes/imagine.yamldoes not exist, add it and set the content:_liip_imagine: resource: "@LiipImagineBundle/Resources/config/routing.yaml"
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.
Adds an 'active' class to the current link item in the navigation list. The navigation needs to be a simple <ul> <li> list,
with an <a> 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]}) }}
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 }}
Loads a directory or set of pages as a list of page objects.
{% 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}) %}
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.
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 }}
Set the class and the id of the <body> tag.
{% set body_class = 'your-class' %}
{% set body_id = 'your-id' %}
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') }}
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.
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.
We are Field-Interactive