Member Avatar for kaylar

I built a website using HTML and CSS. I want to add a search box but Id like it to show pictures as well as the link to the item(s). I currently have a search box through freefind.com and it shows only the links.
Id like it to show each item with a pictures instead of the general page and no picture.
Is this even possible just using HTML and CSS?
Thank you for your help,
Kaylar

  • 2 Contributors
  • 4 Replies
  • 116 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by kaylar

Dani AI

Generated

Short answer: you do not need to hand-create a page for every possible query like "Green Latex balloons", but you cannot make a true, image-aware search using only static HTML and CSS. As hinted, you need either a search provider or some scripting that knows which image belongs to each item so results can show thumbnails. ’s idea of one page per search is unnecessary and not scalable.

Three practical approaches to get image thumbnails in results:

  • Use a hosted/site-search service that allows custom result templates or returns structured data. Make sure each item/page exposes a thumbnail in metadata (Open Graph, schema.org, etc.) so the provider can pick it up; see the Open Graph spec and schema.org ImageObject for the right tags. (ogp.me, https://schema.org/ImageObject)

  • For static sites or small catalogs, build a simple JSON index (title, URL, thumbnail URL, keywords) and do client-side searching with a library like Fuse.js or Lunr.js. The search UI can read the JSON and render results with thumbnail images — no server-side database required. (https://fusejs.io/, https://lunrjs.com/)

  • If you run a dynamic site (PHP, Python, etc.), index items into a database and render result pages on the server — this is the most flexible for large catalogs and lets you control thumbnails, ranking and pagination.

Quick checklist and troubleshooting tips:

  • Each product/item should have its own canonical page or an index entry that includes an accessible thumbnail (absolute URL), alt text, and metadata.
  • Ensure images are not blocked by robots.txt and are reachable by the search provider.
  • If thumbnails don’t appear, inspect the provider’s returned data (JSON/HTML) to see whether it received an image URL; re-indexing may be needed.
  • For hosted options, read the provider’s docs (for example, Google Programmable Search) to learn how to surface image metadata in results. (https://developers.google.com/custom-search/docs/overview)

Choose the approach based on site size and how often content changes: small/static → JSON + client-side search; medium/large → hosted search or server-side indexing.

Recommended Answers

All 4 Replies

Member Avatar for EvolutionFallen

Is this even possible just using HTML and CSS?

It's not likely. To get the search box working in the first place you probably have to paste a snippet of code (PHP or the like) into your website.

Id like it to show each item with a pictures instead of the general page and no picture.

While their website says you can customize the search results, it doesn't say specifically that you can add pictures to them:

Easy-to-use FreeFind wizards give you complete control over the look of your search results including your own titles, text, logo, background, and more.

It might be possible, I've never used them before. But chances are you'd have to code something like that yourself, I think.
Hope that helps.

- Z

Member Avatar for kaylar

Yeah Ive edited the code from freefind as much as I can. I dont have to use freefind codes at all. I am just wondering if its even possible to do in HTML and CSS?
Thanks
Kaylar

Member Avatar for EvolutionFallen

Yeah Ive edited the code from freefind as much as I can. I dont have to use freefind codes at all. I am just wondering if its even possible to do in HTML and CSS?
Thanks
Kaylar

Do you have an example of what you're trying to accomplish?
If you can modify the code of the results screen, just have it print out an <img> tag for each result with the src attribute set to the path to the respective image. You can use CSS to float the image to the left or right of the result.

Member Avatar for kaylar

Do you have an example of what you're trying to accomplish?
If you can modify the code of the results screen, just have it print out an <img> tag for each result with the src attribute set to the path to the respective image. You can use CSS to float the image to the left or right of the result.

That would mean that I would have to create a page for every search I can think of correct? Say I wanted to search for Green Latex balloons. I would have to make a page that has anything with those keywords on it and link it to the search somehow so that it only shows that page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.