How to add tags and a tagcloud to the starterkit (absolute beginner)

henry · January 14, 2018, 6:26pm

Hello, I want to create my blog based on the Starterkit. I tried to put tags to my content and a tagcloud by using the Cookbook-article “Filtering content with tags”, but I failed.

What i tried is I copied the code from the Cookbook into the blog controller and the other code into the template blog.php. After doing so I had tags but the text in the blog lost his structure. It is shown from one edge of the screen to the other. Is it understandable what I mean?

What I want is first adding tags and a tagcloud to the Starterkit an then adapt the starterkit to my own needs. Would it be possible to tell me step by step what code I have to put in which file of the starterkit to get tags/tagcloud without loosing the structure of the site?

texnixe · January 14, 2018, 7:01pm

Could you please post your template (including the bits that you added)?

henry · January 14, 2018, 7:56pm

This is the template without the bits (from the toolkit), that I use now:

<?php snippet('header') ?>

  <main class="main" role="main">

    <header class="wrap">
      <h1><?= $page->title()->html() ?></h1>

      <?php
      // This page uses a separate controller to set variables, which can be used
      // within this template file. This results in less logic in your templates,
      // making them more readable. Learn more about controllers at:
      // https://getkirby.com/docs/developer-guide/advanced/controllers
      if($pagination->page() == 1):
      ?>
        <div class="intro text">
          <?= $page->text()->kirbytext() ?>
        </div>
      <?php endif ?>

      <hr />
    </header>

    <section class="wrap">
      <?php if($articles->count()): ?>
        <?php foreach($articles as $article): ?>

          <article class="article index">

            <header class="article-header">
              <h2 class="article-title">
                <a href="<?= $article->url() ?>"><?= $article->title()->html() ?></a>
              </h2>

              <p class="article-date"><?= $article->date('F jS, Y') ?></p>
            </header>

            <?php snippet('coverimage', $article) ?>

            <div class="text">
              <p>
                <?= $article->text()->kirbytext()->excerpt(50, 'words') ?>
                <a href="<?= $article->url() ?>" class="article-more">read more</a>
              </p>
            </div>

          </article>

          <hr />

        <?php endforeach ?>
      <?php else: ?>
        <p>This blog does not contain any articles yet.</p>
      <?php endif ?>
    </section>

    <?php snippet('pagination') ?>

  </main>

<?php snippet('footer') ?>

Then I overwrote it with the code from the Cookbook-site:

<?php snippet('header') ?>

<h1>Blog</h1>

<!-- articles -->
<?php foreach($articles as $article): ?>
<article>
  <h1><a href="<?php echo $article->url() ?>"><?php echo $article->title()->html() ?></a></h1>
  <?php echo $article->text()->excerpt(300) ?>
</article>
<?php endforeach ?>

<!-- sidebar with tagcloud -->
<aside>
  <h1>Tags</h1>
  <ul class="tags">
    <?php foreach($tags as $tag): ?>
    <li>
      <a href="<?php echo url($page->url() . '/' . url::paramsToString(['tag' => $tag])) ?>">
        <?php echo html($tag) ?>
      </a>
    </li>
    <?php endforeach ?>
  </ul>
</aside>

<!-- pagination -->
<nav class="pagination">
  <?php if($pagination->hasPrevPage()): ?>
  <a href="<?php echo $pagination->prevPageUrl() ?>">previous posts</a>
  <?php endif ?>

  <?php if($pagination->hasNextPage()): ?>
  <a href="<?php echo $pagination->nextPageUrl() ?>">next posts</a>
  <?php endif ?>
</nav>

<?php snippet('footer') ?>

texnixe · January 14, 2018, 8:33pm

In general, that looks OK to me. But your problem stems from the fact that you have removed the section wrapper which styles the page via its wrap class. You should wrap all articles within a container div or main element, wrap the whole stuff within a container div and style the main container and sidebar so that they sit next to each other in your stylesheet (using floating divs, flexbox, or CSS grid).

<?php snippet('header') ?>

