How to progress through an img array with different css classes?

Kirby 2 Solved ✅
1

I have a custom js slider that allows for multiple classes of a housing images, one that is contained and the other that covers the browser window. I’m trying to understand how to progress through a project’s array of images when the div has 2-3 different classes for the background-image property. (:contain, :cover, etc) .

<div class="slider">
	<div id="cursor"></div>
	
	<div class="slides-wrapper">
		<?php foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
		<figure class="slide">
			<div class="img" style="background-image:url(<?php echo $image->url() ?>)">
			</div>
		</figure>
		<?php endforeach ?>
	</div>
	
</div>

css has the following:

figure.slide { 
	display: flex;
	flex-direction: column;
	float: left;
	position: fixed;
	left: 0;
	top: 0;
	opacity: 0;
	-webkit-transition: opacity 500ms ease;
	-moz-transition:opacity 500ms ease;
	transition: opacity 500ms ease;
	pointer-events: none;
}
figure.slide .img {
	margin: auto;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
figure.slide.full .img {
	background-size: cover;
}
2

Could you please post your code as a Markdown code block instead of as an image? Makes it a lot easier for us to deal with.
Markdown code blocks use three backticks at the start and end on separate lines. I have changed it for your CSS code above.

3

I would use file meta data, in your blueprint, define a field for the classname and then use that when looping through the images.

https://getkirby.com/docs/content/media

Edit:

In your blueprint:

files:
  fields:
    classname:
      label: Classname
      type: text
…
```

You can then edit the images in the panel and add the classname.

In your template:

```
<figure class="slide <?= $image->classname()->html() ?>">
```
4

Sorry! brand new to kirby/kirby forums. I’ve edited the original post to include markup.

5

Thank you, I see how this works, but in which .php file under blueprints would I make this addition? do i need an image.php in blueprint?

6

In the blueprint of the page with the files, if you have several pages with slides, in all blueprints that are used by these pages. No extra blueprint for images is required.

Let’s suppose your blueprint is called project.yml:

title: Project

files:
  sortable: true
  fields:
    classname:
      label: Classname
      type: text

pages: false

fields:
  title:
    label: Title
    type:  text
    width: 3/4

  date:
    label: Year
    type:  date
    width: 1/4

  text:
    label: Text
    type:  textarea
```
7

Ah I see now. Thank you, that’s terrific!