# Adding a class to an image depending on select-field option

**URL:** <https://forum.getkirby.com/t/adding-a-class-to-an-image-depending-on-select-field-option/10385>\
**Category:** Questions\
**Tags:** v2\
**Created:** [May 10, 2018, 12:40pm UTC](https://forum.getkirby.com/t/adding-a-class-to-an-image-depending-on-select-field-option/10385 "2018-05-10T12:40:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoSch](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/josch/32/10191_2.png) [@JoSch](https://forum.getkirby.com/u/JoSch)\
**Post date:** [May 10, 2018, 12:40pm UTC](https://forum.getkirby.com/t/adding-a-class-to-an-image-depending-on-select-field-option/10385/1 "2018-05-10T12:40:31Z")

</div>

I’d like to be able to assign classes to images via a selection field that I added to the images’ meta info.

My blueprint looks as follows:

```
files:
    sortable: true
    fields:
      caption:
        label: Image Position
        type: select
        options:
          center: Center
          center-right: Center-Right
          center-left: Center-Left
          bottom-right: Bottom-Right
          bottom-left: Bottom-Left
          top-right: Top-Right
          top-left: Top-Left

```

Each of the options refers to a CSS class. In the backend this results in the following:

 ![51](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/e/e8c5c5066d5fb415ba3661d24d1b29fd2224e727.png)

As of right now I’m simply pulling the images into the page like this (the images are put into a [flickity-based](https://flickity.metafizzy.co/) slider):

```
<div class="main-carousel">

<?php foreach($project_cd_images->sortBy('sort', 'asc') as $project_cd_image): ?>

	<!-- Add each image to slider as bg-img -->
		<div class="carousel-cell--half">
			<div class="tbn-slider--bg-img tbn-slider--bg-img-regular"
						style="	background-image: 
										
										url(<?= $project_cd_image->url() ?>);

										background-position: center;">
			</div>
		</div>
	<!-- –––––––––––––––––––––––––––––––––– -->

<?php endforeach ?>

</div>

```

Everything is working out perfectly fine, the images in the backend are put into the slider as background-images of a respective `<div>`without any problems.

Now I would like to also be able to check the selection made in the “Image Position”-field (see above) before the image is placed in the slider and assign the `<div>` class depending on that selection. How do I check for the selected option in the field and assign the class?

Thanks in advance for any help.

---

<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:** [May 10, 2018, 12:44pm UTC](https://forum.getkirby.com/t/adding-a-class-to-an-image-depending-on-select-field-option/10385/2 "2018-05-10T12:44:23Z")

</div>

```auto
<div class="main-carousel">

<?php foreach($project_cd_images->sortBy('sort', 'asc') as $project_cd_image): ?>
  <?php $imagePosition = $project_cd_image->caption(); ?>
	<!-- Add each image to slider as bg-img -->
		<div class="carousel-cell--half">
			<div class="tbn-slider--bg-img tbn-slider--bg-img-regular <?= $imagePosition ?>"
						style="	background-image: 
										
										url(<?= $project_cd_image->url() ?>);

										background-position: center;">
			</div>
		</div>
	<!-- –––––––––––––––––––––––––––––––––– -->

<?php endforeach ?>

</div>

```

Since your field is not required, you might want to add an if statement to check if the variable is empty and maybe assign a default class.

---

<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, 5:28pm UTC](https://forum.getkirby.com/t/adding-a-class-to-an-image-depending-on-select-field-option/10385/3 "2025-02-06T17:28:18Z")

</div>