Prevent fig caption from taking up space

Kirby 2 Solved ✅
1

Hi, I’m a bit puzzled. I would like all the images on this page template to stick together, but even if there is no captions on specific images, there is still a <figcaption> in the HTML. I tried adding
display: none
but it won’t work, as I’m using a figcation on the last image of the page.

2

Hi, which page template are you talking about ?

3

If you don’t want to use figure but plain imgs, you can disable this feature with the kirbytext.image.figure option.

1 Like
4

@Thiousi Indeed, the actual page would sure help! Here it is!

@lukasbestle Actually I quite like the figure option, and I’m actually using them quite a lot. It’s just the figure caption that are bothering me. It is great that it exist when there is a .txt caption file associated with the image, but I don’t understand why the HTML exist when there is none… :confused:

What I’m hopping to do is remove all the white space between the images, as seen here.

5

How do you add the images, via Kirbytag? If so, you could adapt the Kirbytag to only render the figcaption, if there is a caption.

6

@JolinM
Two options I think:

  1. Don’t display a figcaption if it’s empty
  2. Don’t use the last figcaption

Going towards 2: can I ask why you’re using the last figcaption to provide contest for what seems like all the images above?

By the way: I like your website a lot :slight_smile:

Cheers

7

With caption, as seen here.

8

That’s not what I meant. How are the images added to the page? Via Kirbytext?

9

[quote=“Thiousi, post:6, topic:4739”]

  1. Don’t display a figcaption if it’s empty[/quote]
    How would I prevent the display of empty captioned?

[quote=“Thiousi, post:6, topic:4739”]
2. Don’t use the last figcaption[/quote]
I like using the last fig caption, as it is the place where I credit the photographers for the projects.

Thanks (a lot :slight_smile:)

10

That depends on how you add the images to your page.

11

Yes, via Kirbytext. Here are the exact text in the .txt.

Title: Foire Papier16
----
Caption: Photograph of the posters by (link:http://www.wedge.work text:Wedge popup:yes)
Photographs of the Patrick Mikhail Gallery sign by (link:http://www.carolinedostie.me text:Caroline Dostie popup:yes)
Additional photographs by (link:http://seminarophoto.com text:Jean-Michael Seminaro popup:yes)
----
12

I’m sorry, I’m not asking about the captions but the images themselves …

13

And we just found a winner! It indeed comes from my code. Here is what lives inside the <figure> tag:

<img src="<?php echo $image->url() ?>" alt="<?php echo $image->alt() ?>" class="scale-with-grid">
<?php if($image->caption()): ?>
  <figcaption class="caption"><?php echo kirbytext($image->caption()) ?></figcaption>
<?php endif ?>

But how come it displays the caption even with the php if?

14

Try this:

<img src="<?php echo $image->url() ?>" alt="<?php echo $image->alt() ?>" class="scale-with-grid">
<?php if($image->caption()->isNotEmpty()): ?>
  <figcaption class="caption"><?php echo kirbytext($image->caption()) ?></figcaption>
<?php endif ?>
```
15

Something seams to happen, but not what I expected, no images load after the poster image. :smiley:
Here is the result.

16

Looks like a php error. Have you turned on debugging? What do the error logs say?

17

Maybe we need something like:

<?php if($image->caption()->bool() && $image->caption()->isNotEmpty()): ?>
  <figcaption class="caption"><?php echo kirbytext($image->caption()) ?></figcaption>
<?php endif ?>
```
18

Oups, my bad!

Actually, the first $image->caption()->isNotEmpty worked! I just commented badly the existing code!
So you had it on the first try with

<img src="<?php echo $image->url() ?>" alt="<?php echo $image->alt() ?>" class="scale-with-grid">
<?php if($image->caption()->isNotEmpty()): ?>
  <figcaption class="caption"><?php echo kirbytext($image->caption()) ?></figcaption>
<?php endif ?>

Look at that beauty! :smiley:

Thanks a lot @texnixe & @Thiousi & @lukasbestle for the help!

2 Likes