Nicely formatted tables in info-fields (maybe feature request?)

I need to display a lot of pixel values in a custom block that allows users to upload different images for different viewport sizes and layout contexts. To display them more orderly, I decided to use tables inside an info-field:

I was really happy to see that I can add a Markdown formatted table to the info-field in a blueprint! And I’d love to see these tables formatted more nicely in the Panel. Here is the YAML for the table above:

  type: info
    de: Größentabelle
    en: Size guide
    de: |
      | Anzeigegröße | `@2x` | `@1x` |
      | ---: | :--- | :--- |
      | Volle Breite: | `3264px` | `1632px` |
      | Übergroß: | `2176px` | `1088px` |
      | Hauptteil: | `1632px` | `816px` |
      | Zwei Drittel: | `1088px` | `544px` |
      | Herausragendes Drittel: | `816px` | `408px` |
      | Spalte: | `816px` | `408px` |
      | Ein Drittel: | `544px` | `272px` |
    en: |
      | Layout Size | `@2x` | `@1x` |
      | ---: | :--- | :--- |
      | Full width: | `3264px` | `1632px` |
      | Oversized: | `2176px` | `1088px` |
      | Main content: | `1632px` | `816px` |
      | Two Thirds: | `1088px` | `544px` |
      | Oversized third: | `816px` | `408px` |
      | Column: | `816px` | `408px` |
      | One third: | `544px` | `272px` |

I’m not sure if there is anything I can do about this, short of writing a plugin to inject some custom CSS into the Panel or kind of hacking my CSS into the markdown in the info field. Is there a way to make this table look better, or is this feature request to support tabled in info-fields?

You can use custom panel css: panel | Kirby CMS

Then use .k-info-field table etc. as selector to address tables inside an info field.

1 Like

… or you create a structure field, fill it with content and then disable it to protect it from changes.

In your blueprint:
(I have not taken the translation of the fields into account in my example.)

    type: structure
    label: Size Guide
            width: 2/4
            width: 1/4
            after: "px"
            width: 1/4
            after: "px"
            label: Layout size
            type: text
            label: @2x
            type: text
            width: 1/2
            label: @1x
            type: text
            width: 1/2
    disabled: true

In your .txt file:


  description: Full width
  size2x: "3264"
  size1x: "1632"
  description: Oversized
  size2x: "2176"
  size1x: "1088"
  description: Main content
  size2x: "1632"
  size1x: "816"
  description: Two Thirds
  size2x: "1088"
  size1x: "544"
  description: Oversized third
  size2x: "816"
  size1x: "408"
  description: Column
  size2x: "816"
  size1x: "408"
  description: One third
  size2x: "544"
  size1x: "272"

@GB_DESIGN How would this work within a custom block?

It is also possible to integrate a structure field into a custom block.
Or have I not understood the requirement correctly?
I have just integrated it into my table block:

Or do you mean the problem that the values are not stored centrally, like in an info field that is swapped out as a snippet?

Then of course it makes sense to make the info field prettier with CSS :+1:

Exactly, the content of that field needs to be stored somewhere to work as info for every block of that type. So I think the info field is the better (and probably only feasible) option, and it stands out as information, rather than content that is disabled.

1 Like

Of course I agree with you in this context. :ok_hand:

Thanks all :blush: adding custom CSS like explained by @texnixe worked well. Its not a work of art, but more easily legible