image:
  namespace: "Atoms/HTML5"
  use: "@atoms/html5/image/image.twig"
  label: Image
  description: "Image with caption component."
  libraries:
    - image_lib:
        css:
          component:
            ../styles/image.css: { }

  fields:
    image:
      type: text
      label: The image.
      description: The image provided by CMS.
    url:
      label: Url
      type: textfield
      description: Use "Url" if you don't have the rendered image tag. The component will generate an image tag.
      preview: "https://picsum.photos/500/400"
    alt:
      type: text
      label: Alt text.
      description: The image alt text.
      preview:
        faker: lorem.sentences
    caption:
      type: text
      label: The caption text.
      description: The caption for figure mostly.
      preview:
        faker: lorem.sentences

  settings:
    type:
      label: Type
      type: select
      options:
        fg: Foreground
        bg: Background
    img_attributes:
      type: attributes
      label: Image attributes.
      description: The attributes as passed from parent.
    img_class:
      label: Foreground image class
      description: Classes applied to the image.
      type: textfield
      preview: w-100
      default_value: w-100
    fig_class:
      label: Foreground figure class
      description: Classes applied to the figure.
      type: textfield
    background_class:
      label: Background style
      description: Classes applied to background image container.
      type: textfield
      preview: w-100 p-5
      default_value: w-100 p-5
    bg_size:
      label: Type
      type: select
      options:
        bg-none: None
        bg-cover: Cover
        bg-contain: Contain
      preview: bg-contain
      default_value: bg-contain

