Blog articles on homepage

Kirby 3 Solved ✅
1

Hello,

Is this the right way to show the latest 3 blog articles? It works, but is it the way it should be done?

<?php foreach($article = $site->find('news')->children()->listed()->sortBy('date', 'asc')->flip()->paginate(3) as $blog): ?>
    <div class="col-lg-4 my-2 my-md-3 my-lg-0">
        <div class="row">
            <?php if($image = $blog->cover()->toFile()): ?>
                <a class="col-5" href="<?= $blog->url() ?>">
            <img class="rounded img-fluid hover-fade-out" src="<?= $image->crop(350, 233)->url() ?>" alt="<?= $blog->title()->html() ?>" alt="">
          </a>
                <?php endif ?>
                    <div class="col">
                        <a class="h6" href="<?= $blog->url() ?>"><?= $blog->title() ?></a>
                        <div class="text-small text-muted mt-2">
                            <time>
                                <?= $blog->date()->toDate('d F Y') ?>
                            </time>
                        </div>
                    </div>

        </div>
    </div>
    <?php endforeach ?>

Thanks!

2

If you want to limit the articles to show to only three, the right method to use is limit() not paginate(). Also, assigning your articles to a variable within the foreach doesn’t make sense.

<?php if ($page = page('news')): ?>
    <?php foreach ($page->children()->listed()->sortBy('date', 'asc')->flip()->limit(3) as $article): ?>
    <div class="col-lg-4 my-2 my-md-3 my-lg-0">
        <div class="row">
            <?php if ($image = $article->cover()->toFile()): ?>
                <a class="col-5" href="<?= $article->url() ?>">
            <img class="rounded img-fluid hover-fade-out" src="<?= $image->crop(350, 233)->url() ?>" alt="<?= $article->title()->html() ?>" alt="">
          </a>
                <?php endif ?>
                    <div class="col">
                        <a class="h6" href="<?= $article->url() ?>"><?= $article->title() ?></a>
                        <div class="text-small text-muted mt-2">
                            <time>
                                <?= $article->date()->toDate('d F Y') ?>
                            </time>
                        </div>
                    </div>

        </div>
    </div>
    <?php endforeach ?>
<?php endif ?>

On a side note:
I somehow doubt that the using the article title as alt attribute for the image makes for a good description of the cover image. If the image is purely decorational, use an empty attribute. If is shows something that needs to be described, describe what the image shows.

1 Like
3

Hi @texnixe,

Thank you for your help! I learn a lot from it :pray:
You are right I should make use of the file blueprint and return the alt text of an image.

Have a great weekend!

1 Like
4

Thanks! Enjoy yours as well!

1 Like