mortendk/template-choser.md

## template-choser.md

      
    Raw
  

              template-choser.md
            
          
    template chooser

Drupal8 is pretty awesome, but its a problem that you cant choose fromt the ui which template to use.
Sure you can overwrite whats there (node--article.html.twig) but that dont give the end user a chance to later change in the site & can end up in even more templates & clutter.
template suggestions

Make it easy to provide a template suggestion for entities, blocks, pages, nodes, fields, menues, username, everything that have a template you should be able to give a suggestion.
class selector

A prepopulated list of classes that can be selected for a template.
The modules userbase is sitebuilders & themes that wants to provide variations for a site, developers dont have to provide templates after a site is build, and can rely on the theme to provide all the variations.
user stories

sitebuilder


sitebuilder have a site where a new content type have been added, he wants to change the new type to another layout than article & page, in the ui he chooses "node layout: orange" for the content type.


sitebuilder wants a field to have classes "green width-20" added to it.


sitebuilder wants to be save the configuration


the theme


Theme provides predefined template variations for a sitebuilder to choose from in the ui, so they follow "the design".


Theme want to provide predefines css classes for a sitebuilder to select from


Theme wants to be able to later update a template or make new variations


themes wants to change classnames that have been selected, a user should not select the classnames but a machine name ex: "class__name__foo--variation" is ugly to read but "layout-wide" is readable


Template-chooser.yml

a theme supporting the template chooser includes a yml file.
Each template will be grouped by machine name, so end user dont end up selecting templates that are not usable.
**[themename]/template-chooser.yml: **
yml

formation:
[machine-name]:
[name] : template-suggestion.html.twig
[othername] : template-othersuggestion.html.twig

template suggestions :

node: 
orange : node--orange.html.twig
blue : node--blue.html.twig

field-image
field-image : image-awesome.html.twig
field-image : image-notsoawesome.html.twig

field-text
field-text : field-text-my-variation.html.twig


css class selector

class sugestions:
template: 
group-name: 
 - name: classname
 - name2: classname2
otherelement: 
group-name-two: 
 - name3: classname3
 - name4: classname4


** [themename]/templace-class.yml:

node: 
layout: 
 - small: grid-10
 - large: grid-30
 - xlarge: grid-100
colors: 
 - thorns: red
 - timbers: green


the content type interface have an ui that shows layout & colors with the readable names.
Templates can add in the classes that is provided from the yml file template-choser-classes
examplate template:

<div {{ attributes.addClass(classes, template-choser-classes) }}>