How display image at textarea

Kirby 2 Solved ✅
1

Now I want insert a image at textarea.
When I drag from panel left sidebar to textarea, textarea display e.g. (image: picture-name.jpg).
Then in template

<?= $page->text() ?>

Finally in html just display as (image: picture-name.jpg).
Not a real image, Why?How do it?

2

You have to parse it with kirbytext() like:

<?= $page->text()->kirbytext() ?>

https://getkirby.com/docs/cheatsheet/field-methods/kirbytext

3

Wow, So fast. Thank you.
But I also want to type html in textarea. e g.

<section class="uk-section-default">
  <div style="background-image: url('(picture_name.jpg)');" class="uk-background-norepeat uk-background-cover uk-background-center-left uk-section uk-section-large" uk-parallax="bgy: 20,-230;media: @m">
    <div class="uk-container uk-container-expand">
      <div class="uk-grid-margin" uk-grid>
        <div class="uk-width-xxlarge@m">
          <div class="uk-margin uk-card uk-card-secondary uk-card-body">           
            <h1 class="el-title uk-margin uk-h2">Tax Planning</h1>
            <div class="el-content uk-margin">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</div>
          </div>
        </div>
        <div class="uk-width-expand@m">
        </div>
      </div>
    </div>
  </div>  
</section>

Can i do it?

4

You can but HTML there is not a good idea at all. Why not use a template or snippet and define fields for the variable content?

This will not work:

Maybe you can paste a absolute URL there.

S.

5

Maybe I need short code.
Thank you again!

6

https://getkirby.com/docs/developer-guide/kirbytext/tags

7

The code above should go into your template. Just replace your title and the text with the fields from your page, sth. like:

<section class="uk-section-default">
  <div style="background-image: url(<?php if($image = $page->image()) {echo $image->url(); } ?>);" class="uk-background-norepeat uk-background-cover uk-background-center-left uk-section uk-section-large" uk-parallax="bgy: 20,-230;media: @m">
    <div class="uk-container uk-container-expand">
      <div class="uk-grid-margin" uk-grid>
        <div class="uk-width-xxlarge@m">
          <div class="uk-margin uk-card uk-card-secondary uk-card-body">           
            <h1 class="el-title uk-margin uk-h2"><?= $page->title() ?></h1>
            <div class="el-content uk-margin"><?= $page->text()->kirbytext() ?></div>
          </div>
        </div>
        <div class="uk-width-expand@m">
        </div>
      </div>
    </div>
  </div>  
</section>