Giter VIP home page Giter VIP logo

liipthemebundle's Introduction

Theme Bundle

This bundle provides you the possibility to add themes to each bundle. In your bundle directory it will look under Resources/themes/<themename> or fall back to the normal Resources/views if no matching file was found.

Build Status

Installation

Installation is a quick (I promise!) 4 step process:

  1. Download LiipThemeBundle
  2. Enable the Bundle
  3. Import LiipThemeBundle routing

Step 1: Install LiipThemeBundle with composer

Run the following composer require command:

$ php composer.phar require liip/theme-bundle:dev-master

Step 2: Enable the bundle

Finally, enable the bundle in the kernel:

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Liip\ThemeBundle\LiipThemeBundle(),
    );
}

Step 3: Import LiipThemeBundle routing files

Now that you have activated and configured the bundle, all that is left to do is import the LiipThemeBundle routing files.

In YAML:

# app/config/routing.yml
liip_theme:
    resource: "@LiipThemeBundle/Resources/config/routing.xml"
    prefix: /theme

Or if you prefer XML:

<!-- app/config/routing.xml -->
<import resource="@LiipThemeBundle/Resources/config/routing.xml" prefix="/theme" />

Configuration

You will have to set your possible themes and the currently active theme. It is required that the active theme is part of the themes list.

# app/config/config.yml
liip_theme:
    themes: ['web', 'tablet', 'phone']
    active_theme: 'web'

Optional

If you want to select the active theme based on a cookie you can add:

# app/config/config.yml
liip_theme:
    cookie:
        name: NameOfTheCookie
        lifetime: 31536000 # 1 year in seconds
        path: /
        domain: ~
        secure: false
        http_only: false

It is also possible to automate setting the theme based on the user agent:

# app/config/config.yml
liip_theme:
    autodetect_theme: true

Optionally autodetect_theme can also be set to a DIC service id that implements the Liip\ThemeBundle\Helper\DeviceDetectionInterface interface.

If your application doesnt't allow the user to switch theme, you can desactivate the controller shipped with the bundle:

# app/config/config.yml
liip_theme:
    load_controllers: false

Theme Cascading Order

The following order is applied when checking for templates that live in a bundle, for example @BundleName/Resources/template.html.twig with theme name phone is located at:

  1. Override themes directory: app/Resources/themes/phone/BundleName/template.html.twig
  2. Override view directory: app/Resources/BundleName/views/template.html.twig
  3. Bundle theme directory: src/BundleName/Resources/themes/phone/template.html.twig
  4. Bundle view directory: src/BundleName/Resources/views/template.html.twig

For example, if you want to integrate some TwigBundle custom error pages regarding your theme architecture, you will have to use this directory structure : app/Resources/themes/phone/TwigBundle/Exception/error404.html.twig

The following order is applied when checking for application-wide base templates, for example ::template.html.twig with theme name phone is located at:

  1. Override themes directory: app/Resources/themes/phone/template.html.twig
  2. Override view directory: app/Resources/views/template.html.twig

Change Theme Cascading Order

You able change cascading order via configurations directives: path_patterns.app_resource, path_patterns.bundle_resource, path_patterns.bundle_resource_dir. For example:

# app/config/config.yml
liip_theme:
    path_patterns:
        app_resource:
            - %%app_path%%/themes/%%current_theme%%/%%template%%
            - %%app_path%%/themes/fallback_theme/%%template%%
            - %%app_path%%/views/%%template%%
        bundle_resource:
            - %%bundle_path%%/Resources/themes/%%current_theme%%/%%template%%
            - %%bundle_path%%/Resources/themes/fallback_theme/%%template%%
        bundle_resource_dir:
            - %%dir%%/themes/%%current_theme%%/%%bundle_name%%/%%template%%
            - %%dir%%/themes/fallback_theme/%%bundle_name%%/%%template%%
            - %%dir%%/%%bundle_name%%/%%override_path%%
Cascading Order Patterns Placeholders
Placeholder Representation Example
%app_path% Path where application located app
%bundle_path% Path where bundle located, for example src/Vendor/CoolBundle/VendorCoolBundle
%bundle_name% Name of the bundle VendorCoolBundle
%dir% Directory, where resource should looking first
%current_theme% Name of the current active theme
%template% Template name view.html.twig
%override_path% Like template, but with views directory views/list.html.twig

Change Active Theme

For that matter have a look at the ThemeRequestListener.

If you are early in the request cycle and no template has been rendered you can still change the theme without problems. For this the theme service exists at:

$activeTheme = $container->get('liip_theme.active_theme');
echo $activeTheme->getName();
$activeTheme->setName("phone");

Common Pitfalls

Assetic dump do not check Resources/{theme}/views :

Make sure to place your themes into a views folder in Resources, like this: Resources/views/{theme}/views If you have any errors, make sure to set read_from in your config.yml under assetic:

read_from: %kernel.root_dir%/Resources/views/

Contribution

Active contribution and patches are very welcome. To keep things in shape we have quite a bunch of unit tests. If you're submitting pull requests please make sure that they are still passing and if you add functionality please take a look at the coverage as well it should be pretty high :)

First install dependencies:

   composer.phar install --dev

This will give you proper results:

phpunit --coverage-text

liipthemebundle's People

Contributors

lsmith77 avatar ebi avatar gimler avatar fabian avatar beberlei avatar koc avatar phiamo avatar coil avatar stof avatar erivello avatar liuggio avatar seldaek avatar jdeniau avatar maximgeerinck avatar jmeyo avatar asm89 avatar robocoder avatar

Watchers

James Cloos avatar Nicolas Potier avatar Hubert Marin avatar Nicolas Kern avatar Arnaud PONEL avatar Safwan GHAMRAWI avatar Kévin Marcachi avatar  avatar  avatar  avatar Romain Guerrero avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.