How do i add dynamic fields?

Kirby 2 Solved ✅
1

I’m sorry if it’s a noob question but ive gone through the docs and i havent found what i’m looking for.
I have a slider on the front page that needs image, description, and link.
Is there a way i can have a “add slider” button on the panel where it adds this 3 fields?
From the guides i think i can fill a slider with all images uploaded to that page but im not sure how to add the other two fields.

Thanks in advance.

2

You can create a blueprint for the start page with fields for image, description and link: http://getkirby.com/docs/panel/blueprints

4

My doubt is on the code itself, i need to make this slider read an image, title and date for each slide added in the panel. This is my slider code:

> <div class="swiper-container" id="vertical-slider">
>                             <div class="swiper-wrapper">
> 						        <!--=============== 1 ===============-->	
>                                 <div class="swiper-slide bg" style="background-image:url(images/bg/1.jpg)">
>                                     <div class="overlay"></div>
>                                     <div class="slide-title-holder">
>                                         <div class="slide-title">
>                                             <h3 class="transition">  <span class="title-text">title</span>  </h3>
>                                             <span class="title-date transition">04.2015</span>
>                                             <span class="clearfix"></span>
>                                             <a class="ajax transition2" href="">  <span class="title-text"> View</span>  </a>
>                                         </div>
>                                     </div>
>                                 </div>
> 								<!--=============== 2 ===============-->	
>                                 <div class="swiper-slide bg " style="background-image:url(images/bg/2.jpg)">
>                                     <div class="overlay"></div>
>                                     <div class="slide-title-holder">
>                                         <div class="slide-title">
>                                             <h3 class="transition">  <span class="title-text">Maecenas  venenatis</span>  </h3>
>                                             <span class="title-date transition">10.12.2014</span>
>                                             <span class="clearfix"></span>
>                                             <a class="ajax transition2" href="">  <span class="title-text"> View</span>  </a>
>                                         </div>
>                                     </div>
>                                 </div>
>                             </div>
>                             <div class="swiper-nav-holder ver">
>                                 <a class="swiper-nav arrow-left transition" href="#"><i class="fa fa-chevron-up"></i></a>
>                                 <a class="swiper-nav  arrow-right transition" href="#"><i class="fa fa-chevron-down"></i></a>
>                             </div>
>                             <div class="slides-counter">
>                                 <ul>
>                                     <li><span class="presSlidesActive"></span></li>
>                                     <li><span class="presSlidesFrom"></span></li>
>                                 </ul>
>                             </div>
>                         </div>
5

How about a structure field:

In your blueprint:

...
fields:
  slider:
    label: Slider
    type: structure
    fields:
      image:
        label: Image
        type: select
        options: images
      title:
        label: Title
        type: textarea
      date:
        label: Date
        type: date

Then in your controller/template:

<?php

$slider = $page->slider()->toStructure();

foreach($slider as $item) : ?>
  <div class="swiper-container" id="vertical-slider">
   <div class="swiper-wrapper">
    <div class="swiper-slide bg" style="background-image:url(<?php echo $page->image($item->image())->url() ?>">
    <div class="overlay"></div>
    <div class="slide-title-holder">
      <div class="slide-title">
        <h3 class="transition"><span class="title-text"><?php echo $item->title()->html() ?></span></h3>
       <span class="title-date transition"><?php echo $item->date() ?></span>
      <span class="clearfix"></span>
     <a class="ajax transition2" href=""><span class="title-text"> View</span>  </a>
       </div>
     </div>
    </div>

// close all the divs above ... etc.


<?php endforeach ?>
2 Likes
6

I managed to create what i wanted with &article and subpages for each slider, but your solution seems simpler.
I’m going to try it out.

Thank you, ive just started with getkirby and i’m loving it so far.

7

Sorry i’m back, It seems to be working but on my blueprint when i click add first entry for the structure theres nothing to add, my blueprint looks like this:

title: Site
pages: default
fields:
title:
label: Title
type: text
logo:
label: Logo
type: text
copyright:
label: Copyright
type: text
social:
label: Social
type: structure
fields:
rede:
label: Nome
type: text
link:
label: Link
type: text

8

Can you post a screenshot of the panel with the add button? Maybe your indentation is not quite correct?

9

Thanks again, it was the indentation. I didnt know it mattered to the syntax.