Caption repeating on every image

Kirby 2 Solved ✅
1

I’m encountering some weird behaviour with image captions. That is, the caption of the first image gets repeated on every image on the page.

here’s part of my snippet:

<section class="publication">
	<article class="post">
		<? if($page->template() == 'publication'): ?>
			<img class="thumbnail" src="<?= $page->coverimage()->toFile()->url() ?>" alt="<? echo $page->coverimage()->toFile()->caption() ?>">
		<? endif ?>
		<header>
			<h1 class="publication-title"><?= $page->title() ?></h1>
			<?php if($page->subtitle()->isNotEmpty()): ?>
				<h4 class="publication-subtitle"><?= $page->subtitle() ?></h4>
			<?php endif ?>
			<? if($page->template() == 'publication'): ?>
			<p class="metadata">
				<span class="date">
					<time>
						<span class="day"><?= $page->date('j') ?></span>
						<span class="month"><?= $page->date('F') ?></span>
						<span class="year"><?= $page->date('Y') ?></span>
					</time>
				</span> &#124; <a title="All publications by" href="<? echo $site->url() ?>/search?q=<?= $page->author() ?>"><span class="author"><?= $page->author() ?></span></a>
				<span class="category"> &#124; <?= $page->category() ?></span>
			</p>
			<? endif ?>
		</header>
		<?= $page->text()->kirbytext() ?>
		<span class="footer"><?= $page->footer()->kirbytext() ?></span>
		<? if($page->category() == 'network'): ?>
			<p class="author-more"><a title="All publications by <?= $page->author() ?>" href="<? echo $site->url() ?>/search?q=<?= $page->author() ?>">All publications by <?= $page->author() ?></a></p>
		<? endif ?>
		<? if($page->template() == 'publication' and $page->category() != 'network'): ?>
			<?php snippet('share') ?>
		<? endif ?>
	</article>
</section>

Any images added in the main 'text' field, (with or without captions) will have the the caption of the first image in the snippet.

Here’s the html output that kirby gives for the snippet above:

<section class="publication">
	<article class="post post-delay" style="opacity: 1;">
					<figure><img class="thumbnail" src=".../breda-photo.png" alt="this is a test caption"><figcaption>this is a test caption</figcaption></figure>
  ..... (output omitted for readability)....
<figure><img src="..." alt=""><figcaption>this is a test caption</figcaption><figcaption>this goes with the grey image</figcaption></figure>

I can’t figure out (based on the code for the snippet above) why kirby is adding the caption of the first image, to the output of kirbytext() later in the snippet as well…

Any thoughts?

2

What is in the text field?

3

quite a bit of markdown, i’ve included the relevant line:

(image: grey-landscape.png caption: this goes with the grey image)

4

Interesting. Do you use any javascript on the page?

5

Wow. :heart_eyes:

Turned out that the previous developer (I inherited this project), wasn’t able to to get captions to work properly. I opened the main JS file, guess what was on top?

// Image captions $('#content .content-wrapper .publication .post .thumbnail').each(function(){ alt = $(this).attr('alt'); $(this).wrap('<figure>'); $('figure img').after('<figcaption>' + alt + '</figcaption>'); });

Wonderful, I was at a point where I was seriously doubting Kirby. This restores my faith somewhat :slight_smile:

6

I hope it does (and some more characters).