Empty anchor links show up before tags in post snippet

Kirby 3 Solved ✅
1

Hello, I am trying to get the tags of any post to show up on any listing page but these empty anchor links show up at the start?

I am working off renamed starterkit files. (Notes → Posts)

Post Snippet

<?php if (!empty($post->tags())): ?>
<ul class="listing-tags tags">
  <?php foreach ($post->tags()->split(',') as $tag): ?>
  <li>
    <a href="<?= $post->parent()->url(['params' => ['tag' => urlencode($tag)]]) ?>"><?= html($tag) ?></a>
  </li>
  <?php endforeach ?>
</ul>
<?php endif ?>

Screen Shot 2021-04-18 at 8.07.41 pm
Screen Shot 2021-04-18 at 8.07.41 pm750×644 32.8 KB

Any ideas? When I just log out the $post->tags() array, the links do not show. Thank you : )

2

From the screenshot I can’t really see the output, but your if condition has the same problem as in your last post, if you want to check if the tags field is empty or not, please use the field methods isEmpty()/isNotEmpty():

<?php if ($post->tags()->isNotEmpty()): ?>
<ul class="listing-tags tags">
  <?php foreach ($post->tags()->split(',') as $tag): ?>
  <li>
    <a href="<?= $post->parent()->url(['params' => ['tag' => urlencode($tag)]]) ?>"><?= html($tag) ?></a>
  </li>
  <?php endforeach ?>
</ul>
<?php endif ?>
3

Thank you! I think I copied that !empty checker straight from the note detail page, I’ve updated with the isNotEmpty method instead :slight_smile:

Here’s the output html with the extra anchor tags (basically it generates 2 links to the actual post itself without any text before the tags):

<ul class="listing-tags tags"><a href="http://localhost:8000/writing/a-night-in-the-forest">
            </a><li><a href="http://localhost:8000/writing/a-night-in-the-forest">
        </a><a href="http://localhost:8000/writing/tag:forest">forest</a>
      </li>
            <li>
        <a href="http://localhost:8000/writing/tag:trees">trees</a>
      </li>
          </ul>

Tag css

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.tags li {
  margin-right: .5rem;
  margin-top: .5rem;
}
.tags a {
  padding: .5rem 1rem;
  display: block;
  background: var(--color-light);
}
4

Hm, that’s weird, where on earth does this anker tag with the post url come from? Could you please post the code that comes before this snippet?

5

Yes sure! I’ll post the wider listing as well:

snippets/post.php

<article class="note-excerpt">
  <a href="<?= $post->url() ?>">
    <header>
      <figure class="img" style="--w: 16; --h:9">
        <?php if ($cover = $post->cover()): ?>
        <?= $cover->crop(320, 180) ?>
        <?php endif ?>
      </figure>

      <h2 class="h2 listing-title"><?= $post->title() ?></h2>
      <?php if ($post->date()->isNotEmpty()): ?>
        <time class="h3 color-grey" datetime="<?= $post->date()->toDate('c') ?>"><?= $post->date()->toDate('d.m.Y')  ?></time>
      <?php endif ?>
    </header>

    <?php if (($excerpt ?? true) !== false): ?>
    <div class="color-grey">
      <?= $post->text()->toBlocks()->excerpt(100) ?>
    </div>
    <?php endif ?>

    <?php if ($post->tags()->isNotEmpty()): ?>
    <ul class="listing-tags tags">
      <?php foreach ($post->tags()->split(',') as $tag): ?>
      <li>
        <a href="<?= $post->parent()->url(['params' => ['tag' => urlencode($tag)]]) ?>"><?= html($tag) ?></a>
      </li>
      <?php endforeach ?>
    </ul>
    <?php endif ?>


  </a>
</article>

templates/writing.php

<?php snippet('header') ?>

<?php if (empty($tag) === false): ?>
<header class="h1">
  <h1>
    <small>Tag:</small> <?= html($tag) ?>
    <a href="<?= $page->url() ?>">&times;</a>
  </h1>
</header>
<?php else: ?>
  <?php snippet('intro') ?>
<?php endif ?>



<?php

// fetch all tags for tag cloud filtering
$tags = $page->children()->listed()->pluck('tags', ',', true);

?>
<ul class="tags">
  <?php foreach($tags as $tag): ?>
  <li>
    <a href="<?= url('writing', ['params' => ['tag' => $tag]]) ?>">
      <?= html($tag) ?>
    </a>
  </li>
  <?php endforeach ?>
</ul>


<ul class="grid">
  <?php foreach ($posts as $post): ?>
  <li class="column" style="--columns: 4">
      <?php snippet('post', ['post' => $post]) ?>
  </li>
  <?php endforeach ?>
</ul>

<?php snippet('pagination', ['pagination' => $posts->pagination()]) ?>
<?php snippet('footer') ?>

controllers/writing.php

<?php
return function ($page) {

    $tag   = urldecode(param('tag'));
    $posts = collection('posts');

    if (empty($tag) === false) {
        $posts = $posts->filterBy('tags', $tag, ',');
    }

    return [
        'tag'   => $tag,
        'posts' => $posts->paginate(9)
    ];

};
6

Ah, it’s what I thought. In the post.php snippet, you wrap the tag anker links inside the outer anker tag that wraps the whole article. That’s not valid HTML and causes the issue.

7

Ahhh of course! I ended the anchor tag before the tags and it’s all working fine now.

Thank you for your expertise, efficiency and knowledge always!! :,)

1 Like