Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Forms & Blueprints

Extending a flex-object blueprint to page

Started by Marco 4 years ago · 1 replies · 734 views
4 years ago

Hello,
I've been experimenting and working on the powerful flex-objects and wondering if there is (I am sure of that!) a way to extend properties from a flex-object blueprint definition to a page blueprint.
As of now I am duplicating fields with prefixes:

  • collection.* for the flex-object blueprint
  • header.* for the page blueprint

As fields are growing in number, this is becoming harder to maintain.

Flow logic whether to consider collection. or header. field happens in Twig of course.

Flex-Objects blueprint:

YAML
title: Photos
description: Simple Photo directory with Categories and Tags.
type: flex-objects

# Flex Configuration
config:
  # Administration Configuration
  admin:
    # Admin router (optional)
    router:
      path: '/photos'

    # Admin menu (optional)
    menu:
      list:
        route: '/photos'
        title: Photos
        icon: fa-photo
        # Authorization to collection admin
        authorize: ['admin.photos.list', 'admin.super']
        # Priority -10 .. 10 (highest goes up)
        priority: 2

    # Admin template type / folder
    template: default

    # Permissions
    permissions:
      # Primary permissions
      admin.photos:
        type: crudpl
        label: Photos

    # Preferences (defaults) - Available in Twig through 'directory.config.admin.collection.prefs' as an array.
    collection:
      prefs:
        sort_key: title
        sort_direction: ASC
        tn_size: 640
        tn_resize_method: 'resize' # [resize, cropResize, cropZoom]
        ph_lightbox: true
        ph_size: 1600
        ph_resize_method: 'cropResize' # [resize, cropResize, cropZoom]
        gallery_class: 'columns is-multiline'
        gallery_element_class: 'column is-one-quarter-desktop is-half-tablet'
        gallery_element_title_class: 'subtitle is-6 has-text-centered'
        gallery_element_caption_class: 'subtitle is-7 has-text-centered'
        gallery_element_category_class: 'tag is-primary is-light'
        gallery_element_tags_class: 'tag is-light'
    # List view
    list:
      title: title
      fields:
        published:
          field:
            type: toggle
            label: Publ
          width: 8
        title:
          link: edit
        caption:
          link: edit
        test_tags:
    # Edit View
    edit:
      title:
        template: '[{{ object.photo|first.name ?? ''<i>File Name</i>'' }}] | {{ object.title ?? ''Title'' }} | {{ object.caption ?? ''<i>no caption</i>'' }}'

    views:
      # List view
      list:
        options:
          per_page: 30    # Default number of items per page
          order:
            by: title # Default field used for ordering
            dir: asc      # Default ordering direction

    # Preview View
    preview:
      enabled: false
      route:
        #template: '/plugins/flex-objects/directory:photos'

    # Data Export
    export:
      enabled: true
      method: 'jsonSerialize'
      formatter:
        class: 'Grav\Framework\File\Formatter\YamlFormatter'
      filename: 'photos'

  # Site Configuration
  site:
    templates:
      collection:
        # Lookup for the template layout files for collections of objects
        paths:
          - 'flex/{TYPE}/collection/{LAYOUT}{EXT}'
      object:
        # Lookup for the template layout files for objects
        paths:
          - 'flex/{TYPE}/object/{LAYOUT}{EXT}'
      defaults:
        # Default template {TYPE}; overridden by filename of this blueprint if template folder exists
        type: photos
        # Default template {LAYOUT}; can be overridden in render calls (usually Twig in templates)
        layout: default

  # Data Configuration
  data:
    # Object class to be used, allowing custom methods for the object
    object: 'Grav\Common\Flex\Types\Generic\GenericObject'
    # Collection class to be used, allowing custom methods for the collections
    collection: 'Grav\Common\Flex\Types\Generic\GenericCollection'
    # Index class to be used, works as a quick database-like lookup index
    index: 'Grav\Common\Flex\Types\Generic\GenericIndex'
    storage:
      # Storage class, use single file storage (does not support images and assets)
      class: 'Grav\Framework\Flex\Storage\FolderStorage'
      options:
        formatter:
          class: 'Grav\Framework\File\Formatter\YamlFormatter'
          options:
            file_extension: '.yaml'
            inline: 5           # Save with up to 4 expanded levels
            indent: 2           # Indent with 2 spaces
            native: true        # Use native YAML decoder if available
            compat: true        # If YAML cannot be decoded, use compatibility mode (SLOW)
        folder: user-data://flex-photos
    search:
      # Search options
      options:
        contains: 1
      # Fields to be searched
      fields:
        - title
        - caption
        - test_tags

