Creating Theme Thumbnails
Prerequesites
Steps
- Activate the theme for which you wish to create thumbnails.
- Open your test site’s homepage in Firefox Developer Edition.
- If you’re logged in, add
/?_bare to the end of the url to remove the admin toolbar.
- Open Responsive Design Mode (cmd + opt + m).
- Above the responsive page frame, enter the page dimensions for your screenshot (for mobile, 320x576; for desktop, 1280x800).
- Ensure the control bar above your page’s dimensions says “DPR: 1”. If it says something else (like “DPR: 2”), click it and select “DPR: 1” instead.
- On the right of the control bar above your page dimensions, click the camera icon.
- Open your Downloads folder to see the screenshot.
- Open ImageOptim and drag your new screenshots into the software.
- Observe that the screenshots’ file sizes have been greatly reduced.
- Move the files to the root folder of the appropriate theme (ex. SUThemeGumwood/).
- Rename the screenshots to
desktop.png, phone.png, desktop~asc.png, etc, as appropriate.