# Adding custom class to an image

**URL:** <https://forum.getkirby.com/t/adding-custom-class-to-an-image/2695>\
**Category:** Questions\
**Tags:** v2\
**Created:** [December 1, 2015, 3:06pm UTC](https://forum.getkirby.com/t/adding-custom-class-to-an-image/2695 "2015-12-01T15:06:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![stdolke](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@stdolke](https://forum.getkirby.com/u/stdolke)\
**Post date:** [December 1, 2015, 3:06pm UTC](https://forum.getkirby.com/t/adding-custom-class-to-an-image/2695/1 "2015-12-01T15:06:26Z")

</div>

How do I add a custom class to an image?

I’ve tried by adding a text file to the same folder as the image for example"  
image.jpg with text file image.jpg.txt  
in there  
(image: image.jpg class: custom)

But it won’t work and keeps the class as ‘Thumbnail’. Is there a different way or something else I should do?

---

<div class="post-metadata">

**Author:** ![thguenther](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/thguenther/32/16708_2.png) [@thguenther](https://forum.getkirby.com/u/thguenther)\
**Post date:** [December 1, 2015, 4:17pm UTC](https://forum.getkirby.com/t/adding-custom-class-to-an-image/2695/2 "2015-12-01T16:17:28Z")

</div>

The (image: image.jpg class: custom) is the markdown code for inserting an image into a textarea field.

If you want to insert this image directly into a template/snippet you will have to create a field. If you call this field “class” you can output the class in PHP like that:

```
<img class="<?= $page->images()->first()->class() ?>" src="<?= $page->images()->first()->url() ?>" />

```

The image.jpg.txt would then look like that:

```
class: custom

```

Does that help you?

---

<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:** [December 1, 2015, 5:36pm UTC](https://forum.getkirby.com/t/adding-custom-class-to-an-image/2695/3 "2015-12-01T17:36:46Z")

</div>

If you simply want to insert the image into the Markdown/Kirbytext content of a page, you can use the `(image: image.jpg class: custom)` syntax you posted, but this belongs inside the Kirbytext of the page you want to display the image in, not inside the image meta file.

---

<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:04pm UTC](https://forum.getkirby.com/t/adding-custom-class-to-an-image/2695/4 "2025-02-06T17:04:02Z")

</div>