-
Notifications
You must be signed in to change notification settings - Fork 193
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
[RFC] Set Recommended Sizes for extension store visual assets #456
Comments
I have to take my hat off to you, @cdowdy … this is one awesomely written RFC. 👍 I'm banned by myself, and potentially others, from weighing in on UI debates… But from the point of view of the PHP to handle the keys changing to arrays, that's an easy type check so all good. and you've all but written the docs already. Also 👍 |
Just plain awesome. This is a more exhaustive and complete RFC than I've seen in basically any bolt repo. 👍 One quick thing, if we could add a link/reminder for this at https://extensions.bolt.cm/submit (after it's in the docs) that'd be awesome too. |
Thanks @GawainLynch and @SahAssar I'm ready to write the docs up after a good recommended screenshot size is determined. I'd rather err on the side of caution/too big then have a too small recomended image. The UI doesn't need to change.. I threw in the anchor/lightbox pattern as supplementary to the whole RFC. It's more of a "nice to have" thing because whats currently there works™ haha. What page do you all thing this would be more appropriate? Moving to the marketplace page or Publishing to the marketplace? |
O and here is how the "icons" for themes would look. I took "ion" from the recently added themes section and cropped the header/nav out. Instead of linking to this: https://raw.githubusercontent.com/nestordedios/bolt-theme-ion/master/screenshots/screenshot1.png and the actual repo link The new style im proposing would use this image as the main/front page theme "icon" |
Hey, thanks for the awesome RFC. Most of it looks good, but I am not in favor of changing the composer.json structure because it will be a hell to maintain that on the store if we want the old structure still working. Except that, I like the recommendations on the RFC. I would also like to see a hint on avoiding the following type of screenshot: |
@PhillippOhlandt yeah I agree with the the multiple thumbs for the screenshots. That is: having every screen shot have a thumbnail version creates a mess. As for the 3 icon sizes that was just an extra and not part of the entire RFC. It was a more "nice to have" feature. I don't want to introduce a breaking change or something that becomes maintenance hell. You all have enough on your plates! The creation of the Icons could be automated because yeah saying hey make these three (even though a small number) could become tedious and annoying to devs who push a lot of themes or extensions. I think it was you Phillip who created a nut like command feature for creating extensions? I just thought of building an extension that could add a back-end page and/or a nut command that does a extension/theme pre-publish check. It would check the "extras" part of composer.json and if it found a bolt-icon entry make two more at the sizes we want and save them to the icon save path. It could also look for screenshots and if they aren't there spawn a headless browser like phantomjs (one for php here ) and snag one. I've never seen the boltthem.es site before that's pretty neat. anyways there goes me rambling again and offf topic... back on topic! What would we call that long repeated screenshot Phillip linked too? Don't show repeated content? If you're fetching a list of items only show the first? I'll update the RFC copy and post it here in a bit that way you all can read it and add changes/suggestions before deciding and making a pullrequest. |
Market Place Visual Assets Best Practices:When you are ready to submit your Extension or Theme to the Bolt Marketplace it is recommended you have the following: Icons
If you don't provide an Icon Bolt's default marketplace icon will be used Icon Production Assets:
Screenshots You should provide at least one screen shot for your Theme(s) and Extension(s). General recomendations for both an extension and theme screenshots are:
Themes Recomendations for your theme screenshots:
Extensions
this section below could probably not be included Google Chrome can take responsive image shots (not fullscreen without an extension) through their dev tools:
Before Submission After you have created your marketplace assets we ask that you optimize your images. If it's a PNG or JPG image you can use tinypng.org |
Ok I just tested out an svg as an icon. Currently you can't use an SVG for an icon because its sent / delivered with the wrong mime type Here is the response headers:
So that stinks... I'll have to remove all the references to SVG. Edit: if you use https://rawgit.com/ for icons then the appropriate headers are sent. There's a long standing bug on githubs issue tracker referencing SVG and wrong content type header |
Ok, I reviewed the text. I like the recommended widths and heights, especially for the first screenshot of a theme. Could you move the text for the first screenshot of a theme to the screenshots section? It sounds a bit confusing in the Icons section and I don't want people to set that first screenshot as For the links to production assets. We only have this: For the screenshot section: Personally I like the "How To Take A Screenshot" section, I would let it in there. Soo, if you adjust the little things above and remove the SVG references I would give it a go. I think the text is long enough to have it's own page in the docs. We could put it in "Extending Bolt > Basics" and link to it from the following page/section: |
You're referencing this part right?
If so yeah I can see how that could be confusing. I'll remove the references to the SVG files unless you all think moving to the cdn rawgit offers is worthwhile (example url here referencing the most recent tag/release: https://cdn.rawgit.com/cdowdy/bolt-html5-video/v1.0.1/screenshots/html5-videos-icon-2.svg ) Also have to make sure to offer an example "extras" portion of composer.json that says the cropped image needs to be first in the screenshots section. Since this image is used as the "icon" on the main extension page and the actual icon is used as the icon on the details page: ie: https://extensions.bolt.cm/view/dsduit/helios-html5up and possibly change the template logic to excluded the first image in the array or ones with "-cropped" in it but that is easier said then done. Thanks @PhillippOhlandt for the pointers and I'll get on to the updates. |
@cdowdy important change. Set the icon size to 400x400px, because the store homepage shows them as 3XX x 3XX px at some viewports. |
its in for some time now 👍 |
This would be the recommended sizes for assets used in the extension store.
Currently on the main extension store page: https://extensions.bolt.cm/ icons for extensions are scaled by the browser to ~200x200px and themes to ~400px. This can make the site slow on slower connections and is wasted browser processing.
What I'm proposing is to have in the docs under Themes and Extensions Publishing to the marketplace a set of recommended sizes for Icons. These aren't set in stone or checked server side. It's just what is already being done by the CSS on the extension store and will make things more efficient and not waste bandwidth and make things a little easier for the developer knowing what the the store prefers .
Icons
For Extensions:
For Themes: Currently the first listed screenshot in composer.json is used on the main page:
Those above are strictly used for "icons" on the main page.
Screenshots
For the theme and extensions "details" page .. examples: File Browser and a theme Bootstrap theme
The icon used in the upper left hand corner would be the 200x200px icon. This is scaled down to ~60x60px. Using the 200px image is a lot better than scaling down 800+px images
Screenshots could be recommended for at least 1000px wide (to account for HIDPI screens) or to a specific aspect ratio.
Examples:
How This Would All Look on Bolt.cm/docs
The below copy could possibly go in one of two places.
Market Place Assets Best Practices:
When you are ready to submit your Extension or Theme to the Bolt Marketplace it is recommended you have the following:
Icons
If you don't provide an Icon Bolt's default marketplace icon will be used
Icon Production Assets:
Screenshots
You should provide at least one screen shot for your Theme and Extensions.
Before Submission
After you have created your marketplace assets we ask that you optimize your images.
If it's a PNG or JPG image you can use tinypng.org
If its an SVG image you can use svgomg online
How the composer file would look:
Other considerations.
I left the screenshot at 1000px wide in the copy above because Its hard to determine what an appropriate screenshot width for a theme or extension should be. If its a theme or extension with text in the screenshot then anything below say 500px could become hard to see on small screens or blurry if scaled up for HIDPI screens. Then again these aren't hard numbers just recommendations so whatever is thought to fit best within the marketplace theme would suffice.
If SVG is used then scaling shouldn't be an issue. If a PNG is used then HIDPI screens may get a muddled image. We could implement
<img srcset=""
and use the screen density descriptor ie:this would also require a change to the composer.json for the extension or theme and possibly the twig markup
If a developer doesn't submit all of the icons then it'll fallback to the normal bolt-icon.png image and whatever size it is. I don't know if this is a breaking change though moving this too an array.
As Phillip mentioned in slack potential theme users would want to see a large picture. So recommending a screenshot size is nice but if a user submits a small image for the screenshot it may be hard to see since we aren't going to impose any server side checks. As the marketplace is right now a user would have to right click and open the image in a new tab.
So we could either wrap the image in an anchor and link to the full size image or use a lightbox. This though would require extra markup by the theme developer. They'd have to
also the screenshots section in composer would become massive and messy with a lightbox/anchor open to new page with image pattern
Alternatively we could just wrap the image in an anchor/lightbox and use just the provided screenshot for both the "thumb" and for the "fullres" image like
Usually I would also recommend responsive images (similar to the icons above under "icon considerations") and use screen density as the descriptor but this too has the same issues as the lightbox/anchor method above and it makes the developer create a crap ton of images. Again not ideal. It could also create a mess in the composer.json file and you don't want to go adding stuff there all willy nilly
The text was updated successfully, but these errors were encountered: