Incorrect image being returned when Page Contains Multiple Images

[Phil89a]

Some on my site pages have multiple images defined (it is a photography portfolio site) and when I search it correctly finds text in the image's Alt; however the image that is displayed in the search results is not the image indexed.

How do I get PageFind to show the correct image in the results?

My images are defined as follows: -

<img loading="lazy" width="600"
height="600"
src="/images/portfolios/sea%20meets%20land/211206-42373_hu8796f4e0eb832c9492631ef3f9163a2b_2799760_filter_6331161270205693318.jpg" style="background-color: #b1c1d4"
alt="Floating Reflection"
data-pagefind-meta="image[src], image_alt[alt]"
/>

[bglw]

Hey @Phil89a — sorry I completely missed this one!

Do you have a link to the site in question? Things look correct from just your code sample.

[Phil89a]

Hi Liam - things have moved on, but still having problems....

Have a look at https://cw109eu.uk and do a Search for Wales. Should get two results; however there are a large number of images on the site with Wales in their metadata, which aren't returned. Look at the source for Recent Work under Portfolio menu.

How do I get these images to also appear in the results?

Note - I don't discount having broken something; but if so I don't know what :)

[bglw]

Specifically for the https://cw109eu.uk/portfolio/recent/ page, nothing is being indexed as all of that content is inside an <aside> element with data-pagefind-ignore set. Not sure if that's intentional.

More generally, Pagefind also won't do a great job of highlighting results for those images individually if that's what you're after, since they don't have their own pages. If you remove the data-pagefind-ignore tag though then that Recent Work page as a whole would come up as a result for "Wales" :)

[Phil89a]

All sorted now thanks 👍