ttree/ress

Last activity on 6 June 2018
  • 5
  • 1
  • 150
composer require ttree/ress

Ttree Responsive Web Design with Server-Side Component

1.0.1

Ttree Responsive Web Design with Server-Side Component

Version
1.0.1
Type
neos-package
Release Date
20.06.2018 11:34:31
Source
git
Distribution
zip
Requires
Requires (dev)
None
Suggest
None
Provides
None
Conflicts
None
Replaces
None
MIT 729298a9e2152b7e430d92fbf1a5238a013c56fe

Ttree - Responsive Web Design with Server-Side Component

Description

Responsive Web Design is really really trendy (and mandatory) today. But in some cases it's not the best solution.

Most responsive website serve exactly the same amount of bits to desktop, tablet or mobile user. Many mobile user will leave your website if the loading time is to long. Or sometimes your design need a different markup to support your design decisions.

If you are intersted by this topics, you can read those articles:

What's include in this package ?

This package include the library MobileDetect and extend the Action Request class with two new methods:

  • ActionRequest::isMobile()
  • ActionRequest::isTablet()

You can use those methods in your own controller, Fusion prototypes, ...

No magic everything is configurable

Tweak a Fusion prototype to change the rendering by device type

prototype(Your.Package.CustomElement) < prototype(Neos.Fusion:Case) {
    default {
        condition = ${request.mobile}
        itemRenderer = Your.Package.CustomElementDefault
    }
    default {
        condition = true
        itemRenderer = Your.Package.CustomElementDefault
    }
    
    @cache {
        mode = 'dynamic'
        entryIdentifier {
          node = ${node}
        }
        entryDiscriminator = ${request.mobile : 'mobile' ? 'default'}
        context {
                1 = 'node'
                2 = 'documentNode'
        }
        entryTags {
                1 = ${'Node_' + node.identifier}
        }
    }
}

By using the dynamic caching mode you don't need to configure the upper cache segments.

Completly different markup for Mobile, Tablet & Desktop

You can override your root Fusion conditions to select different rendering for different type of client:

root {
    mobile {
        @position = 'before default'
        condition = ${request.mobile && Configuration.setting('Ttree.Ress.enable.mobile') == true}
        type = 'Your.Package:MobilePage'
    }
    tablet {
        @position = 'before default'
        condition = ${request.tablet && Configuration.setting('Ttree.Ress.enable.tablet') == true}
        type = 'Your.Package:TabletPage'
    }
    @cache {
        entryIdentifier {
            mobile = ${request.mobile && Configuration.setting('Ttree.Ress.enable.mobile') == true ? 'mobile' : ''}
            tablet = ${request.tablet && Configuration.setting('Ttree.Ress.enable.tablet') == true ? 'tablet' : ''}
        }
    }
}

In this example the root cache entry identifier are configured correctly for mobile and table cache. Please make sure to configure your other cache segments correctly.

Sponsors & Contributors

The development of this package is sponsored by ttree (https://ttree.ch) and techniconcept (https://techniconcept.ch).

The content of the readme is provided by Github
The same vendor provides 48 package(s).