User post filter based on tag etc

Loops & Logic
9

Thanks, @benjamin.

I could not get the matching to work using the menu name or title. There might be an issue with the output of the menu tag or I may not understand the logic well enough.

Either way, I got it working using a match between the menu item URL and the current page URL. Seems to be working fine for my simple website.

Demo here: https://cutloosecrew.com/blog/

Template and CSS below if anyone wants to try it out. :slight_smile:

Template

<!--Title-->
<div class="entry">
    <h1 class="entry-title no-margin"><Term title /></h1>
</div>
<!--Filter-->
<div class="filter">
    <ul class="filter-list">
        <Loop menu="63">
            <a href="{Field url}" target="_self" rel="noopener">
                <If check="{Url site}/{Route}/" is value="{Field url}">
                    <li class="filter-current-item">
                        <Field title />
                    </li>
                    <Else />
                    <li class="filter-item">
                        <Field title />
                    </li>
                </If>
            </a>
        </Loop>
    </ul>
</div>
<!--Posts-->
<div class="posts posts-grid-3">
    <Loop type="post" orderby="date" order="desc" category="current">
        <Template id="7321" />
    </Loop>
</div>

CSS

/* Filter */
.filter,
.filter ul,
.filter li {
    display: block;
}
@media only screen and (min-width: 768px) {
    .filter,
    .filter ul,
    .filter li {
        display: flex;
    }
}
.filter {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0 0 30px 0;
}
.filter ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.filter li {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px 3px 3px 3px;
    padding: 10px 15px;
    margin: 10px 6px;
    line-height: 1;
}
.filter li:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.filter li:active {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(2px);
}
.filter li.filter-current-item {
    background-color: rgba(0, 0, 0, 0.8);
}
.filter a {
    color: white;
}
2 Likes