Using Kirby’s power in entry of structure field

Kirby 2 Suggestions 💡
1

As far as I can see at the moment there’s no option to use the power of kirbytags in the entry part of a structure field. This would be a nice to have!

In my example I use a field like this

  additionalimages:
    label: More Images
    type: structure
    entry: >
        <strong>{{image}}</strong> <div style="float:right">{{columns}} columns</div>
    fields:
      image:
        label: Image
        type: filename
        required: true
      columns:
        label: Columns/Width
        type: select
        required: true
        default: 6
        options:
          3:  Tiny   (3 cols,  400px)
          4:  Small  (4 cols,  535px)
          6:  Medium (6 cols,  800px)
          8:  Large  (8 cols,  1070px)
          9:  Huge   (9 cols,  1200px)
          12: Full  (12 cols, 1600px)

to build a gallery. And it your be nice to use something like $page->files()->find('{{filename}}')->url() to add a preview image in the panel.

This is a related topic: Structure field with image.

2 Likes
2

I would love to be able to do this as well.

Image previews in the structure field would be really helpful.

3

A bit late to reply, but doing something like this works. The URI is hard-coded, so it’s not perfect, but:

  client_logos:
    label: Client Logos
    type: structure
    entry: <img src="/home/{{logo_image}}">
    fields:
      logo_image:
        label: Image
        type: selector
        mode: single
        size: 4
        options:
          - image

–>
(with a bit of custom CSS to make it into a grid)

Pasted image746×474 81.9 KB

4

@SQBiz, can you talk a bit more about how you accomplished this?

From your blueprint above, looks like you are storing the client logos in a “home” folder. I’m having trouble getting the URI to point to the right location of my photos, so I could use some more clarity on how / where you stored your client logos. Whenever I attempt to add an image via the selector, it keeps giving me an “Invalid Panel URL” error message.

Thanks for your help on this!

5

I think it looks messy to have html in the blueprint. Maybe it would be nicer to be able to call a snippet instead?

1 Like
6

That’s actually a great idea and would also solve the issue with dynamic image PHP code. I have added a feature request on GitHub.

2 Likes
7

I’m using the selector plugin for this - not kirby’s normal select.

Looks like this:

After adding images, the page content (home.txt) reads:

Client-logos: 

- 
  logo_image: benchmarklitigation-logo.jpg
- 
  logo_image: 77471huestonhennigan.jpg
- 
  logo_image: callawyer_logo.jpg
- 
  logo_image: chambers_logo.jpg
- 
  logo_image: lawdragon-logo.jpg
- 
  logo_image: superlawyers.jpg

These images are simply stored and selected in this page’s folder - a first-level page simply called ‘home’, nothing clever happening here. (this could just as easily be ‘about’ and I’d refer to the images with entry: <img src="/about/{{logo_image}}">)

Does this answer your question?

@lukasbestle @jenstornell yes a more built-in solution for this would be great. To be able to configure the panel in more dynamic ways in general would be great.

8

Maybe a silly question, but I can’t find anything in the docs.
How do you achieve a preview of more than one entries in a row?

I mean, there’s 4 logos in your preview – in my structure fields I can just show one in a row.

9

You can define a custom panel stylesheet to achieve that. In you config.php add something like:

c::set('panel.stylesheet', 'assets/css/custom-panel.css');

And then in your css:

.structure-entry {
  width: 25%;
  float: left;
}
11

Thank you! I thought there was a blueprint option.
Changing the css affects all structure fields, so I think I
have to use classes in the panel

12

Well, if you have only one structure field per blueprint, you can limit your css to the blueprint class of the form, each form has a class like this:

form-blueprint-projects

where the last bit is the name of the blueprint