Custom kirbytag for inline images?

Kirby 2 Questions 🤔
1

Hi all, I’ve been trying to create a custom kirbytag for inline images without a huge amount of luck. I’m a php beginner and have been trying to use the current kirbytag for images as a starting point but haven’t managed to get around the brick aspect? I’m guessing its the brick which splits the p tag on either side?

I’ve pasted the default image tag code below for reference.

Many thanks in advance!
Max

kirbytext::$tags['image'] = array(
  'attr' => array(
    'width',
    'height',
    'alt',
    'text',
    'title',
    'class',
    'imgclass',
    'linkclass',
    'caption',
    'link',
    'target',
    'popup',
    'rel'
  ),
  'html' => function($tag) {

    $url     = $tag->attr('image');
    $alt     = $tag->attr('alt');
    $title   = $tag->attr('title');
    $link    = $tag->attr('link');
    $caption = $tag->attr('caption');
    $file    = $tag->file($url);

    // use the file url if available and otherwise the given url
    $url = $file ? $file->url() : url($url);

    // alt is just an alternative for text
    if($text = $tag->attr('text')) $alt = $text;

    // try to get the title from the image object and use it as alt text
    if($file) {

      if(empty($alt) and $file->alt() != '') {
        $alt = $file->alt();
      }

      if(empty($title) and $file->title() != '') {
        $title = $file->title();
      }

    }

    // at least some accessibility for the image
    if(empty($alt)) $alt = ' ';

    // link builder
    $_link = function($image) use($tag, $url, $link, $file) {

      if(empty($link)) return $image;

      // build the href for the link
      if($link == 'self') {
        $href = $url;
      } else if($file and $link == $file->filename()) {
        $href = $file->url();
      } else if($tag->file($link)) {
        $href = $tag->file($link)->url();
      } else {
        $href = $link;
      }

      return html::a(url($href), $image, array(
        'rel'    => $tag->attr('rel'),
        'class'  => $tag->attr('linkclass'),
        'title'  => $tag->attr('title'),
        'target' => $tag->target()
      ));

    };

    

    // image builder
    $_image = function($class) use($tag, $url, $alt, $title) {
      return html::img($url, array(
        'width'  => $tag->attr('width'),
        'height' => $tag->attr('height'),
        'class'  => $class,
        'title'  => $title,
        'alt'    => $alt
      ));
    };

    if(kirby()->option('kirbytext.image.figure') or !empty($caption)) {
      $image  = $_link($_image($tag->attr('imgclass')));
      $figure = new Brick('figure');
      $figure->addClass($tag->attr('class'));
      $figure->append($image);
      if(!empty($caption)) {
        $figure->append('<figcaption>' . html($caption) . '</figcaption>');
      }
      return $figure;
    } else {
      $class = trim($tag->attr('class') . ' ' . $tag->attr('imgclass'));
      return $_link($_image($class));
    }

  }
);
2

If you set the figure option to false in /site/config/config.php

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

you should get what you are after without modifying the image tag.

Or maybe I don’t understand what your are after?

What do you mean?

1 Like
3

Hi, thanks for the reply! I was looking to create a new kirbytag image tag for ‘inline’ while keeping the old image tag as well. When you use the kirbytag ‘image’ inside of a p tag it then automatically seems to close the p tag just before the figure tag and inner image is inserted and then reopen another p tag after this. This means the image can never be inside the body of text which is what I need. How would I go about creating a clone of the image tag which instead situates the image inside of the p tags rather than splitting it?

From what I can see having tried changing the config file that doesn’t seem to solve the issue as far as I can tell…

I screenshotted part of the produced html to show what I mean below. The paragraphs automatically close before the figure object meaning that the image can only ever appear at the beginning of a paragraph. I’m looking to have it stuctured like below so that the figure is inside the p tags:

<p>lorem ipsum doler amet <figure><img src="blablbl.jpg"></figure> lorem ipsum dolor amet </p>

Does that explain any better?..

Thanks again for the help!

image.png740×400 64 KB

4

You can’t have a figure tag inside a p tag.

As I said, if you set the config setting to not use the figure tag but just insert an image tag, the image tag is inlined like this:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <img src="http://localhost/kirby-241/content/1-projects/3-project-c/camera.jpg" alt=""> Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>