form:
  validation: loose

  fields:
    published:
      type: toggle
      label: Published
      highlight: 1
      default: 1
      options:
        1: PLUGIN_ADMIN.YES
        0: PLUGIN_ADMIN.NO
      validate:
        type: bool
        required: true

    photo:
      type: file
      multiple: false
      accept:
        - image/*
      label: Photo
      destination: self@

    catalog_id:
      type: text
      label: Catalog ID
      validate:
        required: false

    title:
      type: text
      label: Title
      validate:
        required: true

    caption:
      type: text
      label: Caption
      validate:
        required: false

    author:
      type: text
      label: Author

    test_tags:
      type: selectize
      size: large
      label: Test Tags
      classes: fancy
      validate:
        type: commalist

    categories_and_tags:
      type: taxonomy
      label: Category and Tag
      multiple: true
      validate:
        type: array

blueprints:
  # Blueprint for configure view.
  configure:
    # We are inside TABS field.
    fields:
      # Add our own tab
      preferences:
        type: tab
        title: Preferences
        fields:
          # Fields should be prefixed with object, collection etc..
          # Available in Twig through 'directory.config.collection.prefs' as an array.
          spacer.sorting:
            type: spacer
            title: Sorting
          collection.prefs.sort_key:
            type: select
            size: small
            label: Sorting field
            classes: fancy
            default: 'title'
            options:
              'title': 'Title'
              'caption': 'Caption'
              'catalog_id': 'Catalog ID'
          collection.prefs.sort_direction:
            type: select
            size: small
            label: Sorting direction
            classes: fancy
            default: 'ASC'
            options:
              'ASC': 'Ascending (A-Z)'
              'DESC': 'Descending (Z-A)'
          spacer.thumbnails:
            type: spacer
            title: Thumbnails
          collection.prefs.tn_size:
            type: range
            label: Thumbnail Size in px
            help: Size step is 32 px
            id: tn_size
            default: 640
            validate:
              min: 32
              max: 3072
              step: 32
          collection.prefs.tn_resize_method:
            type: select
            size: medium
            label: Resize method
            classes: fancy
            default: 'resize'
            options:
              'resize': 'resize'
              'cropResize': 'cropResize'
              'cropZoom': 'cropZoom'
          spacer.fullsize:
            type: spacer
            title: Full size images
          collection.prefs.ph_lightbox:
              type: toggle
              label: Enable Lightbox
              highlight: 1
              help: Enables or disables Lightbox functionality.
              options:
                  1: PLUGIN_ADMIN.YES
                  0: PLUGIN_ADMIN.NO
              validate:
                  type: bool
          collection.prefs.ph_size:
            type: range
            label: Photo Size in px
            help: Size step is 64 px
            id: ph_size
            default: 1600
            validate:
              min: 0
              max: 3072
              step: 64
          collection.prefs.ph_resize_method:
            type: select
            size: medium
            label: Resize method
            classes: fancy
            default: 'cropResize'
            options:
              'resize': 'resize'
              'cropResize': 'cropResize'
              'cropZoom': 'cropZoom'
          spacer.element:
            type: spacer
            title: Element
          collection.prefs.gallery_class:
            type: text
            size: medium
            label: Gallery container class(es)
            default: 'columns is-multiline'
          collection.prefs.gallery_element_class:
            type: text
            size: medium
            label: Gallery element class(es)
            default: 'column is-one-quarter-desktop is-half-tablet'
          collection.prefs.gallery_element_title:
              type: toggle
              label: Show Photo Title
              highlight: 1
              help: Show/hide Photo Title.
              options:
                  1: PLUGIN_ADMIN.YES
                  0: PLUGIN_ADMIN.NO
              validate:
                  type: bool
          collection.prefs.gallery_element_title_class:
            type: text
            size: medium
            label: Element Title class(es)
            default: 'subtitle is-6 has-text-centered'
          collection.prefs.gallery_element_caption:
              type: toggle
              label: Show Photo Caption
              highlight: 1
              help: Show/hide Photo Caption (if present).
              options:
                  1: PLUGIN_ADMIN.YES
                  0: PLUGIN_ADMIN.NO
              validate:
                  type: bool
          collection.prefs.gallery_element_caption_class:
            type: text
            size: medium
            label: Element Caption class(es)
            default: 'subtitle is-7 has-text-centered'
          collection.prefs.gallery_element_category:
              type: toggle
              label: Show Photo Category
              highlight: 1
              help: Show/hide Photo Category (if present).
              options:
                  1: PLUGIN_ADMIN.YES
                  0: PLUGIN_ADMIN.NO
              validate:
                  type: bool
          collection.prefs.gallery_element_category_class:
            type: text
            size: medium
            label: Element Category class(es)
            default: 'tag is-primary is-light'
          collection.prefs.gallery_element_tags:
              type: toggle
              label: Show Photo Tags
              highlight: 1
              help: Show/hide Photo Tags (if present).
              options:
                  1: PLUGIN_ADMIN.YES
                  0: PLUGIN_ADMIN.NO
              validate:
                  type: bool
          collection.prefs.gallery_element_tags_class:
            type: text
            size: medium
            label: Element Tags class(es)
            default: 'tag is-light'

Page blueprint:

YAML
'@extends':
    type: default
    context: blueprints://pages
form:
  fields:
    tabs:
      type: tabs
      active: 1

      fields:
        preferences:
          type: tab
          title: Photos
          fields:
            # Fields should be prefixed with object, collection etc..
            # Available in Twig through 'header.prefs' as an array.
            spacer.sorting:
              type: spacer
              title: Sorting
            header.prefs.sort_key:
              type: select
              size: small
              label: Sorting field
              classes: fancy
              default: 'title'
              options:
                'title': 'Title'
                'caption': 'Caption'
                'catalog_id': 'Catalog ID'
            header.prefs.sort_direction:
              type: select
              size: small
              label: Sorting direction
              classes: fancy
              default: 'ASC'
              options:
                'ASC': 'Ascending (A-Z)'
                'DESC': 'Descending (Z-A)'
            spacer.thumbnails:
              type: spacer
              title: Thumbnails
            header.prefs.tn_size:
              type: range
              label: Thumbnail Size in px
              help: Size step is 32 px
              id: tn_size
              default: 640
              validate:
                min: 32
                max: 3072
                step: 32
            header.prefs.tn_resize_method:
              type: select
              size: medium
              label: Resize method
              classes: fancy
              default: 'resize'
              options:
                'resize': 'resize'
                'cropResize': 'cropResize'
                'cropZoom': 'cropZoom'
            spacer.fullsize:
              type: spacer
              title: Full size images
            header.prefs.ph_lightbox:
              type: toggle
              label: Enable Lightbox
              highlight: 1
              help: Enables or disables Lightbox functionality.
              options:
                1: PLUGIN_ADMIN.YES
                0: PLUGIN_ADMIN.NO
              validate:
                type: bool
            header.prefs.ph_size:
              type: range
              label: Photo Size in px
              help: Size step is 64 px
              id: ph_size
              default: 1600
              validate:
                min: 0
                max: 3072
                step: 64
            header.prefs.ph_resize_method:
              type: select
              size: medium
              label: Resize method
              classes: fancy
              default: 'cropResize'
              options:
                'resize': 'resize'
                'cropResize': 'cropResize'
                'cropZoom': 'cropZoom'
            spacer.element:
              type: spacer
              title: Element
            header.prefs.gallery_class:
              type: text
              size: medium
              label: Gallery container class(es)
              default: 'columns is-multiline'
            header.prefs.gallery_element_class:
              type: text
              size: medium
              label: Gallery element class(es)
              default: 'column is-one-quarter-desktop is-half-tablet'
            header.prefs.gallery_element_title:
              type: toggle
              label: Show Photo Title
              highlight: 1
              help: Show/hide Photo Title.
              options:
                1: PLUGIN_ADMIN.YES
                0: PLUGIN_ADMIN.NO
              validate:
                type: bool
            header.prefs.gallery_element_title_class:
              type: text
              size: medium
              label: Element Title class(es)
              default: 'subtitle is-6 has-text-centered'
            header.prefs.gallery_element_caption:
              type: toggle
              label: Show Photo Caption
              highlight: 1
              help: Show/hide Photo Caption (if present).
              options:
                1: PLUGIN_ADMIN.YES
                0: PLUGIN_ADMIN.NO
              validate:
                type: bool
            header.prefs.gallery_element_caption_class:
              type: text
              size: medium
              label: Element Caption class(es)
              default: 'subtitle is-7 has-text-centered'
            header.prefs.gallery_element_category:
              type: toggle
              label: Show Photo Category
              highlight: 1
              help: Show/hide Photo Category (if present).
              options:
                1: PLUGIN_ADMIN.YES
                0: PLUGIN_ADMIN.NO
              validate:
                type: bool
            header.prefs.gallery_element_category_class:
              type: text
              size: medium
              label: Element Category class(es)
              default: 'tag is-primary is-light'
            header.prefs.gallery_element_tags:
              type: toggle
              label: Show Photo Tags
              highlight: 1
              help: Show/hide Photo Tags (if present).
              options:
                1: PLUGIN_ADMIN.YES
                0: PLUGIN_ADMIN.NO
              validate:
                type: bool
            header.prefs.gallery_element_tags_class:
              type: text
              size: medium
              label: Element Tags class(es)
              default: 'tag is-light'

Thank you!

4 years ago

Any clues? Maybe I just got the syntax wrong 😕
Thanks!

Suggested topics

Topic Participants Replies Views Activity
Forms & Blueprints · by Ton Haarmans, 5 years ago
13 1135 4 months ago
Forms & Blueprints · by Hugo Oliveira, 5 months ago
0 61 5 months ago
Forms & Blueprints · by Flachy Joe, 6 months ago
9 134 6 months ago
Forms & Blueprints · by Augustus, 7 months ago
7 108 7 months ago
Forms & Blueprints · by Julien, 7 months ago
10 128 7 months ago