Basic markdown commands for caption text size

The CMS Questions
1

Hi I’m trying to figure out how to make text sizes smaller in Kirby, in particular captions under images. Is there a piece of text that I can put next to the text in the project page to do this?

Here’s a sample page of mine:
http://jamesthomaswilentz.com/projects/lorenzo-lotto

For example, I would like to make: Palma Vecchio, Venus and Cupid, 1523-24 smaller

2

I would use a file field for this.

https://getkirby.com/docs/panel/blueprints/file-settings#file-fields
https://getkirby.com/docs/content/media/#adding-meta-data-to-your-files

3

How is the image added? Within a textarea field using the image tag? If so, you can add the caption directly within the image tag and style the figcaption via CSS.

(image: some-image.jpg caption: My caption)
4

Hi Texnixe, I used this tag before: (image: some-image.jpg caption: My caption) the problem is the text size does not get smaller. Is there a way to make it smaller? Can you show me what code I would need to input and where?

Thanks so much,

James

5

Hi Flokosoil,

I am a newbie, can you walk me through step by step exactly how to use file fields and what code to change so as to change the caption text size? Thanks so much for your help, I really appreciate it.

James

6

Regarding the file fields, is it possible to add and also alter caption size? Right now I am able to add captions with the (image:XXXXcaption:xxx) feature,the thing i need to be able to do is alter the size of the captions.

Thanks,

James

7

Hint:
I would add some styling in the CSS-file of that webpage. Look e.g. at /assets/css/index.css or something simular.

Good luck!

8

The size of the caption is independent of how it is added to the page. It is not done in your template or text file, but in your CSS stylesheet.

If you add images via the image tag in a textarea field, you don’t need file meta fields, they would not help.

File meta fields are useful if you pull in the images in your templates. See also here: https://getkirby.com/docs/cookbook/handling-images-in-kirby#adding-meta-data-to-images

For some reason, your captions are not added within the figure tag, but as a standard p tag. Problem is, if you set the font-size for the p tag smaller, all of your text within p tags will get smaller… The caption should therefore ideally be added as a figcaption, which you could style in your CSS.

9

Hi HeinerEF, I found the css file, do you know what the styling command for the caption would be?

Something like:
caption {
font-weight: bold;
font-size: 1.1em;
)

10

Hi Texnixe, within the .css style sheet, what is the type of code I would want to write to change the caption size? For example something like this do the trick?

caption {
background: #dbb768;
font-weight: bold;
font-size: 1.1em;
margin-left: -1px;
}

I tried using this in the .css sheet, but nothing is changing :?

James

11

I asked the question above, I ask again: how do you add captions to your images? I can’t tell you what to add in your stylesheet if I don’t know that. What I see in your website is a standard p tag, where does it come from?

12

Hi texnixe, apologies for the delay…

I embed this command directly into the project page, with references to images that I have uploaded directly into the cpanel:

(image: sampleimage.jpg caption: Sample Image)

Thanks for your helping in figuring out what to change in the .css!

13

But then I wonder why your caption appears as a p tag below the image, not as a figcaption?

If I add an image using an image kirbytag with caption, I get this:

<figure>
  <img src="http://localhost/kirby/content/1-projects/1-project-a/creative-tools.jpg" alt="">
  <figcaption>somecaption</figcaption>
</figure>
14

I think it might be because I temporarily deleted the captions to test? The only thing that exists right now are the images. That’s why. Sorry for the confusion. Do you know what i should do next?

15

Once you have the captions in place, you can style them in your css, for example:

figcaption {
  font-size: 1rem;
}
16

ok is it possible to style part of the caption with italics? I don’t think i could use the tage before?

17

One way would be to use HTML in your tag:

(image: some-image.jpg caption: This is <em>italicized</em> text)

Another option: Create a custom image tag and output the caption styled with markdown using the markdown instead of the html method.

(image: some-image.jpg caption: This is *italicized* text)

Make a copy of the image tag and change this line to

$figure->append('<figcaption>' . markdown($caption) . '</figcaption>');
18

OK, I will try this tonight and get back to you.

Thanks,

James