Dynamic solution for container with toggle effect

Helge · February 17, 2017, 8:47am

Hi guys,

i’m facing a problem how to be able to get an effect like in this example

I created a https://jsfiddle.net/ohdss4gh/2/ for a static solution, but i need the structure for a dynamic page. Do i need a modulo operation as a possible approach?
Or is there a way to choose the left or the right column via panel?

This is the code i have right now, but on click the row below the project slides to the bottom.

<main class="main" class="main" role="main">
  <div class="content publications column-padding--outer border--bottom">

    <?php 
    $subpages = page()->children()->visible();

// helper variable
    $count = 0;

// loop through projects
    foreach($subpages as $subpage):

// if the result of the modulo operation is 0, open new row
      if($count % 2 == 0): ?>
    <div class="row">
    <?php endif ?>
    <div class="col-1-2 padding-bottom--2rem">
      <div class="swiper-container swiper-container--common">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">    
          <!-- Slides -->
          <?php 
          foreach ($subpage->images()->sortBy('asc', SORT_NATURAL) as $image): ?>
          <figure class="swiper-slide">
            <img src="<?php echo $image->url() ?>" alt="<?php echo $page->title()->html() ?>">
          </figure>
        <?php endforeach ?>
      </div>
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

    </div>
    <div class="padding-top--1rem text-align--left">
      <p class="click padding-bottom--1rem"><?php echo $subpage->title()->html() ?>&nbsp;&#8599;</p>
      <div class="position--relative">
        <div class="showup padding-bottom--2rem"><?php echo $subpage->text()->kirbytext() ?></div>
      </div>
    </div>
  </div>

  <?php
 // if the result of the modulo operation is 1, close row
  if($count % 2 == 1): ?>
</div>
<?php endif ?>
<?php $count++; endforeach ?>
</div>
</main>

Thanks for your help in advance

pedroborges · February 17, 2017, 9:18am

You can use $subpage->even() and $subpage->odd() as per documentation.

texnixe · February 17, 2017, 9:34am

Never seen this. Where did you find that?

pedroborges · February 17, 2017, 10:18am

Lol, I was on the phone and was so sure I used these methods on a recent project… Just checked and those doesn’t exist, my bad

What I used actually is:

// The index starts at 0
$subpages->indexOf($subpage) % 2 !== 0

At least you can get ride of the counter this way.

Pascalmh · February 17, 2017, 11:45am

Since version 2.3.2 you can use the chunk() function

Helge · February 17, 2017, 1:42pm

Thanx for the hint. I tried it first with my given structure but it is not working.

I would like to have

<div class="col-1-2">
  <div class="column">project1</div>
  <div class="column">project3</div>
  <div class="column">project5</div>
</div>
<div class="col-1-2">
  <div class="column">project2</div>
  <div class="column">project4</div>
  <div class="column">project6</div>
</div>

so i wrote the following

<div class="row">
  <div class="col-1-2">
    <?php 

    $subpages = page()->children()->visible();
    
    $count = 0;
    
    foreach($subpages as $subpage):
    
    if($count % 2 == 0): ?>
    
    <div class="column">
      ...project even
    </div>

  <?php endif ?>
</div>
<div class="col-1-2">
  <?php if($count % 2 == 1): ?>

    <div class="column">
      ...project odd
    </div>

  <?php endif ?>
  <?php $count++; endforeach ?>
</div>

It always gives me stray col-1-2 elements and the structure is wrong.
Any ideas how to make it right?

pedroborges · February 17, 2017, 1:54pm

Now that intention is clearer, this is what I’d do:

Place this code in a controller to keep the templates clean.

<?php

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

  $subpages  = $page->children()->visible();

  $odd = $subpages->filter(function($subpage) use ($subpages) {
    return $subpages->indexOf($subpage) % 2 === 0;
  });

  $even = $subpages->filter(function($subpage) use ($subpages) {
    return $subpages->indexOf($subpage) % 2 !== 0;
  });

  return compact('subpages', 'odd', 'even');

};

If you need only 6 subpages don’t forget to add limit(6).

Helge · February 17, 2017, 8:57pm

Thanks for your help, how do i connect the php in a correct form to my html?
Sorry, but i’m still quite newbieish with php

texnixe · February 17, 2017, 9:14pm

Like this:

<div class="row">
  <div class="col-1-2">
    <?php foreach($even as $subpage): ?>
      <div class="column">
       <?= $subpage->title() ?>
      </div>
    <?php endforeach ?>
  </div>
  <div class="col-1-2">
   <?php foreach($odd as $subpage): ?>
      <div class="column">
       <?= $subpage->title() ?>
      </div>
    <?php endforeach ?>
  </div>
</div>

Helge · February 19, 2017, 5:30pm

I tried with the given Code Snippets, but it seems not to work…

	<div class="content">

		<?php return function($site, $pages, $page) {

			$subpages  = $page->children()->visible();

			$odd = $subpages->filter(function($subpage) use ($subpages) {
				return $subpages->indexOf($subpage) % 2 === 0;
			});

			$even = $subpages->filter(function($subpage) use ($subpages) {
				return $subpages->indexOf($subpage) % 2 !== 0;
			});

			return compact('subpages', 'odd', 'even');
		};
		?>
		<div class="row">
			<div class="col-1-2">
				<?php foreach($even as $subpage): ?>
					<div class="column">
                            ...project even
				        </div>
			<?php endforeach ?>
		</div>
		<div class="col-1-2">
			<?php foreach($odd as $subpage): ?>
				<div class="column">
                    ...project odd
			</div>
		<?php endforeach ?>
	</div>
</div>
</div>

Is it wrong how i use the function?

texnixe · February 19, 2017, 5:41pm

This block:

<?php return function($site, $pages, $page) {

  $subpages  = $page->children()->visible();

  $odd = $subpages->filter(function($subpage) use ($subpages) {
    return $subpages->indexOf($subpage) % 2 === 0;
   });

  $even = $subpages->filter(function($subpage) use ($subpages) {
    return $subpages->indexOf($subpage) % 2 !== 0;
  });

  return compact('subpages', 'odd', 'even');
};

belongs in a controller!

If you want to use it in a template, remove the function wrapper

$subpages  = $page->children()->visible();

$odd = $subpages->filter(function($subpage) use ($subpages) {
  return $subpages->indexOf($subpage) % 2 === 0;
});

$even = $subpages->filter(function($subpage) use ($subpages) {
  return $subpages->indexOf($subpage) % 2 !== 0;
});

Helge · February 19, 2017, 5:45pm

Good to know! Thanks a lot Texnixe!

QuentinJuhel · April 24, 2024, 9:54am

Is there a way to isOdd() and isEven() with kirby 4 to do the same ?

Topic		Replies	Views
Dynamic image counter below image slider Questions 🤔	1	1322	January 23, 2017
Isotope and swiper slider with dynamic content in a lightbox Questions 🤔	2	3371	January 15, 2017
Best way to build dynamic sub menus? Kirby 3	5	888	October 10, 2023
How to create elements with text content and image silder in the panel? Solved ✅	6	1112	September 2, 2020
Kirby + Bootstrap: alternate rows in foreach loop Solved ✅	2	1989	March 30, 2017

Dynamic solution for container with toggle effect

Related topics