Snippet in tag omits next tag output

The CMS Questions
1

This could be a rather long issue description, so please bear with me here. :slight_smile:

It all starts with Markdown content:

Text:

# L’allemand un jeu d’enfants

(content-box:start image:mobiklasse_team_2016-17.jpg alt:Team color:yellow)

© Jennifer Sanchez // mobiklasse.de est une campagne qui a pour but de sensibiliser des élèves à la langue et à la culture allemandes en France. (link: program text: Apprendre plus »)

(content-box:end)

## mobiklasse.de dans les régions françaises

(snippet:region-map)

The first used tag (content-box) is working but the following (snippet) not. At least while using another snippet in the content-box tag. Here‘s the content-box-snippet:

<?php

kirbytext::$tags['content-box'] = array(
  'attr' => array(
    'image',
    'alt',
    'color'
  ),
  'html' => function($tag) {

    $type = $tag->attr('content-box');
    $imageUrl = $tag->attr('image');

    if ($type == 'start') {
      if ($tag->file($imageUrl)->exists()) {
        $color = !empty($tag->attr('color')) ? ' c-content-box--' . $tag->attr('color') : '';

        $html = '<div class="c-content-box' . $color . '">' .
                snippet('responsive-image', array('image' => $tag->file($imageUrl), 'alt' => $tag->attr('alt')), true) .
                '<div markdown="1" class="c-content-box__content">';
      }

      else {
        $html = '(content-box): Please check the image name and availability.';
      }
    }

    elseif ($type == 'end') {
      $html = '</div></div>';
    }

    else {
      $html = '(content-box): Please check the kirbytag syntax.';
    }

    return $html;
  }
);

And the responsive-image snippet which (only in this context) is causing all the trouble:

<img
    src="<?= $image->width(920)->url() ?>"
    srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-srcset="<?= $image->width(920)->url() ?> 920w,
        <?= $image->width(600)->url() ?> 600w,
        <?= $image->width(300)->url() ?> 300w"
    data-sizes="auto"
    class="lazyload">

Here‘s the snippet-tag:

<?php

kirbytext::$tags['snippet'] = array(
  'attr' => array(),
  'html' => function($tag) {
    $file =  $tag->attr('snippet');
    return snippet($file, array(), true);
  }
);

Unfortunately, the output of the snippet tag is omitted if the responsive-image snippet in the content-box tag is used.

Has anyone an idea why this happens?

Thanks a lot
René

2

Changing this line in the content-box tag:

snippet('responsive-image', array('image' => $tag->file($imageUrl), 'alt' => $tag->attr('alt')), true) .

to:

kirbytag(array('image' => $tag->file($imageUrl)->url(), 'alt' => $alt)) .

… solves the issue. But I would like to have a way for using my responsive-image snippet here, too.

3

Have a look at the columns plugin for this kind of tag with opening and closing tags.

4

Thanks for your tip. I read Bastians corresponding article a while ago: https://getkirby.com/docs/cookbook/columns-in-kirbytext

But I don‘t have an idea how I’m able to implement my other requirements like various attributes with data (color, image, see example above). Here is my first test:

kirbytext::$pre[] = function($kirbytext, $text) {

  $text = preg_replace_callback('!\(content-box(…|\.{3})\)(.*?)\((…|\.{3})content-box\)!is', function($matches) use($kirbytext) {

    $content = $matches[2];

    $field = new Field($kirbytext->field->page, null, trim($content));
    $html = '<div class="' .
            'TEST' . '">' . kirbytext($field) .
            snippet('responsive-image', array('image' => kirby()->page()->file('mobiklasse_team_2016-17.jpg'), 'alt' => 'test'), true) .
            '</div>';

    return '<div class="' . 'TEST2' . ' ' . 'TEST3' . '">' . $html . '</div>';

  }, $text);

  return $text;
};
5

I just decided to go with a simple image brick solution in my tag for now. It could be more elegant though :sweat:

    $img = brick('img');
    $img->attr('src', $tag->file($imageUrl)->width(920)->url());
    $img->attr('srcset', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
    $img->attr('data-srcset', $tag->file($imageUrl)->width(920)->url() . ' 920w,' . $tag->file($imageUrl)->width(600)->url() . ' 600w,' . $tag->file($imageUrl)->width(300)->url() . ' 300w');
    $img->attr('data-sizes', 'auto');
    $img->attr('alt', $alt);
    $img->addClass('lazyload');

    $html = '<div class="c-content-box' . $color . '">' .
            $img .
            '<div markdown="1" class="c-content-box__content">';
  }

Thanks for your help. If anybody has an idea for solving my problem in a more elegant way (by using my already available snippet), please let me know.

6

Well, that’s weird. Everyhing works, when I change my responsive-image snippet code to the brick syntax.

Instead of using:

<img
    src="<?= $image->width(920)->url() ?>"
    srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-srcset="<?= $image->width(920)->url() ?> 920w,
        <?= $image->width(600)->url() ?> 600w,
        <?= $image->width(300)->url() ?> 300w"
    data-sizes="auto"
    class="lazyload">

… it works by using a brick in my responsive-image snippet:

<?php
  $img = brick('img');
  $img->attr('src', $image->width(920)->url());
  $img->attr('srcset', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
  $img->attr('data-srcset', $image->width(920)->url() . ' 920w, ' . $image->width(600)->url() . ' 600w, ' . $image->width(300)->url() . ' 300w');
  $img->attr('data-sizes', 'auto');
  $img->attr('alt', $alt);
  $img->addClass('lazyload');

  echo $img;
?>

Why is that?

Thanks again
René