A Text distributed over several divs in a carousel

Hey guys, i have a carousel full with images, and i’d like to overlay a long text over each slide in the carousel.
I’m very new to writing backend so unfortunately i cannot provide any code that I wrote (as i wouldn’t even know where to start) but the way I imagine this to work would be: if for example the content creator writes more than 60 words, the rest of the text moves to another slide (another div), and so on, or maybe in the content writing panel there’s as many text fields as there are uploaded images (slides)

Would anyone know how to achieve this?

my project.php looks like this at the moment

  <div class="main-carousel" data-flickity='{ "fullscreen": true }'>
      <?php
      // Images for the "project" template are sortable. You
      // can change the display by clicking the 'edit' button
      // above the files list in the sidebar.
      foreach($page->images()->sortBy('filename', 'asc') as $image): ?>
        <div class="carousel-cell" >
          <img class="carousel-cell-image" src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
        </div>
      <?php endforeach ?>
  </div>

I’ve found a forum discussion from 3 years ago, but i couldn’t really understand what this code does (or even where to put it haha) →

And a good visual example for what i wish it looked like was this one → http://www.thethick.com/stephen-erica-malbon/

Thanks so much in advance to anyone who could help with this one out

I think you have two options:

  • use a structure field with an image select field and a text field, so that the user can first select the image and then write the corresponding text
  • write the text into the image meta data

Note that text overlay over images is in many cases not very readable unless there is a high contrast or a dark/bright overlay depending on text color. I’d keep text overlays very short or use captions underneath instead.

Hey, thanks for the answer, so i managed to understand the blueprints and reading the documentation to add the image selection field, so I feel this is going somewhere!

title: Project

files:
  sortable: true


# Title Bar
fields:
  title:
    label: Title
    type:  text
    width: 3/4
  image:
    label: Image
    type: select
    options: images
  text:
    label: Text
    type:  textarea
  


  
  tags:
    label: Tags
    type: tags

At the moment I can’t completely understand how would a text be attached to that specific image that I’ve selected? Now when I write something in the text field it puts the text over all the images


Currently, you only have a single image select and a text field. As I explained above, you need a structure field, that allows. you to create repeated fields:

selector:
  label: Selector
  type: structure
  fields:
    pic:
      label: Image
      type: select
      options: images
    text:
      label: Text
      type:  textarea

With this setup, you can attach text to each selected image.

In your template:

<?php
$sliderItems = $page->selector()->toStructure();
foreach($sliderItems as $item):
  if($image = $item->pic()->toFile()): ?>
    <img src="<?= $image->url() ?>">
    <div><?= $item->text()->kirbytext() ?></div>
  <?php endif ?>
<?php endforeach ?>

Of course, you would have to adapt the HTML. to your use case, this is just an example.

Note that instead of looping the the page’s images as in your code above, you now loop through the structure field items!