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
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?
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).
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.