<h1>Blog</h1>
<div class="wrapper">
  <!-- articles -->
  <main>
  <?php foreach($articles as $article): ?>
  <article>
    <h1><a href="<?php echo $article->url() ?>"><?php echo $article->title()->html() ?></a></h1>
    <?php echo $article->text()->excerpt(300) ?>
  </article>
  <?php endforeach ?>
  </main>
  <!-- sidebar with tagcloud -->
  <aside>
    <h1>Tags</h1>
    <ul class="tags">
      <?php foreach($tags as $tag): ?>
      <li>
        <a href="<?php echo url($page->url() . '/' . url::paramsToString(['tag' => $tag])) ?>">
          <?php echo html($tag) ?>
        </a>
      </li>
      <?php endforeach ?>
    </ul>
  </aside>
</div>
<!-- pagination -->
<nav class="pagination">
  <?php if($pagination->hasPrevPage()): ?>
  <a href="<?php echo $pagination->prevPageUrl() ?>">previous posts</a>
  <?php endif ?>

  <?php if($pagination->hasNextPage()): ?>
  <a href="<?php echo $pagination->nextPageUrl() ?>">next posts</a>
  <?php endif ?>
</nav>

<?php snippet('footer') ?>

Or something like this.

henry · January 15, 2018, 11:50am

Thank you very much for sending the code.

Putting it into my template folder alone gives an error. Is it necessary to add something to the Blogcontroller?

This is the content of my Blogcontroller now:

return function($site, $pages, $page) {

  $perpage  = $page->perpage()->int();
  $articles = $page->children()
                   ->visible()
                   ->flip()
                   ->paginate(($perpage >= 1)? $perpage : 5);

  return [
    'articles'   => $articles,
    'pagination' => $articles->pagination()
  ];

};

texnixe · January 15, 2018, 1:08pm

You have no tags defined in your controller…

henry · January 15, 2018, 1:42pm

I know. It is the controller from the Starterkit.

I tried the controller from the cookbook but it has the same effect I described in my first mail. The text in the blog lost his structure. It is shown from one edge of the screen to the other.

Since a week I use every free minute to try to set up the blog. All the other things work and I can give them a nicer look step by step in the future. But without Tags the blog is incomplete.

Could you or someone else put the lines of code in it that seems lacking? I would be very grateful.

texnixe · January 15, 2018, 1:52pm

Here the controller with the tags added, note that in the return statement, we pass the variable to the template:

return function($site, $pages, $page) {

  $perpage  = $page->perpage()->int();
  $articles = $page->children()
                   ->visible()
                   ->flip()
                   ->paginate(($perpage >= 1)? $perpage : 5);
  
  $tags = $page->children()->visible()->pluck('tags', ',', true);

  return [
    'articles'   => $articles,
    'tags' => $tags,
    'pagination' => $articles->pagination()
  ];

};

henry · January 15, 2018, 3:50pm

Thank you for your help. I change my controller and my template as suggested. This picture shows the effect:

The text is on the left side. Before the change it was in the middle.

My goal is to get the text back in the middle of the screen. Same with the tags themselves.

texnixe · January 15, 2018, 3:58pm

That is not a Kirby problem, but a problem with your HTML markup and your CSS styles. If you are new to that as well, I suggest you look into some resources that might help you get on track.

henry · January 15, 2018, 5:14pm

I didn’t change anything else at the starterkit (HTML markup or CSS styles).

Nevertheless thank you for your effort. Obviously I overestimated my ability to customize the starterkit. After reading the Cookbook-article I thought it would be manageable to create these function with reasonable effort.

I am at my wit’s end and don’t know if I should put more time in trying to set up the blog with Kirby or better looking for a more beginner-friendly cms.

texnixe · January 15, 2018, 5:32pm

I’m very sorry, it’s not quite clear to me what you are trying to do. But if you change the HTML markup, for example, because you want a sidebar sitting next to the main element, then you have to change your CSS as well to achieve what you want. If your are not familiar with HTML and CSS, then Kirby might really be a bit too much for the beginning, unless you are willing to learn for the future.

Please understand, though, that this forum is primarily dedicated to helping users with Kirby specific question and we can’t really do HTML or CSS support.

texnixe · January 16, 2018, 8:13am

If you are looking for a ready to use solution, one of the Kirby themes might be the right thing for you. Have a look at getkirby-themes.com, it has a collection of free and paid themes for different purposes.

For example: A new and free blog theme with tags: https://github.com/S1SYPHOS/kirby-lingonberry