Automattic / Automattic/jetpack
Jetpack Search -> Photonized image urls in search results don't contain ?ssl=1 param
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Search
### Quick summary
The Jetpack Search index persists urls without the protocol.
```
"image": [
{
"url": "adventuregearsouth.com/wp-content/uploads/2023/05/Omeals-Pasta-Fagioli-Mockups-2020-front.png"
}
],
"has": {
"gallery": 0,
"image": 1
},
"featured_image": "adventuregearsouth.com/wp-content/uploads/2023/05/Omeals-Pasta-Fagioli-Mockups-2020-front.png?w=1500",
```
During rendering Jetpack search uses the url from the index to generate the [image](https://github.com/Automattic/jetpack/blob/10bbdccba045f173f484b23ddb749b9919fe1810/projects/packages/search/src/instant-search/components/search-result-product.jsx#L74) via the [PhotonImage](https://github.com/Automattic/jetpack/blob/10bbdccba045f173f484b23ddb749b9919fe1810/projects/packages/search/src/instant-search/components/photon-image.jsx#L18) component that calls [use-photon](https://github.com/Automattic/jetpack/blob/10bbdccba045f173f484b23ddb749b9919fe1810/projects/packages/search/src/instant-search/lib/hooks/use-photon.js#L26) and subsequently [photon](https://github.com/Automattic/wp-calypso/blob/b9d11f5e83540a22ecdbf6a237839d684d4c9977/packages/photon/src/index.ts#L80) to generate the final link
photon uses the protocol of the passed url to determine if it should append the ssl=1 parameter to the final url. As no protocol is provided it is not appended and can cause images to not be rendered on sites.
The PhotonImage component; use-photon, or photon functions need to be updated so that if no protocol is provided in the url that the current protocol is used `window.location.protocol`
### Steps to reproduce
I haven't generated standalone testing steps for this but the details are outlined in 7186771-zen and the relevant linked conversations.
### A clear and concise description of what you expected to happen.
Search Results should properly display images when utilizing Photon CDN.
### What actually happened
Search results display broken images when utilizing Photon CDN.
### Impact
Some (< 50%)
### Available workarounds?
No but the platform is still usable
### Platform (Simple and/or Atomic)
_No response_
### Logs or notes
_No response_
Contributor guide
Research direction
Start with search-result-product.jsx, photon-image.jsx, and use-photon.js, then trace how they call the photon implementation linked in Calypso. Check how a protocol-less indexed image URL is handled and verify that rendered Photon URLs include the expected SSL parameter using the current browser protocol; inspect nearby tests for the completion check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100