How to insert image URL from page into <img src"----"

Kirby 3 Solved ✅
1

Hi,

New to Kirby and finding it refreshing to use. Ran into this issue when I try to insert image URL into scr= of tag.

<?php foreach ($page->children()->listed() as $tutorials): ?>
    <div class="row my-3">
        <div class="col-3">
            <a href="<?= $tutorials->url() ?>">
                <img src="<?= I don't know what should go here ?>" class="img-fluid">
            </a>
        </div>
        <div class="col-9">
            <a href="<?= $tutorials->url() ?>">
                <h2><?= $tutorials->title() ?></h2>
            </a>
            <p class="lead"><?= $tutorials->intro() ?></p>
        </div>
    </div>
    <?php endforeach ?>

If anyone has any hints I would love to know!

2

That depends on what image you want to use here. Just the first images in the page folder? Or an images you selected via a files field?

3

I’m not advanced enough with Kirby to go with the fields option. But the first image would be a great start to learning more!

4 
<?php if ( $image = $page->image()): ?>
    <img src="<?= $image->url() ?>" class="img-fluid">
<?php endif ?>

With $page->image() you fetch the first image in the current page folder. We wrap the code in an if statement to make sure we have an image before outputting the img tag and calling the url() method.

1 Like
5

@texnixe thank you for your help. I can understand the logic. Yet somewhere in this code I’m missing something. Kirby still doesn’t output the html for the tag

<?php foreach ($page->children()->listed() as $tutorials): ?>
    <div class="row my-3">
        <div class="col-3">
            <a href="<?= $tutorials->url() ?>">
                <?php if ( $image = $page->image()): ?>
                <img src="<?= $image->url() ?>" class="img-fluid">
                <?php endif ?>
            </a>
        </div>
        <div class="col-9">
            <a href="<?= $tutorials->url() ?>">
                <h2><?= $tutorials->title() ?></h2>
            </a>
            <p class="lead"><?= $tutorials->intro() ?></p>
        </div>
    </div>
    <?php endforeach ?>
6

In your case, the line

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

should read

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

since in your foreach loop, every listed children page is accessed by $tutorials.

1 Like
7

Worked like a charm @Adspectus thank you so much