RE: Search Results Page Design

[fbri]

Hi!

I am trying to implement HubSpot site search on a portal and I am having an issue with the search results page.

Basically, the text excerpt has a different length for each result so I would like to set a fixed length for this, in order to make the design more consistent.

Does anyone know how to edit the search results module in order to achieve this?

Thank you!

[fbri]

Hi There,

In case you are interested, I think this topic has been discussed here.

Francesco

[Jsum · Accepted solution]

@fbri @tjoyce,

I haven't really had the chance to play with the new site search but I've been meaning to. I cannot seam to find any developer documentation on it, just simple instructions.

I added both the search and results module to a template then viewed source for the action menu in the design manager:

That is the markup for each module.

Here is the data from the developer info:

So my first instict would be to try to export the results module to the template context in a custom module. I would then use the pprint filter to view what data is available using a for loop. Once you have your data tokens for use in the for loop you can then use any filter on them, including truncate. That would allow you to limit the character count in the results.

I haven't tried this yet, and I would almost say it will go the way of advanced menus where you can't do what I described above, or maybe you can with advanced menus with the new design manager. I know they have updated advanced menus but I haven't had the time to really test things there either. 

I always recommend using the server over the browser in these types of situation, provided it's possible. Your other option is to use some javascript, it just has to fire after the search results are loaded so it could take fractions of or whole second(s) for the results to 'snap to'. It's better than nothing though.

Need help? Hire Us Here

[fbri]

Hi @Jsum

Thanks for your explanation!

This is very helpful, I will follow your recommendations and try with the custom module then. 🙂

Best,

Francesco

[Jsum]

@fbri,

Let us know what you find. If you absolutely can't figure it out let me know and I will take some time to dig into it. I need to anyways so just give me a reason.

Need help? Hire Us Here

[tjoyce]

@fbri

If you are just looking to have 1 line of text there, a simple CSS solution would be to implement: 

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;

You can see an example in this codepen demo 

If you are still looking to loop through the search results though, I am not familiar with that HUBL code but @Jsum might be.

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[fbri]

Hi @tjoyce,

Thank you for your quick reply, this CSS trick is very helpful!

However, I think I would probably need more than 1 line of text so I am wondering if there is any HubL (or JavaScript) fix to this.

Thank you