Need blueprint example to use kirby panel

mdavid · October 26, 2018, 12:40pm

Hi,
Please could someone tell me what the blueprint.yml would be for the following page and how I’d use the panel to create it.

Here is the html if you need more detail:

<div style="margin-left: 15%; width: 80%; overflow: hidden;">
<div style="width: 15%; float: left; position: fixed; top: 5%;">
  <h4>content</h4>
  <a href="#item1">Item 1</a><p>
  <a href="#item2">Item 2</a><p>
  <a href="#item3">Item 3</a><p>
  <a href="#item4">Item 4</a>
</div>
<div style="margin-left: 16%">
<center>
<h1> main title </h1>
</center>
<a name="item1"> Item 1 </a>
<p style="margin-bottom: 50px">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a name="item2"> Item 2 </a>
<p style="margin-bottom: 50px">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<a name="item3"> Item 3 </a>
<p style="margin-bottom: 50px">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<a name="item4"> Item 4 </a>
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<a style="position: fixed; bottom: 10px; right:  20px" href="#top">Top</a>
</div>
</body>
</html>

This will be the blueprint for several pages and I’d like to use the Kirby Panel to write the content, I’d also like to know what the “panel-master” folder is for - are there 2 versions of the panel?

texnixe · October 26, 2018, 12:45pm

No, there is only one Panel folder. If you download the Panel repo directly from GitHub, it will be called master and if you want to replace and existing Panel folder, you have to remove the original folder and rename the downloaded one to panel.

But always make sure that your /panel and Kirby folders have the same version number, otherwise you will run into trouble.

texnixe · October 26, 2018, 12:53pm

As regards the blueprint, I’d probably create a page with a structure field, if the number of items can differ from page to page and if the content is relatively short.

example.yml

title: Example

pages: false #no subpages allowed
files: false # no files allowed

fields:
  title:
    label: title
    type: text
  items:
    label: Items
    type: structure
    fields:
      itemtitle:
        label: Item title
        type: text
      itemtext:
        label: Item text
        type: textarea

You create this blueprint with a text editor and put it into site/blueprints. You cannot create this blueprint in the Panel, the Panel is only used for creating content based on this blueprint.

You don’t want to use those inline styles in your final HTML, do you?

mdavid · October 26, 2018, 1:19pm

Thanks Sonja, I’ll work with this and see if I can create my pages in the panel.
Can I use any markdown in the panel or do I have to use kirby text?
Why do you ask about the inline css?

texnixe · October 26, 2018, 1:45pm

You can use both markdown and Kirbytext. If you don’t like Kirbytext, you can even disable it, but it offers more options for marking up your text than just Markdown. It’s up to you.
Because you shouldn’t use inline styles, unless you have a good reason to, It makes your code hard to maintain and more difficult to read (separation of concerns, i.e. semantic markup and styling). All styles should go into a stylesheet.

mdavid · October 26, 2018, 2:43pm

Here’s a snapshot of my panel folders - what to detele / rename and how do I ensure the same version number?

Thanks for your help
David

texnixe · October 26, 2018, 2:53pm

That looks pretty messed up with a panel folder and a panel-masterinside a panel-master. Delete the following folders:

kirby
panel
panel-master (the top one with everything inside it)

Then download a fresh Starterkit from the getkirby.com website. Move or copy the /panel and /kirby folders from that Starterkit into your project (and delete the rest of the Starterkit again), so that your final structure looks like this again:

To verify your versions, go to the Panel and open the Site Options page.

It will show you the versions of Panel, Kirby and Toolkit.

mdavid · October 26, 2018, 3:51pm

I’ve created a .yml file in site/blueprints, but don’t see how to open it in the panel. I assume from the panel I need to save this file as a .txt file in the content folder and then create the .php template, but where are the blueprints in the panel?
Thanks
David

jimbobrjames · October 26, 2018, 3:59pm

After you create a new page in the panel, it will create the Textfile for you. There is an option set the template in a drop down when you make the new page. You can also change the pages template on the left hand side when you edit an existing page.

texnixe · October 26, 2018, 4:03pm

You select the blueprint in the “Add a new page” form, in the Templateselect.

What is shown here is the title you have given your blueprint.

title: Example

Make sure to always choose a unique name, otherwise you end up with lots of identical options to choose from.

mdavid · October 26, 2018, 9:26pm

Hi,
When I try to preview the following I just see the title without any page content.
I think this is the line in what-is-reiki.php that should display the content
<?= $page->text()->kirbytext() ?>
The blueprint:
title: What is Reiki

pages: false #no subpages allowed
files: false # no files allowed

fields:
  title:
    label: title
    type: text
  items:
    label: Items
    type: structure
    fields:
      itemtitle:
        label: Item title
        type: text
      itemtext:
        label: Item text
        type: textarea

and content > what-is-reiki> what-is-reiki.txt
Title: What is Reiki

----

Items: 

- 
  itemtitle: Reiki
  itemtext: "Reiki is the Japanese word for 'universal life force energy'.  We all have it; we can all use more.  The strength of the method of healing based on Reiki energy lies in its simplicity.  When we pass this energy through our hands and into our bodies, we use it to heal ourselves, physically, emotionally, and spiritually, eventually bringing ourselves to a state of emotional and spiritual balance, calm, inner strength, and joy.  We can also provide this energy to others so that they can heal themselves.  Though extremely simple, Reiki treatments can be surprisingly powerful and effective.  Reiki does not only relieve symptoms; Reiki treatments increase relaxation, ease pain, strengthen our immune systems, and heal the root causes of our illnesses."
- 
  itemtitle: How Reiki Works
  itemtext: 'When we receive Reiki attunements, we become able to channel more of this Energy from the Universe into our bodies; it can then flow through our hands into our own bodies and into the bodies of other people and other living beings.  When we receive this Energy, we use it for healing that takes place on the subconscious level.  Together, balance, inner peace, and improved health allow us to become happier and more beautiful to ourselves and to others and eventually may bring us to a feeling of joyfulness in our lives.'

What am I doing wrong?

texnixe · October 26, 2018, 9:35pm

First of all, do you have a template called what-is-reiki.php? If not, the page is displayed with the default.phptemplate.

Secondly, to display a structure field, you have to make it a structure collection and then loop through it an display the individual items:

<?php
$items = $page->items()->toStructure();
foreach($items as $item): 
?>
<h2><?= $item->itemtitle()->html() ?></h2>
<?= $item->itemtext()->kirbytext() ?>
<?php endforeach ?>

This code should go into your what-is-reiki.phptemplate, together with a header and footer snippet, and the rest of your HTML.

mdavid · October 26, 2018, 9:44pm

Thanks very much, that’s what I was missing

Topic		Replies	Views
Upgrading to Kirby 3: Creating a Panel - Help needed Kirby 3 panel	4	273	April 4, 2023
Blueprint/Panel advice needed for x images within a div Questions 🤔 panel	7	381	November 17, 2019
Panel page using default.yml instead of corresponding blueprint Kirby 3	1	349	June 17, 2021
Panel / blueprint questions Solved ✅ panelfield	2	1380	August 3, 2015
Blueprint source question Solved ✅	8	538	March 20, 2018

Need blueprint example to use kirby panel

Related topics