SOLVED - Alternate layout project thumbnails

The CMS Questions
1

I have a design in html and css for my projects list. Each project alternates down the page like so:

<section class="project-section">
      <figure class="project-side project-side-left">
          <img src="//">
      </figure>
      <article class="project-side project-side-right">
          <h2>title</h2>
          <p>text</p>
          <ul>
              <li>tag</li>
          <a href="/" class="project-section-button right">View project</a>
      </article>
</section>

<section class="project-section">
  <article class="project-side project-side-left">
      <h2>title</h2>
      <p>text</p>
      <ul>
          <li>tag</li>
      </ul>
      <a href="/" class="project-section-button">View project</a>
  </article>
  <figure class="project-side project-side-right">
      <img src="/">
  </figure>
  </section>

I have written for kirby like so:

<?php foreach(page('projects')->children()->visible()->flip() as $project): ?>

    <section class="project-section">
      <figure class="project-side project-side-left">
        <?php if($image = $project->image('home-page.jpg')): ?>
          <img src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>">
        <?php endif ?>
      </figure>

      <article class="project-side project-side-right">
          <h2><?php echo $project->title()->html() ?></h2>
          <p><?php echo $project->text()->excerpt(80) ?></p>
          <ul>
            <?php foreach($project->tags()->split() as $tag: ?>
                <li><?php echo $tag ?></li>
            <?php endforeach ?>
          </ul>
          <a href="<?php echo $project->url() ?>" class="project-section-button">View project</a>
      </article>
    </section>

  <?php endforeach ?>

The only way I can see to do it is to have a “project.left.php” and “project.right.php” templates then write:

<?php if($project->template() == 'article.left'): ?>

do the left layout

<?php elseif($project->template() == 'article.right'): ?>

do the right layout

<?php endif ?>

As I only need the right and left style layout for the project list and not the actual project page it seems unnecessary to have separate templates for alternate projects. Is there a better way to achieve this?

2

I’d use a helper variable and then add classes to the articles and figures depending on whether or not the variable is odd or even.

You don’t have to switch the order of figure and article but can change that via css floats.

You might also want to check out this blog article: http://getkirby.com/blog/odd-even

1 Like
3

Given that some time passend and browser support spread might be better, CSS3 could be an option as well:

.project-side:nth-child(even) {
  // what was .project-side-right
}
.project-side:nth-child(odd) {
  // what was .project-side-left
}
2 Likes
4

I would second the CSS solution. In the HTML, always keep the figure tag first and just apply a float to it based on odd or even placement in DOM.

1 Like
5

The problem is I have some javascript sliding in the project sides as you scroll down the page. Very similar to this

http://tympanus.net/Blueprints/OnScrollEffectLayout/

if I use either of the above techniques my project slider doesn’t work. I could just hard code it in as it’s my folio site but I would like a solution so I can use the CMS to add new projects.

6

If you need the alternating layout, you could use two different snippets and include them depending on odd or even.

1 Like
7

With the PHP Modulus Operator $position%2 you can check if it’s odd or even:

if ($position%2) { /* it's odd */ }
else { /* it's even */ }
8

Or use one snippet with a left/right parameter :wink:

10

Could you please show a code example of this? thanks

11

The tympanus example above uses a toggle class to trigger the animation based on visibilty. Do you use the same, or do you modify the style of the element inline?

If you use class toggles, I believe you should be able to use the CSS method still.

    article:nth-child(odd) figure {
      float: right;
      right:-500px;
      opacity:0;
    }
    
    article:nth-child(odd) figure.animate {
      right:0px;
      opacity:1;
    }
    
    article:nth-child(even) figure {
      float: left;
      left:-500px;
      opacity:0;
    }
    
    article:nth-child(even) figure.animate {
      left:0px;
      opacity:1;
    }
12 
<?php $n = 0; foreach($page->children() as $child): $n++; ?>
  <?php snippet('mysnippet', array('alternate' => ($n%2) ? 'odd' : 'even')) ?>
<?php endforeach ?>
13

Just a short notice!
If you use fenced code blocks like on Github: https://help.github.com/articles/github-flavored-markdown/#syntax-highlighting you can get beautiful syntax highlighting out of the box.

2 Likes
14

That’s the way I’d do it:

<?php 
    $n = 0; 
    foreach($page->children() as $child): $n++; ?>
<?php 
    if($n%2 == 0) {
        snippet('even');} // code as above, i.e. with article first
    else {
        snippet('odd'); //.i.e. with image first
    } ?>
 <?php endforeach ?>
15

Awesome! Thanks for your help :slight_smile:

16

You can even simplify it:

<?php $n = 0; foreach($page->children() as $child): $n++; ?>
<?php snippet(r($n%2==0, 'even', 'odd')) ?>
<?php endforeach ?>
4 Likes