Add Images on Website

Hi, I create a code in the “portfolio.php” file, to put images on my website (like in the Kirby YouTube Video). I have the jpg and the jpg.txt and a portfolio.txt file in the content folder “portfolio”. But the image is not displayed. ?

//

<div class="portfolio-gallery">
    

<ul>
    <?php foreach ($page->images() as $image): ?>
        <li>
            <a href="<?= $image->url() ?>">
              <? $image ?>
            </a>
        </li>
    <?php endforeach ?>
</ul>

</div>



You need an image tag there, and the php tag you have inside the link is malformed…

    <?php foreach ($page->images() as $image): ?>
        <li>
            <a href="<?= $image->url() ?>">            
             <img alt="<?= $image->alt() ?>" src="<?= $image->url()  ?>">
            </a>
        </li>
    <?php endforeach ?>

I try the new code, but it doesn’t work. I also wonder why the code from the tutorial doesn’t work. But I have to apologize, I am a beginner :slight_smile:
This ist my complete php file. Maybe there ist something on the wrong position?

//<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $site->title() ?></title>

<?= css('portfolio.css') ?>

</head>


<body>

<header class="header">

   <a class="logo" href="<?= $site->url() ?>"><?= $site->title() ?></a>

        <nav class="menu">
            <ul>
            <?php foreach ($site->children()->listed() as $subpage): ?>
            <a href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a>
            <?php endforeach ?>
        </ul>
    </nav>
</header>



<main class="title">
    <h1><?= $page->title() ?></h1>
</main>


<main class="text">
    <?= $page->text() ?>
</main>




<div class="gallery">

<ul>
    <?php foreach ($page->images() as $image): ?>
        <li>
            <a href="<?= $image->url() ?>">
              <img alt="<?= $image->alt() ?>" src="<?= $image->url() ?>">
                <? $image ?>
            </a>
        </li>
    <?php endforeach ?>
</ul>

</div>



</body>

</html>




You should be able to just echo the file object to get an img element but you’re missing a = after the <? in your code:

<a href="<?= $image->url() ?>">
  <?= $image ?>
</a>

A general tip: debugging by dumping the variables. dump($page) to check if the page has the right template etc. or dump($page->images()) to see the images array.

Thanks! I I have corrected it. But it still doesn’t work. And also the code I try before.:frowning:

//<div class="gallery">


<ul><?php foreach ($page->images() as $image): ?>
        <li>
            <a href="<?= $image->url() ?>">            
             <img alt="<?= $image->alt() ?>" src="<?= $image->url()  ?>">
            </a>
        </li>
    <?php endforeach ?>
</ul>

</div>
//<div class="gallery">


<ul>
    <?php foreach ($page->images() as $image): ?>
        <li>
            <a href="<?= $image->url() ?>">
              <?= $image ?>
            </a>
        </li>
    <?php endforeach ?>
</ul>

</div>

Website: CHRISTINA SPERLING

Thank you very much!!! I think the problem was the name/title of the Images. I ty to give them other names and now it seems to work :+1:

Only change the file name “_MG_7788.JPG” to “7788.jpg”
So there are certain rules for writing it ?!

I noticed the same issue a couple days ago. It only happens when you put files into the content folder manually, if you upload images through the panel, their filenames will be optimised by Kirby.

Ah yes, i often forget it does this. I usully go the long way because im a control freak :slight_smile:

2 Likes