UX oriented alternative to select with images


#1

using selects with long lists in mobile apps doesn’t seem good UX practices. Because the user has to click to open the dropdown, then scroll, then choose, there are several article on this on the web.

In my case, I am using 2 <select> buttons, as you can see in the screenshot below : “Brand” and “Pros”, as “filters” for the collection-repeat list of surfboards below.

Could you please advise me on a better solution to allow the user to filter my long collection-repeat list, by choosing within two lists with more than 20 items ?

Nota: the items in these 2 Brands and Pros lists contain an image (the photo of the brand or pro) and the name of the brand or pro.