How to display picture from the article to the blog page

Hi everyone, I need help please, i want to add picture to my article, display the picture with the article title, tag and published date on the blog page. I am able to loop through the articles and fetch the title and tag but I do not know how to insert picture into different div in the article page. here is example of what I want:

How is the image assigned to a post? Selected in a files field? Or do you just want to get the first image stored with the post?

You might want to post your article blueprint.

I don’t even know how to insert the picture in the post

Files can be uploaded to a page either via a files section or via a files field.

A files field is basically like a select field, only optimized for files. So that means that the id of the file that you select there is stored in the content file.

At the bottom of that page you can find how you use this field in your template.

The alternative for a cover image is a files section that only accepts one image and has a special template assigned. See the documentation here:

To understand the difference and make it easier to decide what you best use, you might want to read this chapter:

I know how to put picture in the template, I have been working on kirby template for few months but I have never done anything related to blog. should I put picture the same way as normal pages? If yes, How do i get it to be listed on the blog page.
<img src="<?= image('camp2018.jpg')->url() ?>

<?php foreach($page->children()->listed()->flip() as $article): ?>

  <h1><?= $article->title()->html() ?></h1>
  <p><?= $article->text()->excerpt(300) ?></p>
  <a href="<?= $article->url() ?>">Read more…</a>

<?php endforeach ?>

How can I pull picture from the article with the above code?

I have to ask my question again, how is this image stored with the article? Since there are different ways to do that, there are different ways to retrieve such an image. Please post your article blueprint.

How Web Works Workshop at GirlsGoIT Summer STEM camp in 2018

<h1><?= $page->title()->html() ?></h1>

<?= $page->intro()->kirbytext() ?>

<?= $page->text1()->kirbytext() ?>

 <a href="<?= url('community') ?>">Back…</a>
title:  Article

    width: 2/3
        type: fields
            type: files
            type: text
            type: text
            type: text
            type: text
            type: textarea
            type: textarea
            type: text
            type: text

    width: 1/3
        type: files
        layout: cards

Ok, I guess you want to get the image from this field.

The code to get this in a single page template:

<?php if ( $image = $page->cover()->toFile() ) : ?>
  <img src="<?= $image->url() ?>" alt="">
<?php endif; ?>

And the same inside your loop, only you then don’t use $page but your loop variable, in this case $article.

I do not get this, I want to be able to add the picture from panel area, then be able to pull it to the blog page just like the example given earlier

how do i store it using panel, how do i pull it to blog page?

I don’t really understand your problem, maybe we are talking cross purposes. In your blueprint you have both a files section and a cover field. You can upload files through both.

I am not getting it, could you please give the procedure to add picture to the article page from the panel and how to use it as thumbnail on the blog page.

Check out these examples:

The single project has a cover field for a cover image and a gallery section for a gallery of images. It also has the code for the templates, both the single project which compares to an article, and the projects overview which compares to the blog.

I have tried everything but no picture got displayed both on article & blog page.