Block Content Fields

Block Fields are containers of dynamic data for your blocks. They can hold any kind of content (text, media) or options. These options and content can be easily edited by the designer or the editors of the website.

Here we can see how Block Fields are used for content. In this example we are setting three fields in our block. One for the title, one for content and an image field.

We have an <h2> element with several attributes that contains the $typos['title'] variable, a <div> element that contains the $typos['content'] variable and another <div> that contains an <img> element. In Edit Mode, the user can click on a text field and edit it, or click on an image field and select or upload an image.


Let's take a look at the classes and attributes used.

CLASSES

  • The typos-option class declares this element as a dynamic field element. Every field needs this class.
  • The option-text class indicates that this is a text field.
  • The option-fulltext class makes the text field editable with a full text editor.
  • The option-shorttext class makes the text field editable with a text editor that has basic formatting options.
  • The option-image class indicates an image field.

ATTRIBUTES

  • name: the name of the field. Its the same name that we used to declare the field in $defaults and the one that we are using with the $typos variable.
  • data-src: you can see that the image field is a <div> that contains an <img>. The data-src attribute is used instead of the src to define the image source, because of typOS responsive image loading. The getPic() function, is used to get the correct path for the image.
  • data-size: when set to auto, typOS loads the proper version of the image, according to the size that it is displayed on screen.