TNT search plugin - image in search result

Hi!

Does anyone have idea how to display images in search results of tnt search plugin…??

Title we can get by using

{{ val.title|raw }}

What Im looking for is something like

{{ val.media.images|first.url|e }}

to use as img src on each search result… any ideas what I should overwrite in plugin .php file…?

Try with:

{% set banner = page.media.images|first %}

    {% if banner %}
        <div class="search-image">
            <a href="{{ page.url }}">{{ banner.cropZoom(100,100).html|raw }}</a>
        </div>
    {% endif %}

Look at Simple search plugin

Thanks, but this way will not work with TNT Search plugin (tried before multiple combinations like yours) - I think tntsearch.php need to be overwritten…

    public function onTNTSearchIndex(Event $e): void
    {
        $page = $e['page'];
        $fields = $e['fields'];

        if (isset($page->header()->parameters_id) || isset($page->header()->parameters_ean)) {
        $fields->parameters_id = $page->header()->parameters_id;
        $fields->parameters_ean = $page->header()->parameters_ean;
        };

    }

    public function onTNTSearchQuery(Event $e): void
    {
        $page = $e['page'];
        $query = $e['query'];
        $options = $e['options'];
        $fields = $e['fields'];
        $gtnt = $e['gtnt'];

        $content = $gtnt->getCleanContent($page);
        $title = $page->title();

        $relevant = $gtnt->tnt->snippet($query, $content, $options['snippet']);

        if (strlen($relevant) <= 6) {
            $relevant = substr($content, 0, $options['snippet']);
        }

        $fields->hits[] = [
            'link' => $page->route(),
            'title' =>  $gtnt->tnt->highlight($title, $query, 'em', ['wholeWord' => false]),
            'content' =>  $gtnt->tnt->highlight($relevant, $query, 'em', ['wholeWord' => false]),
        ];
    }
    protected function getFormValue($val)
    {
        $uri = $this->grav['uri'];

        return $uri->param($val) ?: $uri->query($val) ?: filter_input(INPUT_POST, $val, FILTER_SANITIZE_ENCODED);
    }

I modify onTNTSearchIndex function to search header.parameters_id and header.parameters_ean on my product page and it works fine, but I am struggling with showing picture on search results…

I guesses that onTNTSearchQuery $fields->hits[] need to contain info about media but cant this get working as it should be… any ideas?

Add

‘media’ => $page->media(),

to function onTNTSearchQuery $fields->hits[]:

        $fields->hits[] = [
            'link' => $page->route(),
            'title' =>  $gtnt->tnt->highlight($title, $query, 'em', ['wholeWord' => false]),
            'content' =>  $gtnt->tnt->highlight($relevant, $query, 'em', ['wholeWord' => false]),
            'media' => $page->media(),
        ];

after that in tntquery-ajax.html.twig add something like:

<img src="{{val.media.images|first.resize(800, 533).url|e}} width="800" height="533"
"title="{{ val.title|raw }}" alt="{{ val.title|raw }} search result">
2 Likes