Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide a medium size image in whitehall image definitions #2534

Merged
merged 2 commits into from
Oct 30, 2023

Conversation

tunylund
Copy link
Contributor

@tunylund tunylund commented Oct 30, 2023

Public pages look better when they display images with various options for different devices. For example if an img element provides a srcset attribute, high pdi phones can opt to use the higher resolution image instead of a smaller image. Atm Topical Event pages use this. It is desireable to have more pages use this feature.

Whitehall needs to publish each image resolution and that requires this schema change.

Trello

type: "string",
},
},
"$ref": "#/definitions/image",
Copy link
Contributor

@jkempster34 jkempster34 Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a JSON schema amateur, so just checking my understanding of this.

  • Image is NOT a required property in either the shared definition or in the topical event (before this change)
  • If the shared definition is included, image can still be optional, but if the image object is present, then url is required
  • Not all topical event have images, which is fine because we handle that in the presenter

Can you deploy this to integration and try to publish a topical event with an without an image to make sure?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes i think you're understanding is correct.

totally, i'll deploy to integration and test it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested and nothing breaks, but i need to deploy this pr in order to actually see values for the new images alphagov/whitehall#8432

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup, works good
image

Copy link
Contributor Author

@tunylund tunylund Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type: "string",
},
},
"$ref": "#/definitions/image",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this change to topical events go in a separate commit?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done 👍

@@ -35,6 +35,11 @@
type: "string",
format: "uri",
},
medium_resolution_url: {
Copy link
Contributor

@jkempster34 jkempster34 Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this definitely applicable/useful to all Whitehall schema types that include this definition?

Copy link
Contributor Author

@tunylund tunylund Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had a chat with some frontendy people - Kuba, Max - and they clearly expressed desire to provide srcset attribute in the ui so that different devices could choose the most appropriate image size. For example the Coronation page was difficult to make look nice because the image in its small resolution looked pixelated.

I think this is useful for all types because with this change, in the future, all types could publish at least 3 sizes, and then rendering world could utilize those 3 sizes to create a srcset attribute.

Please see this pr for an example: alphagov/collections#3426

@tunylund tunylund force-pushed the provide-more-image-resolutions-for-topical-events branch from 39dcd91 to 4d22e87 Compare October 30, 2023 16:43
.idea/.gitignore Outdated
@@ -0,0 +1,8 @@
# Default ignored files
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A bunch of IntelliJ files have snuck in here.

Idk whether we should choose to add them to the .gitignore, or whether everyone should do https://sebastiandedeyne.com/setting-up-a-global-gitignore-file

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh gosh how embarassing

Tuomas Nylund added 2 commits October 30, 2023 16:51
Public pages look better when they display images with various options for different devices.
For example if an img element provides a srcset attribute, high pdi phones can opt to use the higher
resolution image instead of a smaller image. Atm Topical Event pages use this. It is desireable to
have more pages use this feature.

Whitehall needs to publish each image resolution and that requires this schema change.
Topical Event pages use srcset attribute to provide different image resolutions
for different devices. This changes allows Whitehall to publish 3 different image resolutions
so that topical events can then use them.
@tunylund tunylund force-pushed the provide-more-image-resolutions-for-topical-events branch from 4d22e87 to 878e8d2 Compare October 30, 2023 16:51
Copy link
Contributor

@jkempster34 jkempster34 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM (conditionally on the result of the testing in integration).

🙌

@tunylund tunylund merged commit d894009 into main Oct 30, 2023
37 checks passed
@tunylund tunylund deleted the provide-more-image-resolutions-for-topical-events branch October 30, 2023 17:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants