Theme Configuration File

The theme configuration file config.php is central to a theme. It contains content type and field definitions which define the "backend" part of a theme which stores content in the database. It consists of two parts: general information about a theme and content type and field configuration.

General information about the theme

Setting Description
#theme-name Name of the theme, for example 'IdeaSpace 360'.
#theme-key The theme key which is used - for example - in event listeners: 'ideaspace-360-photo-sphere-viewer'. It must not contain spaces or any special characters.
#theme-version Example: '1.0'.
#ideaspace-version The minimum required IdeaSpaceVR version to run this theme. Example: '>=1.0.0'.
#theme-description A descriptive text.
#theme-author-name The name of the author.
#theme-author-email The e-mail address of the author.
#theme-homepage The website URL of the theme.
#theme-keywords Keywords, comma separated. Example: 'photo sphere, gaze input navigation, mobile, 360, photography'.
#theme-view The main view template file. Example: 'scene' which translates to scene.blade.php.

Content type and field configuration

This part of the file defines which content the user can enter, upload or configure when a new space is created or edited.

IdeaSpaceVR - Building Basic VR Theme

The theme configuration file (config.php) can define one or many content types. And each content type can define one or many fields. Each field is described by a #type and other parameters. Take a look at Field Type Reference which lists all available fields and types.

Setting Description
#label Label of the content type.
#description The description of the content type.
#max-values How many items of this content type can be created. Possible values are 'infinite' or a number.
#fields Fields configuration. See Field Type Reference.

Example: IdeaSpace 360 theme

return [

  '#theme-name' => 'IdeaSpace 360',
  '#theme-key' => 'ideaspace-360-photo-sphere-viewer',
  '#theme-version' => '1.0',
  '#ideaspace-version' => '>=1.0.0',
  '#theme-description' => 'Photo sphere viewer with navigation menu in VR. Attach text annotations to your photo spheres.',
  '#theme-author-name' => 'IdeaSpaceVR',
  '#theme-author-email' => '[email protected]',
  '#theme-homepage' => 'https://www.ideaspacevr.org/themes',
  '#theme-keywords' => 'photo sphere, gaze input navigation, mobile, 360, photography',
  '#theme-view' => 'scene',

  '#content-types' => [

    'text-notes' => [
      '#label' => 'Text Notes',
      '#description' => 'Manage your text notes which are attached to your photo spheres.',
      '#max-values' => 'infinite',
      '#fields' => [

        'note' => [
          '#label' => 'Text Note',
          '#description' => 'Enter some text.',
          '#help' => 'The text note can be attached to a photo sphere.',
          '#type' => 'textfield',
          '#maxlength' => 140,
          '#contentformat' => 'text',
          '#required' => true,
        ],

      ], /* fields */
    ], /* notes */

    'photo-spheres' => [
      '#label' => 'Photo Spheres',
      '#description' => 'Manage your photo spheres.',
      '#max-values' => 'infinite',
      '#fields' => [

        'title' => [
          '#label' => 'Photo Sphere Title',
          '#description' => 'Enter a title.',
          '#help' => 'Enter a title for this photo sphere (optional). The title is shown after the photo sphere has been loaded.',
          '#type' => 'textfield',
          '#maxlength' => 140,
          '#contentformat' => 'text',
          '#required' => false,
        ],

        'photo-sphere' => [
          '#label' => 'Photo Sphere',
          '#description' => 'Upload a photo sphere image.',
          '#help' => 'Photo sphere image in equirectangular projection format.',
          '#type' => 'photosphere',
          '#required' => true,
          '#file-extension' => ['jpg', 'png'],
        ],

        'attach-text-notes' => [
          '#label' => 'Info Notes',
          '#description' => 'Add some text notes to the photo sphere.',
          '#help' => 'Add some contextual information by attaching text notes to your photo sphere.',
          '#type' => 'position',
          '#maxnumber' => 10,
          '#required' => false,
          '#content-type-reference' => 'text-notes',
          '#field-reference' => 'photo-sphere',
        ],

      ], /* fields */

    ], /* photo-spheres */

  ], /* content types */

];

There are two content types defined: text-notes and photo-spheres. Text notes can be attached to photo spheres. The field attach-text-notes (part of content type photo-spheres) defines that items of the content type text-notes can be positioned and attached to photo spheres.

Take a look at Content Types and Field Types which lists all available fields and types.