Automattic / Automattic/jetpack

Jetpack Search -> Photonized image urls in search results don't contain ?ssl=1 param

Open
#34,055 2 comments 0 reactions 0 assignees View on GitHub
[Feature] Search [Package] Search [Plugin] Search [Pri] Normal [Status] Priority Review Triggered [Status] Stale Bug Customer Report [LEGACY] Instant Search Triaged
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.