The img link is going to the blog page, not the article page

Kirby 2 Solved ✅
1

I’m currently setting up my blog page as follows:

<section>

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

          <?php foreach($articles as $article): ?>
    
            <article class="article article--blog">

              <header class="article-header">
                <img src="<?php $article->coverimage()->url(); ?>" alt="">

                <a href="<?php $article->url() ?>" class="article__img-link">
                  <?php snippet('coverimage', $article) ?>
                </a>

                <h2 class="article__title article__title--blog">
                  <a href="<?= $article->url() ?>" class="article__title-link"><?= $article->title()->html() ?></a>
                </h2>
    
                <p class="article__meta"><?= $article->date('F jS, Y') ?></p>

              </header>
    
            </article>
    
    
          <?php endforeach ?>

        <?php else: ?>
          <p>This blog does not contain any articles yet.</p>

        <?php endif ?>

      </section>

and the coverimage snippet is:

<?php if($item->coverimage()->toFile()): ?>
  <figure>
    <img src="<?= $item->coverimage()->toFile()->url() ?>" alt="" />
  </figure>
<?php endif ?>

So, the article title (the h2) links to the article fine, how do I make the image link to the article as well instead of the blog page?

Thanks in advance!

2

There’s an echo() missing:

<a href="<?= $article->url() ?>" class="article__img-link">
   <?php snippet('coverimage', $article) ?>
</a>

Note that this line doesn’t make sense either:

 <img src="<?php $article->coverimage()->url(); ?>" alt="">

First of all, there’s an echo() command missing. But secondly it will still not return what you expect, because you are trying to call url() on a field object, not an image object. The code should be the same as in your coverimage snippet.

<?php if($image = $article->coverimage()->toFile()): ?>
    <img src="<?= $image->url() ?>" alt="" />
<?php endif ?>

But then you would be repeating the same stuff twice.

Edit: Note that you should always check if the image exists first, like you do in your coverimage snippet. But I would change the snippet as well, so as not to repeat yourself:

<?php if($image = $item->coverimage()->toFile()): ?>
  <figure>
    <img src="<?= $image->url() ?>" alt="" />
  </figure>
<?php endif ?>
1 Like
3

The reason the link doesn’t work is because it’s not being echoed:

-  <a href="<?php $article->url() ?>" class="article__img-link">
+  <a href="<?= $article->url() ?>" class="article__img-link">

At first it’s not clear why you are repeating the cover image in your example… but the URL needs to be echoed there too.

- <img src="<?php $article->coverimage()->url(); ?>" alt="">
+ <img src="<?= $article->coverimage()->toFile()->url(); ?>" alt="">
1 Like
4

@pedroborges: In the second image tag, just echoing coverimage does not really make sense, see my post above.

5

Yeah, you are right @texnixe!

EDIT: I have updated my example, but it’s best practice to check if the image exists before displaying it and @texnixe has in her example.

6

Oh, and more more thing, @AdamRasheed: if you make a habit of checking your source code in developer tools, you can find such issues more easily :slight_smile:

1 Like