Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
The current screenshots for all themes are not sharp on Retina displays.
Proposed resolution
We should re-create all screenshot.png files and make them 588×438. No CSS needs to be touched because image dimensions are already hardcoded in the CSS.
Please take a look at this page do see how screenshot should be created.
| Comment | File | Size | Author |
|---|---|---|---|
| #25 | drupal-hidpi_screenshots-2471611-24.patch | 186.66 KB | yannickoo |
| #22 | retina-ready-theme-screenshot-2471611-22.patch | 324.95 KB | MathieuSpil |
| #19 | retina-ready-theme-screenshot.png | 50.13 KB | Manjit.Singh |
| #14 | retina-ready-theme-screenshot-2471611-14.patch | 402.55 KB | MathieuSpil |
| #12 | retina-ready-theme-screenshot-2471611-11.patch | 406.53 KB | MathieuSpil |
Comments
Comment #1
yannickooComment #2
lauriiiI think this issue would be good for a new contributor
Comment #3
yannickooComment #4
yannickooWould be great if someone applies the latest patch in the linked issue so that we have the latest version of Stark then.
Comment #5
yannickooComment #6
axe312 CreditAttribution: axe312 commentedPlease use image file size optimization tools to save filesize before you commit the screenshots. ImageOptim is a very neat drag&drop solution.
The tool creates no visual regressions and the images work on every device. (Not like tinypng.com which will break on Opera Mobile and may create visual regressions)
Comment #7
LewisNymanComment #8
MathieuSpil CreditAttribution: MathieuSpil commentedComment #9
MathieuSpil CreditAttribution: MathieuSpil commentedApplied the patch (mentioned in #5) before I did all this, so the Stark-theme doesn't has styling.
Also losslessly optimised with ImageOptim.
Uploaded the files as attachment for reference.
Stark:
Seven:
Bartik:
Comment #10
yannickooReally really cool!
It would be great when you resize the browser so that both columns are visible :)
Comment #11
MathieuSpil CreditAttribution: MathieuSpil commentedComment #12
MathieuSpil CreditAttribution: MathieuSpil commentedRedone the screenshot of the Seven-theme:
That is the only thing that changed in the patch.
Comment #13
MathieuSpil CreditAttribution: MathieuSpil commentedRe-done all the screenshots with the help of yannickoo.
Comment #14
MathieuSpil CreditAttribution: MathieuSpil commentedAdded a screenshot for the Classy-theme and redone the screenshot for the Stark-theme (in colaboration with yannickoo)
Comment #15
axe312 CreditAttribution: axe312 at Wunder commentedHiDPI is the official name for screens with a higher resolution per inch. Retina is just a word created by Apple for this. Thats why I changed the tag.
Comment #16
axe312 CreditAttribution: axe312 commentedComment #17
yannickooThis was really time consuming but thank you so much again Mathieu for your time :)
Before
After
Comment #18
MathieuSpil CreditAttribution: MathieuSpil commentedJust a reminder to also update the documentation on https://www.drupal.org/node/647754.
Comment #19
Manjit.Singhdon't know, but facing this interesting errors while applying #14 patch :(
anything wrong with command ?
Comment #20
yannickooI think this is coming from binary image files.
Re #18: We could create a small screencast for this as well as this is kinda difficult :D
Comment #21
LewisNymanI'm having trouble applying the patch as well, did you use the special binary flags to create the patch? See the instructions here: http://mediatribe.net/en/node/63
Comment #22
MathieuSpil CreditAttribution: MathieuSpil commentedCreated a patch with git diff --full-index --binary > retina-ready-theme-screenshot-2471611-22.patch
I can see the change in the patchfile itself, but not sure if it will work better.
Comment #23
LewisNymanGreat, someone need to manually test this patch
Comment #24
maijs CreditAttribution: maijs commentedThe patch in #22 applies and it looks good to my eyes on retina display.
Comment #25
yannickooI have created a new patch which reduces the file size of all images so that we have 144 KB in total now :)
Comment #26
maijs CreditAttribution: maijs commentedTested again with patch in #25. Works as advertised.
Comment #29
maijs CreditAttribution: maijs commentedQA testbot failure with applying the patch in #27 seems to be a mistake on testbot part. Having done manual testing and new "passed" status, setting back to RTBC.
Comment #30
Manjit.SinghQA testbot fails the test but seems like #25 patch is passed with green signal ;)
But why is it so ? I mean when test fails, color of patch changed to red... but here scenario is totally different :P
Comment #31
maijs CreditAttribution: maijs commentedThe patch in #25 was green two days ago but turned red yesterday (and this happen in multiple issues), setting the issues status back to Needs work. Did a manual test for patches and sent the patches for retesting, they all came back green again. Hence the manual reset of the status as there's no indication that the patch is bad.
Comment #32
xjmThis issue only changes images in the user interface, so per https://www.drupal.org/core/beta-changes, this can be completed any time during the Drupal 8 beta phase.
Committed and pushed to 8.0.x. Thanks!
Comment #34
xjmWas wondering how long it'd be 'til I did that.