How can I create a navigation bar with all tags?

[PetersOtto]

Hello,
I want to create a navigation bar with all tags of the blog, on the blog-start.html.

Probably the easiest way is to generate a "navigation area" with
<?php echo $this->yellow->page->getPage("tags")->getContent() ?>
and then use
[blogtags /blog/].

However, then I can not work with isActive.

Does anyone have an idea how I get the tags of the bog on the blog-start.html ?

Thanks!

[PetersOtto]

This is my idea so far. It's not finished yet but with this I can create a "Tag Navbar".

<?php foreach ($this->yellow->page->getPages("blog") as $page): ?>
    <?php if ($page->isExisting("tag")): ?>
        <?php foreach (preg_split("/\s*,\s*/", $page->get("tag")) as $tag) { $tags[] = $this->yellow->lookup->normaliseArguments($tag, false); } ?>
    <?php endif ?>
<?php endforeach ?>
<ul>
    <?php $tags = array_unique($tags); foreach ($tags as $tag): ?> 
        <li><?php echo $tag; ?></li>
    <?php endforeach ?>
</ul>

Is this the right way or will you cry when you see this?

[markseuffert]

I checked the API documentation, looks like there's no example you can simply copy/paste. See also #444.

[markseuffert]

We love people who code, but there are alternatives that do not require programming knowledge. If you are familiar with HTML and CSS you can hardcode a custom navigation, edit the file system/layouts/navigation.html. Or if you prefer Markdown, you can create the file content/shared/header.md. Here's an example:

---
Title: Header
Status: shared
---
! {.navigation}
! * [All](/blog/) 
! * [Architecture](/blog/tag:architecture/)
! * [Design](/blog/tag:design/)
! * [Example](/blog/tag:example/)

Screenshot for the curious. Tested with Datenstrom Yellow 0.8.21.

[markseuffert]

The method pages->group() is available in the Yellow API now.

Group a page collection by page setting:

pages->group("tag") = group content by tag with ascending name, A-Z
pages->group("tag", false) = group content by tag with descending name, Z-A
pages->group("tag", false, "count") = group content by tag with descending count, highest first

Here's an example layout file system/layouts/navigation.html for a custom navigation with tags:

<?php $pages = $this->yellow->content->top() ?>
<?php $this->yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation" role="navigation" aria-label="<?php echo $this->yellow->language->getTextHtml("coreNavigation") ?>">
<ul>
<?php foreach ($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\" aria-current=\"page\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
</ul>
</div>
<div class="navigation-banner"></div>

<?php if ($this->yellow->page->get("layout")=="blog-start" || $this->yellow->page->get("layout")=="blog"): ?>
<?php $locationStart = $this->yellow->page->getBase(true)."/blog/" ?>
<?php $pages = $this->yellow->content->index()->filter("layout", "blog")->sort("published", false) ?>
<?php $this->yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation navigation-tags" role="navigation" aria-label="Tag">
<ul>
<li><a href="<?php echo $locationStart ?>"><?php echo htmlspecialchars("All") ?></a></li>
<?php foreach ($pages->group("tag") as $tag=>$collection): ?>
<?php $locationTag = $locationStart.$this->yellow->lookup->normaliseArguments("tag:$tag") ?>
<li><a href="<?php echo $locationTag ?>"><?php echo htmlspecialchars($tag) ?></a></li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>

Here's an example CSS, additional adjustments may be required for your theme:

.navigation-tags {
    padding-top: 1em;
    float: none;
}

If this looks good to you, please try the latest core extension.

[PetersOtto]

Hello Mark
Thanks for the new API function (pages->group()) and the code for a tag navigation!

I tested the code and found out that class="active" aria-current="page" will not set on the current page.
Please have a look here: #842 (reply in thread)
Do you have any idea how this could be done as best?

And on this position I found a small mistake. I think the backslashes are too much here:
<div class="navigation navigation-tags" role=\"navigation\" aria-label=\"Tag\">

[markseuffert]

I don't know how much work this would be for a developer. Tags work differently than regular pages. They are implemented as a filter. Each location is a start location plus a location argument. You probably have to create pages with locations like this: $page->location = $locationStart.$this->yellow->lookup->normaliseArguments("tag:$tag") and then set $page->active to true or false according to the location arguments in the current HTTP request.

Thanks for finding the typo, I updated my example above.

[PetersOtto]

I have updated my little tagnavi extension, inspired by your code.
class="active" aria-current="page" will be set.

https://github.com/PetersOtto/yellow-tagnavi/

[PetersOtto]

I have found a solution based on the blog extension. My findings can be seen here:

https://github.com/PetersOtto/yellow-tagnavi

After I fixed a few bugs, it now works quite well for my current project.
It's not perfectly worked out but maybe it will help someone with the same problem.

[IngoBelka]

This is my solution:

1. in blog-start.html I put a codeblock

<?php if ($this->yellow->page->isAvailable("tagcloud")): ?>
<div class="blog_tags">
<?php echo $this->yellow->page->getPage("tagcloud")->getContent() ?>
</div>
<?php endif ?>

2. in /content/shared I put a file tagcloud.md with this content:

---
Title: tagcloud
Status: shared
---
<details>
<summary>Schlagworte (Tags)</summary>
[blogtags /blog/]
</details>

3. the look is customized in CSS

I don't need any other extension because it is quite easy this way. I thougt I do share this with you. What do you think about this?

[markseuffert]

Do you mean you want the generated HTML code with class="active" aria-current="page"?

[PetersOtto]

Yes. Like the following:

html

<div class="tagnavi">
<ul>
<li><a class="active" aria-current="page" href="/yellowTestcenter/03themetest/blog/">All Projects</a></li>
<li><a href="/yellowTestcenter/03themetest/blog/tag:example/">Example</a></li>
</ul>
</div>

css

.tagnavi ul {
  padding-left: 0;
}
.tagnavi li {
  display: inline-block;
  padding-right: 1rem;
}
.tagnavi a {
  text-decoration: none;
}
.tagnavi a:hover {
  text-decoration: underline;
}
.tagnavi a.active {
  text-decoration: underline;
}

[markseuffert]

No, this is not possible with this (little) shortcut.

As you rightly pointed out, shortcuts don't check what's the active location. If I put myself in your position, I would make a custom navigation or experiment with existing layouts. It's worth learning how to make layouts, sooner or later. What's probably missing are more layout examples and more custom navigations that are ready-to-use. See also #462.

[IngoBelka]

Hello Ingo, I also use this method when I need a tag-cloud. But with this method, it is not possible to highlight the tag of the current page. Or am I making a mistake in thinking?

Because my "tagcloud" is collapsed initially one can't see the tag links. But on a tag filtered blog page, there you have a headline showing the current tag, so - I think - it's clear where you are. It's a kind of workaround to mark the currently activated page.

[PetersOtto]

There are many ways to design the page navigation. Unfortunately, your solution does not fit to my theme.
As mentioned in a post above I have found a solution for my problem.

Thank you all for the support!