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

**URL:** <https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014>\
**Category:** Questions\
**Tags:** v2\
**Created:** [August 18, 2016, 2:37pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014 "2016-08-18T14:37:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![benfehrmanlee](https://avatars.discourse-cdn.com/v4/letter/b/c68b51/32.png) [@benfehrmanlee](https://forum.getkirby.com/u/benfehrmanlee)\
**Post date:** [August 18, 2016, 2:37pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014/1 "2016-08-18T14:37:03Z")

</div>

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:

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\
**Post date:** [August 18, 2016, 2:50pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014/2 "2016-08-18T14:50:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [August 18, 2016, 2:50pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014/3 "2016-08-18T14:50:39Z")

</div>

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](https://getkirby.com/docs/content/media)

Edit:

In your blueprint:

````auto
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() ?>">
```
````

---

<div class="post-metadata">

**Author:** ![benfehrmanlee](https://avatars.discourse-cdn.com/v4/letter/b/c68b51/32.png) [@benfehrmanlee](https://forum.getkirby.com/u/benfehrmanlee)\
**Post date:** [August 18, 2016, 2:53pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014/4 "2016-08-18T14:53:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![benfehrmanlee](https://avatars.discourse-cdn.com/v4/letter/b/c68b51/32.png) [@benfehrmanlee](https://forum.getkirby.com/u/benfehrmanlee)\
**Post date:** [August 18, 2016, 3:29pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014/5 "2016-08-18T15:29:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [August 18, 2016, 3:30pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014/6 "2016-08-18T15:30:35Z")

</div>

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:

````auto
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
```
````

---

<div class="post-metadata">

**Author:** ![benfehrmanlee](https://avatars.discourse-cdn.com/v4/letter/b/c68b51/32.png) [@benfehrmanlee](https://forum.getkirby.com/u/benfehrmanlee)\
**Post date:** [August 18, 2016, 3:36pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014/7 "2016-08-18T15:36:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 4:55pm UTC](https://forum.getkirby.com/t/how-to-progress-through-an-img-array-with-different-css-classes/5014/8 "2025-02-06T16:55:27Z")

</div>