Add frame_layout classes to CEs

[sheydin]

Hi,

how can I add frame_layout classes to content elements? I do not find anything in the docs and the old style does not work:

TCEFORM.tt_content.frame_class.addItems {
  greybox = graue Box
  bluebox = blaue Box
}

Thanks!

[medarob]

I think what you want is described here: https://docs.typo3.org/m/typo3/reference-tsconfig/master/en-us/PageTsconfig/TceForm.html

Example, for only adding a new option to the layout field for a Text&Media CE:

TCEFORM {
  tt_content {
    layout {
      types {
        textmedia {
          addItems {
            100 = my new layout for Text & Media only
          }
        }
      }
    }
  }
}

If you want to add a new layout option to all CE then this works:

TCEFORM {
  tt_content {
    layout {
      addItems {
        100 = my new layout for all CE
      }
    }
  }
}

[sheydin]

Thank you! That's what I was searching for. But still, adding layouts does not automatically add classes to the elements such as image. Only frame_layout generate generic classes like frame-layout-10 etc. Is it a bug or a feature?

[benjaminkott]

The field tt_content.layout is not respected or handled by default to avoid conflicts and leave it to the integrator to use this field for custom rendering WITHIN the content elements.

Adding new values to fields via TSconfig works as described above, you just need to use the right field identifier where you want to add new options to.

Frame => frame_class

Frame Layout => frame_layout

Frame Options (current master) => frame_options

TCEFORM {
     tt_content {
          <fieldname> {
               addItems {
                    newoption = New Option
               }
          }
     }
}

TCEFORM {
     tt_content {
          frame_layout {
               addItems {
                    newoption = New Option
               }
          }
     }
}

Check https://docs.typo3.org/m/typo3/reference-tsconfig/master/en-us/PageTsconfig/TceForm.html for more information.

Transformations within the rendering:

frame_class => frame-<value> // except none, this will disable the frame in general frame_layout => frame-layout-<value> frame_options => frame-option-<value> // for each selected value

A generated class string may look like this.

frame 
frame-default 
frame-type-text 
frame-layout-default 
frame-size-default 
frame-background-primary 
frame-space-before-none 
frame-space-after-none 
frame-option-ruler-after 
frame-no-backgroundimage

Hope that helps.