Store all images for all site in one folder?

The CMS Questions
23

The Kirby way would be to have the images relative to a case study be in the folder of the case study.
Then refer to the case study page to get the corresponding image and let Kirby generate the thumbnails.

Something like this would be a list

<?php
// get all case studies
$items = page('portfolio')->children()->published();
?>

<ul>
<?php foreach($items as $work) ?>
  <li>
    <a href="<?= $work->url() ?>">
      <img src="<?= $work->images()->first()->resize(300, 200)->url() ?>" alt="">
      <?= $work->title()->html() ?>
    </a>
  </li>
<?php endforeach ?>
</ul>

No matter where you put this, Kirby will make sure that it will always use the same thumbnail from the same place. No need to put everything in the same folder.

24

Additionally, this will give you the possibilities to use Kirby’s thumb engine and thus to create responsive images automatically (particularly for the single pages), where you are now only using one-size-fits-all images.

25

So the Kirby way would be to put all the images relating to a particular case study, in that particular case study folder?

Then, when I want to create my list of case studies with one thumbnail per case study - and this list appears on nearly all pages - Kirby can suck in one image per case study from each folder? Can I choose which image is used and how would I do this?

I have nearly 40 case studies, but only want to list 16. Presumably I can do this and choose which case studies I wish to list?

… I have a fear that it would be a lot easier for me to keep my site as hand-coded HTML and CSS… but I’d like to learn Kirby so I guess it’s a good place to start

26

Might seem easier, but I think once you understand how Kirby works, it will be easier going forward. With a bit of experience, turning static HTML into a Kirby website won’t be difficult anymore.

Yes, one or more, since the files in a page folder become part of this page object, they are available whereever you use this page.

Yes, you can either sort by some field and then grab the first x, or you can filter by some field (e.g. if you have a toggle field “Show in list”, then you can filter by this field). This way, it’s easy just to switch a toggle to change which pages (case studies) are shown.

Somehow some projects on your website look familiar, wondering why I’ve seen them before…

27

Okay, I’ve ditched the idea of placing all my images in one folder and will now do the Kirby thing of putting images in the separate page folders.

Thanks!

28

Okay, next problem. In my header how do I link to my logo image, so that it displays on parent pages (portfolio for example) and child pages (case-study1 that sits inside the portfolio folder for example).

My logo image file is now just floating around inside the content folder. (Which personally I find messy)

29

Stuff like logos, i.e. assets that usually not change and therefore don’t have to be part of the pages or site object, are usually well off in an /assets folder next to the /content folder, where also your CSS or JavaScript would reside (see the ominous Starterkit).

You can access files in the assets folder then like this:

<?= url('assets/images/logo.svg') ?>
1 Like
30

Thank you.

I know this I really dim, but how do I add an image to a page? For example on the contact page I have a photo of me. The photo is inside the contact folder. I’d like to be able to add the photo to the page by adding it to my contact.txt file, but I don’t know how to do that!

31

There are SO many ways you could do that… But considering your current contact page, where it kinda is in the flow layout of the text, I’d put it there, into the text.

Translating that text into “kirbytext”, together with the rest, your contact.txt could look something like:

Title: Contact

----

Subtitle: Together we’ll make a difference

----

Text:
Based near the beautiful Stroud valleys in England, I work with clients worldwide.

Mark

The blueprint for your contact page would be something like:

title: Contact Page
columns: 
  - width: 3/4
    fields:
      subtitle:
        type: text 
      text:
        type: textarea
  - width: 1/4
    sections:
      files:
        type: files

(that’s about the bare minimum)

The template would be something like:

<?php snippet('header'); ?>

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

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

<?php snippet('footer'); ?>

You’re getting the hang of it?

1 Like
32

I’ve written the following in my contact.txt file:

(image: mark-e.jpg)

But in the browser the photo doesn’t show up. Just the above text. The photo is inside the Contact folder.

And I’ve tried to add it in the panel, but again no success.

I’ve just gone back to my contact.txt file in my editor and the Panel has re-ordered my Fields. I kinda want my Heading field to be at the top, not below the Text field. Is there a way to stop the Panel from doing this?

33

Does your template use ->kirbytext() ?

I’m not sure, I normally only use the panel to edit content. I would have guessed that it writes the fields in the order that you put them in the blueprint, but @texnixe might know better

34

Urm, no. What’s that? I’ve just been following the Kirby videos. Don’t remember a mention of ->kirbytext() This is my template for the contact page

<html lang="en">

<?php snippet('head') ?>

<body>
	<div class="wrapper">
		
		<?php snippet('header') ?>
		
		<h1><?= $page->heading() ?></h1>
		<h2><?= $page->subheading() ?></h2>

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

		<?php snippet('footer') ?>

	</div>
</body>

</html>
35

Ok, I’ve found a Kirby doc about KirbyText Text formatting | Kirby CMS

So how do I turn on KirbyText for all my website? It doesn’t say! This is exhausting.