Extend custom tag with the popup/target option

I have gotten this custom tag to work. And I also want to extend this tag to allow for the popup/target option and if possible alt as well. But I really don´t know how to. :cry: How do I extend this?

<?php

kirbytext::$tags['mark'] = array(
  'attr' => array(
    'text',
    'popup',
    'link',
  ),
  'html' => function($tag) {
    $link = $tag->attr('link');
    $text = $tag->attr('text');
    return
          '<span class="mark '. $tag->attr('mark') .'">'
          .(isset($link) ? '<a href="' . $link . '">' . $text . '</a>' : $text).
          '</span>';
  }
);

Thank you upfront. :blush:

First of all, you have to add theres option to your attribute list.
Then you can fetch the values of those attributes with the attr() method.

<?php

kirbytext::$tags['mark'] = array(
  'attr' => array(
    'text',
    'popup',
    'link',
    'target',
    'alt'
  ),
  'html' => function($tag) {
    $link = $tag->attr('link');
    $text = $tag->attr('text');
    $target = $tag->attr('target');
    $alt = $tag->attr('alt');

    return
          '<span class="mark '. $tag->attr('mark') .'">'
          .(isset($link) ? '<a href="' . $link . '">' . $text . '</a>' : $text).
          '</span>';
  }
);

The rest you should be able to sort our yourself, i.e. check if they are empty or not and add the attributes to your link.

Oh, but that is the part I struggle the most with. It seems to be something I have not understood yet. It does not seem to be the same “logic” as in the front-end. :slightly_frowning_face:

@texnixe Also I tried to look in the tags.php kirby file and it did not make me much wiser.

I see, what is your expected HTML output, the above looks a bit weird to me…

:joy: Ok @texnixe . Maybe so. :blush:

<span class="mark yellow"><a href="/somewhere" target="_blank" alt="Alt text">Link text</a></span>

To make this output with different color, with or without links inside. If you have a better way to make the output that gives the same result let me know.

Here is the final result.

Does this make it more clear?

<?php

kirbytext::$tags['mark'] = array(
  'attr' => array(
    'text',
    'popup',
    'link',
    'target',
  ),
  'html' => function($tag) {

      $link = $tag->attr('link');
      $text = $tag->attr('text');
      $target = $tag->attr('target');
      $alt = $tag->attr('alt');

      $content = $text;

      if(! empty($link)) {
        $content = new  Brick('a', $text);
        $content->attr('href', $link);
        $content->attr('target', $target);
      }

      $html = new Brick('span', $content);
      $html->addClass('mark');
      $html->addClass($tag->attr('mark'));

      return $html;

  }
);

The alt attribute doesn’t apply to an anker element, though?

@texnixe No sorry the alt element. Of course not. I kew that too after my breakfast. :wink:

And thank you for :cloud_with_lightning: fast responses. You are always there for us. :pray:

@texnixe The popup: yes does not seem to work. Ideas?

What is the popup attribute? Can’t find that anywhere?

@texnixe I am just looking to the (link: # popup: yes)behaviour and I just wanted it to be consistent even this is custom. Sorry for not explaining this better. Are you with me?

Ok, that’s something Kirby specific then

<?php

kirbytext::$tags['mark'] = array(
  'attr' => array(
    'text',
    'popup',
    'link',
    'target',
  ),
  'html' => function($tag) {

      $link = $tag->attr('link');
      $text = $tag->attr('text');

      $content = $text;

      if(! empty($link)) {
        $content = new  Brick('a', $text);
        $content->attr('href', $link);
        $content->attr('target', $tag->target());
      }

      $html = new Brick('span', $content);
      $html->addClass('mark');
      $html->addClass($tag->attr('mark'));

      return $html;

  }
);

Yes @texnixe this worked great! :smile:

@texnixe So I am starting to understand the way this works. And since I have one working field I will really want blockquote field as well. I understand how I get the variables from the kirbyfield.

But where it is lagging for me is how to mount it together.

Kirbyfield input:

(quote: The text. name: Mark Boulton link: https://domain.com/somewhere/)

What I will like to be the output is this:

<blockquote class="quote">
Most people think typography is about fonts. Most designers think typography is about fonts. Typography is more than that, it’s expressing language through type. Placement, composition, type choice.
<a class="quote-link" href="https://domain.com/somewhere/" target="_blank">Mark Boulton</a></blockquote>

My code so far:

<?php

kirbytext::$tags['quote'] = array(
  'attr' => array(
    'text',
    'popup',
    'link',
    'target',
    'name',
    'quote',
  ),
  'html' => function($tag) {

      $link = $tag->attr('link');
      $text = $tag->attr('quote');
      $target = $tag->attr('target');
      $name = $tag->attr('name');

      $content = $text;

      if(! empty($link)) {
        $content = new  Brick('a', $name);
        $content->attr('href', $link);
        $content->attr('target', '_blank');

      }

      $html = new Brick('blockquote', $content);
      $html->addClass('quote');

      return $html;

  }
);

How do I merge the text and the link inside the blockquote element and if there is no link just a name how do I do it than? I have always wanted this field. Just never been able to make it. :wink:

Also is there a way to inject the class to the link element class="quote-link"?

<?php

kirbytext::$tags['quote'] = array(
  'attr' => array(
    'text',
    'popup',
    'link',
    'target',
    'name'
  ),
  'html' => function($tag) {

      $link = $tag->attr('link');
      $text = $tag->attr('quote');
      $target = $tag->attr('target');
      $name = $tag->attr('name');

      $quoteName = ' --' . $name;

      if(! empty($link)) {

        $quoteName = new  Brick('a', $quoteName);
        $quoteName->attr('href', $link);
        $quoteName->attr('target', '_blank');
        $quoteName->addClass('quote-link');

      }

      $html = new Brick('blockquote', $text);
      $html->append($quoteName);
      $html->addClass('quote');

      return $html;

  }
);

May I recommend the brick docs: Authentication | Kirby CMS

You read my mind @texnixe with the extra --. And works like a charm. :slight_smile: Thank you!

Have a great weekend.

I think and hope this is the last question @texnixe. How do I append a class or span to the name without the link?

I did not think about that if there is no link there is no. Tool for CSS control. :blush:

You could just wrap a span with class around the first $quoteName

Currently at the gym without glasses, so can’t write code…

May you show me in the code when you have the time? Keep it up at the gym. :muscle:

Also how do I remove the name and the “lines” output if empty?

What is your expected result if there is no name? What should go inside the a tags then? In case you have a link but no name, the URL?