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: http://www.refittotravel.de/blog/
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): ?>
<article>
<h1><?= $article->title()->html() ?></h1>
<p><?= $article->text()->excerpt(300) ?></p>
<a href="<?= $article->url() ?>">Read more…</a>
</article>
<?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.
<h1><?= $page->title()->html() ?></h1>
<?= $page->intro()->kirbytext() ?>
<?= $page->text1()->kirbytext() ?>
<a href="<?= url('community') ?>">Back…</a>
title: Article
columns:
main:
width: 2/3
sections:
content:
type: fields
fields:
cover:
type: files
heading:
type: text
intro:
type: text
author:
type: text
published:
type: text
text1:
type: textarea
videolink:
type: textarea
outro:
type: text
tags:
type: text
meta:
width: 1/3
sections:
section1:
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.
Hey,
I have a similar problem with my site. I tried to follow the Portfolio Example but even the cover.yml template is not recognized by Kirby (Template: – in Picture view).
I can fetch the ID of the picture (file: -xxxxx) but if I want to use the url() method it does not provide a Url useable for any browser :).
Is it okay to post my configuration files here or should I open a new thread?
Please post your blueprint and the code you are using to retrieve the data. Note that if you use a files field, you need to convert the field values to file/files like described here before you can call the url() method:
Thanks a lot <3 - I’ve missed the “toFile” conversion - I thought using the “image()” function does this for me 
It works now 
Is there any way to use a “cover” like function as in the blueprints? - I mean a function that automatically crops the picture to a given ratio (e.g 1:1) - I only find crop() and ratio() but thex don’t allow to crop the image for a given ratio
Well, a ratio of 1:1 would for example be cover by crop(400, 400) etc., depending on the size you need. just the ratio alone is of little use. You can of course also calculate those values depending on the image dimensions with a little math.