Block Canvas HTML Field

Whenever you create a "block canvas" field a corresponding "html" field is added to your content type. For example a field named content will have a corresponding contentHtml field: 

  • content - raw DraftJS JSON format
  • contentHtml - DraftJS state rendered to HTML

Html fields accept parameters which allow you to customize the rendered HTML

  • images - Object - Configuration for each image size default, small, medium, large. See the Imgix URL API docs for all the available options.
  • classPrefix - String - A prefix to be all CSS classes in the generated HTML.

Configuring Image Parameters

tsg.yml:

routes:
  homepage:
    path: /
    template: pages/homepage.html
    context:
      query: data/homepage.graphql
      variables:
        images:
          default:
            w: 500
            h: 500

Then, wherever you make your GraphQL query, ensure that the imageConfig variable is passed to the blockCanvasHtml query:

homepage.graphql:

query($images: TSImagesConfig){
  home {
    blockCanvasHtml(images: $images)
  }
} 

Imgix settings objects may be defined once and reused in multiple routes in tsg.yml using YAML anchors:

tsg.yml:

images: &images
  default:
    w: 500
    h: 500
  small:
    w: 250
    h: 250
  medium:
    w: 500
    h: 500
  large:
    w: 1000
    h: 1000
    
routes:
  homepage:
    path: /
    template: pages/homepage.html
    context:
      query: data/homepage.graphql
      variables:
        images:
          <<: *images
  about:
      path: /
      template: pages/about.html
      context:
        query: data/about.graphql
        variables:
          images:
            <<: *images
  gallery:
        path: /
        template: pages/gallery.html
        context:
          query: data/gallery.graphql
          variables:
            images:
              <<: *images          

Join us

Interested in joining the team as coworker or investor?

contact@takeshape.com