How do i display image in the search results list

[Alken123]

I wanted to display the image alone the search list so that it would be easier to find things but it throws an error when i add

{{ index .Params.Images 0 | absURL }}

Im new to hugo btw

[razonyang]

Could you please explain your requirements in details? Do you mean to show only pictures in search results?

[Alken123]

Something like this https://ibb.co/7WZFD6g

[razonyang]

I see. I'll make a pull request tonight.

[Alken123]

btw i'm not able to display the post list side by side i'm giving it a card grid layout but it displays the posts below each other no matter what i do it wont go next to each other

I'm working with the partial list.html file

here is the layout i'm trying to use

{{- $pages := (.Paginate .RegularPagesRecursive).Pages -}}
<div class="container-fluid">
  {{- if .IsHome -}}
    {{- $sections := default (slice "posts") .Site.Params.mainSections -}}
    {{- $pages = where (.Paginate .Site.RegularPages).Pages "Type" "in" $sections -}}
  {{- else -}}
  {{- partial "breadcrumb" . -}}
  {{- partial "sections" . -}}
  {{- end -}}
  {{- partial "hooks/list-begin" . -}}
  <div class="container-fluid sugoi">
    <div class="card-content">
      <div class="row">
        <div class="s-card col-xl-3 col-lg-3 col-md-3 col-sm-4 col-6">
          {{- range $pages -}}
          <a href="{{ .Permalink }}">
            <figure class="figure">
              {{- if .Params.Images -}}
              <div class="card-img">
                <img src="{{ index .Params.Images 0 | absURL }}" class="figure-img img-fluid rounded" alt="A">
              </div>
              {{- end -}}
              <figcaption class="figure-caption text-center"><h5>{{ partial "helpers/title" . }}</h5></figcaption>
            </figure>
          </a>
          {{- end -}}
        </div>
      </div>
    </div>
  </div>
  {{- partial "hooks/list-end" . -}}
  {{- partial "pagination" . -}}
</div>

Issue https://ibb.co/GWqL3ZS

What i want https://ibb.co/yyhmMn5

[razonyang]

@Alken123 I think the s-card div tag should be placed in {{ range }} ... {{ end }}:

{{- range $pages -}}
<div class="s-card col-xl-3 col-lg-3 col-md-3 col-sm-4 col-6">
...
</div>
{{- end -}}

Otherwise, all the posts are placed in one s-card block.

[razonyang]

I made a PR #169 for displaying images in the search results. Preview URL:https://deploy-preview-169--hugo-theme-bootstrap.netlify.app/en/search/?q=markdown I'm looking forward to your feedback. I'll merge it later if everything is OK. That PR is a good example for showing how to custom the search page.

[Alken123]

Yup thats perfect. btw thank you for telling me about the range its fixed now