name: field.blocks.image.name
icon: image
preview: image
fields:
  location:
    label: field.blocks.image.location
    type: radio
    columns: 2
    default: "kirby"
    help: Hochgeladene Bilder aus dieser Website oder externe Bilder per URL
    options:
      kirby: "{{ t('field.blocks.image.location.internal') }}"
      web: "{{ t('field.blocks.image.location.external') }}"
  image:
    type: files
    multiple: false
    width: 1/1
    query: page.getmixedimages
    uploads:
      template: image
    label: field.blocks.image.name
    when:
      location: kirby
  src:
    label: field.blocks.image.url
    type: url
    when:
      location: web

  # alt and caption
  linetexts:
    type: line
  alt:
    label: field.blocks.image.alt
    type: text
    icon: title
    help: Überschreibt an dieser Stelle den eigentlichen Alt-Text, der in einem Bild definiert ist
  caption:
    label: field.blocks.image.caption
    type: writer
    marks:
      - bold
      - italic
      - underline
      - strike
      - clear
    icon: text
    inline: true
    help: Bildbeschriftung unterhalb des Bildes, falls notwendig

  # link
  linelink:
    type: line
  linkactive:
    label: Verlinkung aktivieren
    type: toggle
  link:
    label: Link
    type: link
    icon: text
    width: 2/3
    help: Optional
    when:
      linkactive: true
  link_desc:
    label: Link Beschreibung
    type: text
    icon: text
    width: 2/3
    help: Optional für a11y
    when:
      linkactive: true
  target_blank:
    label: Link im neuen Fenster öffnen
    type: toggle
    width: 1/3
    whenQuery: link
    help: Optional
    when:
      linkactive: true

  

  # styling
  linestyling:
    type: line
  cssclass:
    type: text
    label: CSS Klassen

  ratio:
    label: field.blocks.image.ratio
    type: select
    placeholder: Auto
    width: 1/2
    help: Beschränkt den Anzeigebereich des Bildes, z.B. in einem Format 16zu9. Das Bild kann dann entweder in diesem Bereich kleiner dargestellt werden, damit es rein passt, oder mit Hilfe des "Beschneiden"-Schalters abgeschnitten werden
    options:
      1/1: "1:1"
      16/9: "16:9"
      10/8: "10:8"
      21/9: "21:9"
      7/5: "7:5"
      4/3: "4:3"
      5/3: "5:3"
      3/2: "3:2"
      3/1: "3:1"
  crop:
    label: field.blocks.image.crop
    type: toggle
    width: 1/2
    help: Schneidet ein Bild mit einem vorgegebenen Seitenverhältnis
