Closed Fazarel closed 1 year ago
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?
Maybe you mean when the first image is taken by default?
Demo content, grav and theme up to date.
With <a href="{{ page.url }}">{{ banner }}</a>
:
With <a href="{{ page.url }}">{{ banner|raw }}</a>
:
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.
Sorry, test it from the develop branch.
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.
@pikim could you upload a screenshot about this issue. I'd like to see it.
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).
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;
}
Yes. I know. I will remove width and height from CSS.
@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.
In order to render images in search results, I had to modify in simplesearch_item.html.twig
into