search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 797 forks source link

Search: use mshots for expanded/grid results that don't have images #18154

Open gibrown opened 3 years ago

gibrown commented 3 years ago

I'm uncertain about this solution, but there is at least one case it would help.

https://dotcompatterns.wordpress.com/ has all the wpcom block patterns. They are implemented as blocks so there is no image for us to show and we really can't take the content and render them in results. That means that the results look like this:

image

When the main page is this https://dotcompatterns.wordpress.com/2020/06/16/audio-player/

What if when there is no image url we just use an mshot url of the page the link goes to. e.g. a result for the Google homepage would have this image next to it: https://s0.wp.com/mshots/v1/http://google.com?w=500

It may make the results look a lot better. An image is worth a thousand... This may also improve our search results for products or mixed products/articles.

More mshots info:

cc @jeffgolenski

jeffgolenski commented 3 years ago

@gibrown

What if when there is no image url we just use an mshot url of the page the link goes to.

Is there anyway we could create a dyanmic screenshot of just the block area (div) and display that, rather than the entire page screenshot?

gibrown commented 3 years ago

Is there anyway we could create a dyanmic screenshot of just the block area (div) and display that, rather than the entire page screenshot?

Unfortunately not really. The only controls I see in the code are width/height of the image (w and h) and width/height of the viewport (vpw and vph). Adjusting the viewport would maybe help? Could even zoom in to the mobile view since that will use the screen better. Example: https://s0.wp.com/mshots/v1/https://jetpack.com/features/traffic/related-posts/?w=500&vpw=300

I guess in theory we could do some magic to crop the image, but I'm not sure how that would go if we tried to deploy something like (...grabs first link off Google) https://github.com/jwagner/smartcrop.js/. @jsnmoon @bluefuton this is crazy right?

Another case to think about would be if we switched jetpack.com to use the expanded view and implemented this mechanism, then this middle result:

Screen Shot 2020-12-22 at 1 44 49 PM

Would have one of these images:

We could also fall back to the site screenshot for the cases where the image dimensions were really absurd.

jeffgolenski commented 3 years ago

Aside from that, I'm wondering if we could harness Gridicons or something to generate fall-back placeholder images for when we're unable to find a featured image.

gibrown commented 3 years ago

Ya, we did discuss something like that too. May need some new ones and to figure out the logic of what to display better. But we are working towards extracting info about what blocks are in each page so we could trigger on that info.