Blog articles on homepage

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!

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.

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!

Thanks! Enjoy yours as well!