Apply image class via panel

Hi there,

I’ve been fairly new to Kirby and still strugling to redesign a site originally done in kirby2. Which essentially means, I’m doing it from scratch :slight_smile:

I’m aware that I can add a css class to an image by adding the class by hand like this
(image: ueber-uns_5.jpg class: right-float)
But since I’m not the person who should be doing the content of the page, I’d like to implement the application of css class to an image via the panel (drop down menu or something). Is there such a possibility or a straightforward solution to this? Any ideas?

Many thanks
Hagen

I really depends how you add images.

If images are added via the image Kirbytag and they should always have the same class applied, you can make a copy of the tag and add a given class name.

If you want users to be able to add a class to an image added via the Kirbytag, the only place that makes sense would in fact be in the tag like in your code example above.

For images that are added via a files field, classes could be assigned to images via the meta tags.

Also, if you use the Editor plugin, classes can be assigned to images directly in the editor via a modal.

I’m using the Kirby-Builder plugin with the markdown editor and a files gallery as the image source. So I do have a files field in my blueprint, but I can’t apply metatags, how can I add those?

This is one example blueprint

title: partner

columns:
  - width: 3/4
    fields:
      mybuilder:
        label: Page Builder
        type: builder
        columns: 1 # Optional. If set to 2 or more, the builder blocks will be placed in a grid.
        # max: 10 # Optional. Limits the number of builder blocks that can be added.
        fieldsets:
          markdown-editor:
            name: Markdown
            tabs: # Optional. Tabs can be used to group the fields of a field set. In this example, we use one tab to contain the content related fields and one for styling settings. It makes no difference for the content handling in the template if there are tabs or not.
              content:
                label: Markdown Editor
                icon: edit # Optional. This icon appears next to the tab. The icon name can be chosen from the Kirby's icon set getkirby.com/docs/reference/ui/icon
                fields:
                  editor:
                    label: My markdown editor
                    type: markdown
                    buttons:
                      - headlines
                          - h1
                          - h2
                          - h3
                          - h4
                          - h5
                          - h6
                      - bold
                      - italic
                      - ul
                      - ol
                      - link
                      - email
                      - blockquote
                      - horizontal-rule
                      - strikethrough
                      - pagelink
                      - image
                      - file
              style:
                label: Style
                icon: cog
                fields:
                  fontfamily:
                    label: Font
                    type: select
                    options:
                      helvetica: Helvetica
                      comicsans: Comic Sans
                  fontsize:
                    label: Font Size
                    type: number
          pure-headline:
            label: Alleinstehende Überschrift
            fields:
              header:
                label: Überschrift (wird nur angezeigt wenn nicht leer)
                type: text
                
  - width: 1/4
    sections:
      gallery:
        type: files
        uploads:
          template: files-upload

The css class should be different for different images in the same editor section (float left and right alternating for instance).

Thanks for taking the time.
Hagen

If the images you upload in the gallery section are the ones the editors are supposed to use, you can add these fields to the files-upload blueprint.

See file blueprints: https://getkirby.com/docs/reference/panel/blueprints/file

But I don’t know if this would really work well.

Since you use the builder, why don’t you add building blocks for images (or image/textt combinations) instead of letting users add images via the markdown field?

ok many thanks for these suggestions, I think this gives me enough homework. I’ll look into this and see how it works out.
If I use building blocks it would probably mean that I have to split up longer texts with several images into smaller chuncks and concatenate those with snippets, not sure whether thats gonna be super practical, but I’ll try it out.

Best
Hagen