How to add a block of html element Using Kirby panel

1

Hello everyone, is there any way to add HTML block of code through kirby panel, I declared rows using bootstrap css and I want to use kirby to add new row(s) from the panel. here is the code from my template:

            <div class="col"><?= $page->Archive2Title() ?> <br/>  

            <a class="linklive livelink" > &rarr; SOUNDCLOUD</a>

            </div>

            <div class="col-md-auto"><?= $page->Archive2Date() ?>08.05.20</div> 

            <div class="col col-lg-8"><?= $page->Archive1Link() ?> </div>

        </div>

<hr class="divider-line" />



        <div class="row">

            <div class="col"><?= $page->Archive3Title() ?> <br/>  

            <a class="linklive livelink" > &rarr; SOUNDCLOUD</a>

            </div>

            <div class="col-md-auto"><?= $page->Archive3Date() ?></div> 

            <div class="col col-lg-8"><?= $page->Archive3Link() ?></div>

    

        </div>

<hr class="divider-line" />

        <div class="row">

            <hr>

            <div class="col"><?= $page->Archive4Title() ?> <br/>  

            <a class="linklive livelink" > &rarr; SOUNDCLOUD</a>

            </div>

            <div class="col-md-auto"><?= $page->Archive4Date() ?></div> 

            <div class="col col-lg-8"><?= $page->Archive4Link() ?>

            </div>

            <hr>

        </div>
2

Hi @John2202, you can use a structure field for that: https://getkirby.com/docs/reference/panel/fields/structure.

3

Thanks for the response but I still don’t understand this, please can you just help with a sample using my above template code?

row
row1328×247 48.3 KB

This is picture of what i want, the mixcloud is an iframe, the whole row is 3 columns, I want to be able to add to the rows right from the panel.

4

A structure field is a field which can have an number of items (rows), where each item can have multiple fields, e.g. a title, a date, a link etc.(columns)

That way, you can add any number of fields, and then create your HTML in your template with this data.

Of course, you would only put the data into these fields, them HTML is created in the template, not inserted into the Panel fields.

5

Hi @John2202, I don’t think I can explain it better as the docs already do tbh:

  1. Define the necessary “fields” for each row and add them to the structure field in the blueprint: https://getkirby.com/docs/reference/panel/fields/structure#table-columns
  2. Add some info to it via the panel (log into your panel and browse to the page containing your structure field defined in 1)
  3. Output these values in the template with the HTML you want: https://getkirby.com/docs/reference/panel/fields/structure#how-to-use-in-templates-snippets

Have fun!

6

You can find an example structure field in the Starterkit:

  1. Blueprint definition: https://github.com/getkirby/starterkit/blob/d8e797dd9bd032ee83a0dc21456e14da337e4ef0/site/blueprints/pages/about.yml#L44
  2. How this content is used in the template: https://github.com/getkirby/starterkit/blob/d8e797dd9bd032ee83a0dc21456e14da337e4ef0/site/templates/about.php#L46

While this is a very basic example with just two fields, it should give you an idea.

7

I got it but having issues with picture in the structure field.
I have a picture, Name of the picture, description but pictures are not showing up. the blueprint is done but no picture displayed in the template.

8

Please post your template code where you try to output the structure field. Telepathic code transfer doesn’t work yet or I’m not sensitive enough to receive it :wink: .

9 
<?php 

// using the `toStructure()` method, we create a structure collection

$items = $page->shop()->toStructure();

// we can then loop through the entries and render the individual fields

foreach ($items as $item): ?>

<div class="col-sm shop-col text-center">

  

  <?php foreach ($item->images()->toFiles() as $pic): ?>

    <img src="<?= $pic->url() ?>" alt="" class="img-fluid">

  <?php endforeach ?>

  <p class="item-name"><?= $item->title()->html() ?></p>

  <p class="url"><?= $item->buybutton() ?></p>

  <p class="bio"><?= $item->Size() ?></p>

  </div>

<?php endforeach ?>
10

Is images a field inside your blueprint? Could you post the blueprint definition for the structure field?

11

shop:

sections:

fields:

  Shop:

    label: Shop Items

    type: structure

    sectionField: section

    fields:

      Pic:

        label: Picture

        type: files

      title:

        label: Title

        type: text

      BuyButton:

        label: Buy Button

        type: textarea

      size:

        label: size

        type: text
12

Ok, your image field is not called images but pic, so the relevant code should be

<?php foreach ($item->pic()->toFiles() as $pic): ?>