Draft for search result bookcover image space reservation by lbartron · Pull Request #13129 · internetarchive/openlibrary

lbartron · 2026-07-07T01:53:12Z

This is a draft. Opening this PR early to check whether this per-book dimensions approach works before I finish tests and manual verification. Happy to make any changes that are needed.

Reserves layout space for cover images in list-view search results to prevent cumulative layout shift. I originally suggested a flat aspect ratio of 180 / 270. This PR uses the actual per-book cover_width and cover_height variables that are now available in Solr thanks to PR #12916.

When dimensions aren't available, which may be true for a large number of books due to the recentness of the added Solr fields, the CSS falls back to a 2/3 default ratio.

Technical

openlibrary/plugins/worksearch/schemes/works.py: request cover_width / cover_height from Solr via all_fields and default_fetched_fields.
openlibrary/plugins/worksearch/code.py: add both fields to get_doc()'s allow-list so they reach the template.
openlibrary/macros/SearchResultsWork.html: set --cw/--ch CSS properties from the selected edition's dimensions when available.
static/css/components/search-result-item.css: .searchResultItem .bookcover img now uses aspect-ratio: var(--cw, 2) / var(--ch, 3) with height: auto, replacing the old max-height: 300px cap.

Testing

Not yet done, but once approved, the following tests will be added:

Unit test coverage for the new Solr fields, get_doc(), and the WorkSolrBuilder/EditionSolrBuilder dimension properties.
Template test checking if the style attribute is set/unset correctly.
Manual CLS verification through Lighthouse once the local Solr version has cover dimensions to test against.

Screenshot

Will provide once the implementation is accepted or iterated on.

Stakeholders

@lokesh

…eight vars

openlibrary-bot · 2026-07-07T01:55:38Z

Thanks for the PR, @lbartron!

🤖 Copilot has been assigned for an initial review.

@lokesh is assigned to this PR and currently has:

4 open PR(s) of equal or higher priority to review first

Possible improvements for this PR

CI is failing — pre-commit.ci couldn't complete its check because this branch has merge conflicts with master. Please rebase: see the git guide.

PR triage checklist (maintainers / Richy)

PR description — not empty; explains what the change does and how to verify it
References an issue — PR body contains a #NNN reference
- Linked issue is triaged — has a Priority: * label (not just Needs: Triage)
- Linked issue is assigned — has at least one assignee
Commit history clean — no WIP/fixup/conflict noise; commit messages are meaningful
CI passing — no failing check-runs
Test cases present — if the change touches substantive logic, test coverage exists or is explained
Proof of testing — PR body includes a description of what was tested, a screenshot, or a video

Note

This comment was automatically generated by PAM, Open Library's Project AI Manager. PAM provides status visibility, performs basic project management functions, and gives actionable feedback so contributors aren't left waiting.

Copilot

Pull request overview

Reserves layout space for cover images in list-view search results to reduce cumulative layout shift (CLS) by using per-book cover dimensions (cover_width/cover_height) from Solr, with a 2/3 fallback ratio when dimensions are missing.

Changes:

Fetch cover_width/cover_height in the worksearch Solr scheme defaults.
Pass cover_width/cover_height through get_doc() so templates can access them.
Apply aspect-ratio in CSS and (when available) set --cw/--ch from the selected edition in the search result template.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
static/css/components/search-result-item.css	Switches cover rendering to `aspect-ratio` (with CSS var fallback) and `height: auto` for stable layout.
openlibrary/plugins/worksearch/schemes/works.py	Requests `cover_width`/`cover_height` from Solr as available fields and default fetched fields.
openlibrary/plugins/worksearch/code.py	Exposes `cover_width`/`cover_height` on the doc object returned to templates.
openlibrary/macros/SearchResultsWork.html	Sets per-result CSS variables (`--cw/--ch`) from the selected edition when available.

        first_edition=doc.get("first_edition", None),
        subtitle=doc.get("subtitle", None),
        cover_edition_key=doc.get("cover_edition_key", None),
+        cover_width=doc.get("cover_width", None),
+        cover_height=doc.get("cover_height", None),


      $ cover = get_cover_url(selected_ed) or "/static/images/icons/avatar_book-sm.png"
