Panel: text block with 2 fields of texts

Hi!
I try to add another field in the text block and I struggle a little bit.
I have this blocks yml:

  - width: 1/2
      type: fields
      fields:
        notes:
          type: blocks
          fieldsets:
                - text
                - image

I want that the client will be able to add a caption either for an image and for the text as well.
so actually I need a text block with two text fields.
So I changed the text.yml to this:

name: field.blocks.text.name
icon: text
wysiwyg: true
preview: text
fields:
  text:
    type: writer
    nodes: false
    placeholder: field.blocks.text.placeholder
  caption:
    type: writer
    nodes: false

now if I click on the text block to add text I get only 1 field:

But if I click on the ‘edit’ button I can see the two fields:

How can I get the two fields block in the first click?

thanks a lot!

You would have to create a new preview if you want the second field to show up there as well.

thanks!
Eventually this article had exactly what I needed. I created a new plugin for a custom footnote block and it works perfectly.

I have another question related to this subject:
I wish to add a custom id field for the image fieldset in the blocks.
I changed the image yml file and added a new field for that.

Now I want the custom id to be shown next to the image in the panel. Since I use the image block in several pages - I want this custom id to be shown only in a specific page in the panel…
So my question is this:
should I create a new custom field for that with a new plugin?
or can I change the preview of the image block only in a specific page?

I’m a bit confused… this is my yml:

  - width: 1/2
      type: fields
      fields:
        notes:
          type: blocks
          fieldsets:
            text:
              label: foot note
              type: group
              fieldsets:
                footnote:
                  name: Foot note
                  fields: 
                    text: 
                      type: text
                    customid:
                      label: number of foot no
                      type: text
            media:
              label: painting
              type: group
              fieldsets:
                - image

I hope it is understood. I would appreciate any help,
Thanks!

I think it’s probably better if you create a custom block. Otherwise you’d need a way to check if you are on a given page (via the URL for example), and then show the id conditionally.

Ok - Ill do that

Thanks for the help!

I have an issue with creating a new image custom block:
I try to create a plugin for it (index.js, index.css, index.php) and since I use ‘type: files’ in my yml file, I’m not quite how should I call it in the index.js to get the preview of the image. This is my poor try:

panel.plugin("shish/footimg-block", {
    blocks: {
      footimg: `
        <img @click="open" src='{{ content.img }}' >
      `
    }
  });

this is my yml:

            media:
              label: painting
              type: group
              fieldsets:
                footimg:
                  name: image
                  fields: 
                    img:
                      type: files
                    caption:
                      type: text
                    id:
                      type: text

and it’s not working:

Any idea how to preview image file in the preview?

Thanks so much!

When I type inside the index.js the {{ content.img }} outside the img tag it gives me all the image details:

[
    {
      "content": {
        "img": [ 
          {
            "id": "texts/new-text/02_francisco_de_goya-_saturno_devorando_a_su_hijo_-1819-1823-1.jpg",
            "image": {
              "back": "pattern",
              "color": "orange-400",
              "cover": false,
              "icon": "file-image",
              "ratio": "3/2",
              "url": "http://localhost:8000/media/pages/texts/new-text/c3cf25f2a6-1656838038/02_francisco_de_goya-_saturno_devorando_a_su_hijo_-1819-1823-1.jpg",
              "src": "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw",
              "srcset": "http://localhost:8000/media/pages/texts/new-text/c3cf25f2a6-1656838038/02-francisco-de-goya-saturno-devorando-a-su-hijo-1819-1823-1-38x.jpg 38w, http://localhost:8000/media/pages/texts/new-text/c3cf25f2a6-1656838038/02-francisco-de-goya-saturno-devorando-a-su-hijo-1819-1823-1-76x.jpg 76w"
            },
            "info": "",
            "link": "/pages/texts+new-text/files/02_francisco_de_goya-_saturno_devorando_a_su_hijo_-1819-1823-1.jpg",
            "sortable": true,
            "text": "02_francisco_de_goya-_saturno_devorando_a_su_hijo_-1819-1823-1.jpg",
            "filename": "02_francisco_de_goya-_saturno_devorando_a_su_hijo_-1819-1823-1.jpg",
            "dragText": "(image: 02_francisco_de_goya-_saturno_devorando_a_su_hijo_-1819-1823-1.jpg)",
            "type": "image",
            "url": "http://localhost:8000/media/pages/texts/new-text/c3cf25f2a6-1656838038/02_francisco_de_goya-_saturno_devorando_a_su_hijo_-1819-1823-1.jpg",
            "uuid": "02_francisco_de_goya-_saturno_devorando_a_su_hijo_-1819-1823-1.jpg"
          }
        ],
        "caption": "sdf",
        "id": "19"
      },
      "id": "0d220d09-7318-4193-876f-d6fce754cd23",
      "isHidden": false,
      "type": "footimg"
    }
  ]

But for some reason, no matter how I try - I can’t fetch it, for example:

<img src='{{ content.img.link }}'>

I feel that I’m very close to figure it out - please help :pray:

I found it, this is the correct syntax in the index.js:

<img :src='content.img[0].url' >

(hope someone will find it helpful)