Adding active class to active menu link

Kirby 3 Solved ✅
1

Hi there, to add on to this thread with another instance/question:

I am using a loop to construct the menu.
To see how it is on front end here is the link, “EXHIBITIONS” menu in the lower left.
http://sashaportis.com/cindy/starterkit-master3/

I’ve written the menu like so:

    <div class="recent">
		<h2 class="toggle-recent">EXHIBITIONS</h2>
		<div id="recent-content">
			<ul>
				<?php foreach($site->children()->listed() as $item): ?>
				<li class="menu-open">
					<a href="%3C?=%20$item-%3Eurl()%20?%3E">&mdash;&#8201;<?= html($item->
					title()) ?&gt;</a>
				</li><?php endforeach ?>
			</ul>
		</div>
	</div>

I want to, like the person who started this thread, add an active class to the page that is currently “open”. Any recommendations? Thanks!

2

I think what your are looking for is

<?php e($item->isOpen(), ' class="active"') ?>

So you can replace your code by

<?php foreach($site->children()->listed() as $item): ?>
				<li class="menu-open <?php e($item->isOpen(), 'active') ?> ">
					<a href="%3C?=%20$item-%3Eurl()%20?%3E">&mdash;&#8201;<?= html($item->
					title()) ?&gt;</a>
				</li><?php endforeach ?>

BTW, don’t hesitate to make use of the thumbs (https://getkirby.com/docs/reference/system/options/thumbs) function for your images + “lazyload” on them.

I very much appreciated the artwork of the artist. Good luck !

1 Like
3

Awesome that worked! Thanks! Will look into the lazy load.

4

Added that to the config file, but not sure what to do to actually call that into place?

5

Layload is a JS technique to make sure to load images as they appear into the viewport to reduce the loading time of your pages. On top of that, thumbs from kirby can help you to resize your images according to viewport width.

If you added this in your config file for example :

'thumbs' => [
    'srcsets' => [
       'teaser' => [
       '800w' => ['width' => 800, 'quality' => 100],
    '1024w' => ['width' => 1024, 'quality' => 100],
    '1440w' => ['width' => 1440, 'quality' => 100],
    '2048w' => ['width' => 2048, 'quality' => 100]
      ]
    ]
  ]

Then you can set these type of lines for all your images :

<img class="lazyload" data-src="<?= $cover->url() ?>" data-srcset="<?= $cover->srcset('teaser') ?>" />

calling Lazysizes for example in your JS call

I’m sure the forum is full of topics talking about these kind of needs. Also, you have some cool kirby plugins that can do the work for lazyloading your images.

6

Hi everyone, I think this is similar to my problem now.
I have an echoed menu categories, I like to put a class=“active” on the clicked category. here is my code so far:

$categories = get_categories( $args );
foreach( $categories as $category ){
echo '<li><a href="'. get_category_link( $category->term_id ) .' ">' . $category->name . '</a></li>';

}

can anyone help me and give exact solution to my problem? thank you in advance

7

@Marvin_Acosta You have landed in the wrong forum, we can help you with all your question regarding the Kirby CMS, but not with WordPress.