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) →
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: