Missing |raw Twig filter in simplesearch_item.html.twig

[Fazarel]

In order to render images in search results, I had to modify in simplesearch_item.html.twig

{% if banner %}
    <div class="search-image">
        <a href="{{ page.url }}">{{ banner }}</a>
    </div>

into

{% if banner %}
    <div class="search-image">
        <a href="{{ page.url }}">{{ banner|raw }}</a>
    </div>

[pmoreno-rodriguez]

HI @Fazarel

In simplesearch_item you already have this on banner {% set banner = page.media[page.header.primaryImage].loading('lazy').html(page.title,page.title)|raw ?: page.media.images|first %} with |raw filter.

What's wrong? Can you upload a screenshot with the issue?

[pmoreno-rodriguez]

Maybe you mean when the first image is taken by default?

[Fazarel]

Demo content, grav and theme up to date.

With <a href="{{ page.url }}">{{ banner }}</a>:

With <a href="{{ page.url }}">{{ banner|raw }}</a>:

[pmoreno-rodriguez]

Could you test the last simplesearch_item.html.twig from the main branch ?.

This file was modified in the last month for the next version of the theme.

[pmoreno-rodriguez]

Sorry, test it from the develop branch.

[pikim]

I've also made some modifications on that file as I experienced problems initially. See https://github.com/pmoreno-rodriguez/grav-theme-future2021/pull/25

Not this topic, but also concerns simplesearch_item.html.twig: if <p>{{ page.summary|truncate(200)|raw }}</p> ends in a table the whole result layout gets messed up. Therefore I disabled the line on my page and don't show any content, but only the image and the header.

[pmoreno-rodriguez]

@pikim could you upload a screenshot about this issue. I'd like to see it.

[Fazarel]

Not this topic, but also concerns simplesearch_item.html.twig: if <p>{{ page.summary|truncate(200)|raw }}</p> ends in a table the whole result layout gets messed up. Therefore I disabled the line on my page and don't show any content, but only the image and the header.

Similar problem with <p>{{ page.summary|truncate(200)|raw }}</p>. If cut ends in a url, layout messed up. I removed |truncate(200) filter, so summary size is now controlled by /user/env/site.test/config/site.yaml. In this case, I don't know why, no problem if summary ends in a middle of a link (the word is cut but the link works and the layout is preserved).

[Fazarel]

Sorry, test it from the develop branch.

Works with simplesearch_item.html.twig from develop branch.

But .cropZoom(100,100) is redundant with custom.css (maybe misc.css in the future):

/* Styles to support svg images in search results */

.search-row {
  display: flex;
  align-items: top;

}
.search-image img {
  overflow:hidden;
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: 0 100%;
}
@media only all and (max-width: 47.938em) {
  .search-image img {display:none;} 
}
.search-item {
  margin-left: 30px;
  margin-bottom: 50px;
}

[pmoreno-rodriguez]

Yes. I know. I will remove width and height from CSS.

[pikim]

@pikim could you upload a screenshot about this issue. I'd like to see it.

@pmoreno-rodriguez When I use your current develop branch (from 2 minutes ago) it looks like this:

The image is too wide, there is no separation line between results and search results are cascaded due to corrupted tables.