Modifying the styling of latest blog article

Kirby 2 Solved ✅
1

Hello i’m quite new with php and i need some help figuring something out with my blog page. I have a list of articles currently displaying on the blog page and i want to specifically style the “latest” blog post but am not sure how to program this ( i know i probably need another if statement to select the first article). Right now i have this which is currently working. Anything helps… thanks!

<?php if($articles->count()): ?>
            <?php foreach($articles as $article): ?>

              <article class="normal">
                <h2 class="article-title">
                  <a href="<?= $article->url() ?>"><?= $article->title()->html() ?></a>
                </h2>
              </article>

            <?php endforeach ?>
          <?php endif ?>
2

Why not with css :last ?
https://www.w3schools.com/cssref/sel_last-child.asp

3

If you just want to apply some different styles, I would also use a CSS selector. But if you want to use completely different markup, this should work (inside the foreach loop)…

<?php if ($article->uri() == $articles->first()->uri()): ?>
  <!-- first article -->
<?php else: ?>
  <!-- other articles -->
<?php endif; ?>
4

I hope you don’t mind me asking here but i feel that i have similar problem. i’m building a carousel which is structured as a list, this is what i have so far:

<ol class="content">
  <?php if($image = $page->images()->sortBy('sort', 'asc')->first()): ?>

    <li class="current">
      <img src="<?php echo $image->url() ?>" class="img-responsive">
    </li> 

    <li>
      <img src="<?php echo $image->url() ?>" class="img-responsive">
    </li> 

   <?php endif; ?>
</ol>

the first image shows up, but not the second. all i want to do is put the first image in the list item with the “current” class, and then have all remaining images go into a list item without any class. any recommendation on how to do this?

i have been trying to use the else statement but i’m new to php as well and it keep breaking my code…

thanks!

5

Try this [untested] … I added a lot of explanations, so it may look more complicated than it actually is … :wink:

<!-- Get all images and display list only if images exist -->
<?php if($images = $page->images()->sortBy('sort', 'asc')): ?>

  <ol class="content">

    <!-- Loop through all images -->
    <?php foreach($images as $image): ?>
      
      <!-- You can simply use $images as filtered above -->
      <?php if($image == $images->first()): ?>

        <li class="current">
          <img src="<?php echo $image->url() ?>" class="img-responsive">
        </li> 

      <!-- Don't forget the else -->
      <?php else: ?>

        <li>
          <img src="<?php echo $image->url() ?>" class="img-responsive">
        </li>

      <?php endif; ?>

    <?php endforeach; ?>
  </ol>
<?php endif; ?>
1 Like
6

good news is the code does not break! haha. bad news is the second image is also the first image… so it just transitions into itself :thinking:

7

Aaaaahh … this is wrong …

<?php if($image = $images->first()): ?>

Sorry! Should be …

<?php if($image == $images->first()): ?>

I edited my post above.

1 Like
8

yup that worked :smile: so beautifully simple haha. now i just gotta go through this a couple of times to try and understand it better.

thank you!

and i hope it helps you too @nheopworks

1 Like
9

As an alternative to the code posted by @flokosiol regarding the original question:

<?php 
foreach($articles as $article) {
  if($article->is($articles->first())) {
    // do something;
  } else {
    // do something else;
  }
}
?>
10

thanks for the answers everyone! all the solutions were able to help me out