Extend custom tag with the popup/target option


#1

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:


#2

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.


#3

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.


#4

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


#5

: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?


#6
<?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?


#7

@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:


#8

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


#9

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


#10

@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?


#11

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;

  }
);

#12

Yes @texnixe this worked great! :smile:


#13

@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"?


#14
<?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: https://getkirby.com/docs/toolkit/api#brick


#15

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

Have a great weekend.


#16

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:


#17

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

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


#18

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


#19

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


#20

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?