Add classes to image

Kirby 2 Solved ✅
1

Hi.

This is my plain html-code:

<div class="box_client">
   <img class="img-responsive" src="client_05.png">
</div>

How to add class="ing-responsive" to an image in a textfield and an image to an image-dropdown? I’ve tried both, but none of them worked as I want. The classes hadn’t no effect to the image.

DropDown:

With this:

<div class="box_client">
   <img class="img-responsive"><?php echo $img = $page->images()->find($page->client_five()); ?>
</div>

my output was:

<div class="box_client">
<img class="img-responsive"><img src="http://localhost:8888/content/home/client_05.png" alt="">
</div>

Textfield:

With this:

<div class="box_client">
   <img class="img-responsive"><?php echo $page->text_e()->kirbytext() ?>
</div>

my output was:

<div class="box_client">
<img class="img-responsive"><figure class="img-responsive"><img src="http://localhost:8888/content/home/client_05.png" alt=""></figure>
</div>

Thanks.
Daniel

2

Hello Daniel,
Try the code below and let us know if it works out :wink:

<div class="box_client">
   <img class="img-responsive" src ="<?php echo $page->image($page->client_five())->url(); ?>">
</div>

I’m not sure what you mean by Dropdown. Your client_five field could be an image field (type: image), a select field (type: select) or a selector field (type: selector)?
Each of those fields will save your image with the format: yourfilename.jpg in your text file which will work with the code above.

3

Change the code above to:

<?php 
  $img = $page->images()->find($page->client_five());
  // instead of the above code with find you can also use this code:
  $img = $page->image($page->client_five());
 ?>
<div class="box_client">
   <img class="img-responsive" src="<?=  $img->url() ?>">
</div>

Change the code above to:

<div class="box_client">
  <?php echo $page->text_e()->kirbytext() ?>
</div>

To add a class, add it to the image tag in your text field:

(image: some-image.jpg class: img-responsive)

https://getkirby.com/docs/content/text#images

By default, the image kirbytag creates a figure tag. You can change that by setting an option in your config.php:

c::set('kirbytext.image.figure', false);
1 Like
4

Thank you. That worked.
By the way: I meant an image field. :slight_smile:

texnixe:
Thank you for your hint with config.php.