+      $ cover_w = selected_ed.get('cover_width')
+      $ cover_h = selected_ed.get('cover_height')
      <a href="$work_edition_url">
        <img
          itemprop="image"
          src="$cover"
+          $:cond(cover_w and cover_h, 'style="--cw:%s;--ch:%s;"' % (cover_w, cover_h))


 .searchResultItem .bookcover img {
  border-radius: var(--border-radius-thumbnail);
  max-width: 100%;
-  max-height: 300px;
  width: 175px;
+  height: auto;
+  aspect-ratio: var(--cw, 2) / var(--ch, 3);
 }


github-actions · 2026-07-15T03:19:44Z

Hello! This pull request has been marked as stale because it has been waiting for submitter input for 7 days. If you're still working on this, please add a comment to keep it open. Otherwise, a maintainer will have to determine how to proceed including reassigning or opening the issue for others to work on after communicating with you.
For guidance on contributing, please see our Contributing guide.

lokesh · 2026-07-17T13:11:04Z

Thanks for this work!

Three things to check on:
1. Drop the all_fields change
There are two different lists in the search scheme that sound similar. The default_fetched_fields is the 'what Solr should send back to us' and that is the one this PR needs to update so the cover dimensions arrive in the template. all_fields is what the user is allowed to search on. e.g. cover_width:[600 TO *] in these search input

2. Add object-fit: contain
If the loaded image isn't shaped 2:3, for example a square, I suspect it will get distorted to fit our aspect ratio. With object-fit: contain the image scales down to fit inside our 2:3 aspect ratio box while keeping its own real shape.

** 3. The cover-source mismatch**
A scenario we need to account for: the dimensions in Solr measure one specific image, the cover identified by cover_i. But the function that picks the src for the doesn't always return that image. It could hand back a different edition's cover or an Archive.org scan instead. That's the theory, in practice, this barely happens. And if use object-fit: contain, the image should still render fine and without distortion.

Overall direction makes sense to me. If you can test and gather some screenshots, we'll push this through.

github-actions · 2026-07-25T03:20:26Z

Hello! This pull request has been marked as stale because it has been waiting for submitter input for 7 days. If you're still working on this, please add a comment to keep it open. Otherwise, a maintainer will have to determine how to proceed including reassigning or opening the issue for others to work on after communicating with you.
For guidance on contributing, please see our Contributing guide.

lbartron added 4 commits July 6, 2026 18:13

Added cover width and height to all fields and default fetched fields

28a5f8a

Add cover width and height to web storage for search result cover image

6857cc9

Added cover dimension retreival and corresponding css styling

3fd0d27

Updated search result item bookcover img to use passed in width and h…

6d3604c

…eight vars

Copilot AI review requested due to automatic review settings July 7, 2026 01:53

github-actions Bot assigned lokesh Jul 7, 2026

Copilot started reviewing on behalf of lbartron July 7, 2026 01:53 View session

lbartron mentioned this pull request Jul 7, 2026

Reserve cover image space to prevent CLS in list view search results #12825

Open

openlibrary-bot added the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Jul 7, 2026

Copilot AI reviewed Jul 7, 2026

View reviewed changes

github-actions Bot added the Needs: Response Issues which require feedback from lead label Jul 7, 2026

github-actions Bot added the Stale label Jul 15, 2026

github-actions Bot added Stale Needs: Response Issues which require feedback from lead and removed Stale labels Jul 25, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Draft for search result bookcover image space reservation - #13129

Draft for search result bookcover image space reservation#13129
lbartron wants to merge 4 commits into
internetarchive:masterfrom
lbartron:12825/fix/search-cover-image-space

lbartron commented Jul 7, 2026

Uh oh!

openlibrary-bot commented Jul 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

lokesh commented Jul 17, 2026

Uh oh!

github-actions Bot commented Jul 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Uh oh!

Conversation

lbartron commented Jul 7, 2026

Technical

Testing

Screenshot

Stakeholders

Uh oh!

openlibrary-bot commented Jul 7, 2026

Possible improvements for this PR

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

lokesh commented Jul 17, 2026

Uh oh!

github-actions Bot commented Jul 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants