Complete (and update!) images of each addon

[Hans5958]

[!IMPORTANT] Updates are welcome, and we need it. Some of the focus are...

1. update them to use the new purple color scheme
2. redo them with better quality/dimensions.

This is an issue tracking about the addon screenshots. It is mainly displayed on the addons page.

For discussion related to adding images or media to the extension itself, see ScratchAddons/ScratchAddons#364.

You can add your images by following either of these two options.

1. Create a fork, add your images on /site/assets/images/addons, and create a pull request.
2. Comment and attach the images on this issue. Someone will add it for you.

Continuation of ScratchAddons/website#61 for website-v2.

Guidelines

The images for the addon are following these rules:

1. Post the addon ID, and preferably also the addon name. The addon ID is colored gray underneath the addon name.
2. The image has an extension/a format of .png.
3. The image has an aspect ratio of 4:3 and a size of at least 400x300.

[!NOTE] The recommended sizes are 800x600 to 1200x900, depending of the size of the subject, and the display pixel ratio (DPI) of 3 to 4. Other sizes are still allowed, as long as the ratio is still 4:3 or 1.3333... (e.g. 400x300, 480x360, 800x600).

Zooming in/out using the browser is permitted, including setting the display pixel ratio using browser tools. See this comment as a suggestion.

4. The image contains a sample of what the addon can offer without any other effects from other addons.

[!NOTE] Disable other addons so that the screenshot only shows one addon only. One addon for one image! We don't want confusion.

5. The image has minimum edits, but still made the image to be not awkward.

[!NOTE] If an edit can be made to improve the visibility of addon behaviors, you may do it, while still keep in in the minimum. This includes...

1. Have additional markers (red cross for removed elements, circle for very, very subtle changes, etc (example from disable-auto-save)
2. Make a side by side comparison if needed. (example from fix-uploaded-svgs)

If possible, the image is only cropped, without any resizing or other edits. As mentioned, zooming is allowed.

6. If possible, avoid having user-generated content on the image (user avatars, user names, project thumbnails, project name, etc)

[!NOTE] In cases when the editor is needed, but the address bar would be in frame, using https://scratch.mit.edu/projects/editor/ is suggested.

Progress

Missing Addons (3)

Addons that have never gotten an image.

• [ ] collapse-footer
• [ ] paint-skew
• [ ] place-backpack-code-at-cursor

Improve (1)

Has other addons in the background that lose the addon's focus, or is otherwise a bad quality image

• [ ] disable-auto-save (The cat doesn't need to be there)

Outdated (3)

New updates have occurred to this addon that makes it look or act differently.

• [ ] forum-search (https://github.com/ScratchAddons/ScratchAddons/pull/7727)
• [ ] infinite-scroll (https://github.com/ScratchAddons/ScratchAddons/pull/6426)
• [ ] mediarecorder (https://github.com/ScratchAddons/ScratchAddons/pull/7586)
• [ ] Screenshots that still use blue

Hard to Display (9)

Not a priority. You can probably ignore this section, unless you found a way to make this displayable.

• [ ] ctrl-click-run-scripts (https://github.com/ScratchAddons/ScratchAddons/pull/2555)
• [ ] ctrl-enter-post (https://github.com/ScratchAddons/ScratchAddons/pull/2986)
• [ ] editor-number-arrow-keys (https://github.com/ScratchAddons/ScratchAddons/pull/6020/)
• [ ] faster-project-loading(https://github.com/ScratchAddons/ScratchAddons/pull/5800/)
• [ ] fix-editor-comments (https://github.com/ScratchAddons/ScratchAddons/pull/3701)
• [ ] fix-pasted-scripts (https://github.com/ScratchAddons/ScratchAddons/pull/2470)
• [ ] move-to-top-layer (https://github.com/ScratchAddons/ScratchAddons/pull/5904)
• [ ] no-script-bumping (https://github.com/ScratchAddons/ScratchAddons/pull/3241)
• [ ] redirect-mobile-forums-v2 (https://github.com/ScratchAddons/ScratchAddons/pull/6915)

[cobaltt7]

Updated list.

@OregSamSas Thanks for those creative images!

A few comments:

@Norbiros - Vertically centered please, not horizontally.

@Norbiros - Please take it again without Scratch 2.0 -> 3.0 enabled.

@OregSamSas - This is not what the addon does. The addon makes sounds when blocks are connected or deleted.

[OregSamSas]

@RedGuy12

@OregSamSas - This is not what the addon does. The addon makes sounds when blocks are connected or deleted.

I know what it does, but you are right it is surely not a good way to display the addon's features, because it (I mean the image) is quite abstract, and hard to understand (I totally see it now). Even so let me explain: the point was I duplicated some blocks so it ran the script which had just empty "start sound" blocks, which wouldn't make the editor display sounds normally, but with editor-sounds enabled, it did because of duplicating, so the little speaker icon showed up on top of the tab. I noticed, why is this isn't the appropriate screenshot, but the most unintelligible one, because nobody can figure out the extension's additional options by seeing just this image.

[CST1229]

I know what it does, but you are right it is surely not a good way to display the addon's features, because it (I mean the image) is quite abstract, and hard to understand (I totally see it now). Even so let me explain: the point was I duplicated some blocks so it ran the script which had just empty "start sound" blocks, which wouldn't make the editor display sounds normally, but with editor-sounds enabled, it did because of duplicating, so the little speaker icon showed up on top of the tab. I noticed, why is this isn't the appropriate screenshot, but the most unintelligible one, because nobody can figure out the extension's additional options by seeing just this image.

Maybe showcase the tab playing sound while the block is deleted in the block palette? (because connecting blocks is instant)

[OregSamSas]

Thanks @CST1229, you are a genius. I took it again but im not sure that with or without a censored address bar is it better. I prefer not to have any text inside the address bar, because it does not divert the attention then. (If it's not the case then I can upload the original screenshots too.) The second image shows better the block deletion i think, but I uploaded both, so I'll send them all then.

editor-sounds:

[CST1229]

Thanks @CST1229, you are a genius. I took it again but im not sure that with or without a censored address bar is it better. I prefer not to have any text inside the address bar, because it does not divert the attention then. (If it's not the case then I can upload the original screenshots too.) The second image shows better the block deletion i think, but I uploaded both, so I'll send them all then.

editor-sounds: -snip-

It should probably be a larger stack and more to the right because the green flag clicked block covers a lot of it up.

[OregSamSas]

Maybe this one?

editor-sounds:

Better text suggestions are welcome @CST1229 :)

[Pepsi1333]

Sooo I tried to make one for the color-inputs addon

[RIMOPA]

Zoomed custom-block-text:

[RIMOPA]

onion-skinning:

[Secret-chest]

Maybe this one?

editor-sounds:

Better text suggestions are welcome @CST1229 :)

Though the blocks are behind the palette. They are not being deleted.

[DNin01]

I got images of the color-inputs and sounds-duration addons. Both 400x300, cropped to a multiple of that size (so no distortion). The text in the one of color-inputs might be a bit small, though.

[Hans5958]

Heads up: I got some updates on the rules which you can check now. Also, I will start merging some of the images. Some comments from me are as follows.

editor-sounds (cc @OregSamSas @Secret-chest):

I have made my own for this and I think this is what I will use. The way I think is that the action should also pictured on the image. About the URL I would say you can just visit https://scratch.mit.edu/projects/editor/ so you don't need censoring the URL, but that's just me.

color-inputs (cc @Pepsi1333 @DNin01):

I would take @DNin01 for this, but I agree the text is too small. So I have made another one for it. Another tip here is you can zoom in or zoom out on the browser, so you wouldn't need to scale it externally (aka you scale the source instead of scaling the screenshot)

custom-block-text (cc @RIMOPA):

I would reject it on the basis that you cropped and scale it. However you can try zooming in your browser if you want to try again.

onion-skinning and sounds-duration looks fine to me.

[Hans5958]

Also updated some images to solve some problems listed.

[Samq64]

6 more images

`debugger`:  `animated-thumb`:  `media-recorder`:  `scratchr2`:  `material-forum-editor-button`:  `scratchstats`: 

[Samq64]

Added

`default-costume-editor-color`:  `editor-buttons-reverse-order`:  `hide-stage`:  `one-click-studio-invites`: 

Updated

`cloud-games`:  `forum-quote-code-beautifier`:  `hide-flyout`:  `project-info`: 

[Hans5958]

@Samq64 You can skip commenting here if you can create a PR. You can reference this issue on the PR instead.

[GrahamSH-LLK]

Hi all, Addon images are going to be used inside SA in a future update. In preparation, it would be great if we could get all of the addons with an image! Thanks!

Hans5958: Adding this for recognition. As of writing this edit, this is just a plan of him and not something formal. Anyone who is interested with the usage may track it on ScratchAddons/ScratchAddons#4991, but in no way this has some kind of urgency.

[mxmou]

Hi all, Addon images are going to be used inside SA in a future update. In preparation, it would be great if we could get all of the addons with an image! Thanks!

Some addons don't do anything that can be represented with an image.

[penguinmoose]

@mxmou However, there can be an image that shows the difference - it doesn't need to be 100% a screenshot, right?

[penguinmoose]

hi-res-thumbnails - updated:

[Hans5958]

@penguinmoose I would like to see something like https://scratchaddons.com/assets/img/addons/redirect-mobile-forums.png does, would you mind doing that?

[Hans5958]

Addon images are going to be used inside SA in a future update. In preparation, it would be great if we could get all of the addons with an image! Thanks!

It may be related to ScratchAddons/ScratchAddons#364, maybe.

PS. You should try updating the progress message, to be fair.

[penguinmoose]

@Hans5958 Will do when there is time.

EDIT: Please see the updated original post. Does it look good?

[OregSamSas]

You should try updating https://github.com/ScratchAddons/website-v2/issues/4#issuecomment-838357630, to be fair.

Sorry I don't understand that, how did you mean to update the progress message, if we don't have perms for that? (As I think, since It seems to be Colaber's post.) Or you didn't mean us even?

[CST1229]

fix-uploaded-svgs: (images taken in https://scratch.mit.edu/projects/447085841, the project which was linked in the original PR that added this addon)

[OregSamSas]

Ok CST maybe you are a little bit better at this... I don't know why I'm still trying to make a proper addon image... /½j

[DNin01]

Got an image of zebra-striping.

[OregSamSas]

Got an image of zebra-striping.

I think the one on the website is better, because yours isn't cropped to 400×300 even (Instead it is 400×400). Sorry for disliking, but maybe you thought there isn't any image for zebra-striping yet, which is not true thanks to Samq64. (If there's anything I'm wrong in, feel free to correct me.)

[DNin01]

Got an image of zebra-striping.

I think the one on the website is better, because yours isn't cropped to 400×300 even (Instead it is 400×400). Sorry for disliking, but maybe you thought there isn't any image for zebra-striping yet, which is not true thanks to Samq64. (If there's anything I'm wrong in, feel free to correct me.)

Oh... whoops! Also just realized there was a PR to add 1.28 addon images, but they didn't appear on scratchaddons.com for some reason.

[Samq64]

It got merged after your comment, but the PR was already open.

[Hans5958]

You know what?

I would like to see the version of zebra-stripping without the green flag block get cropped. I think it can be removed in favor of the main subject.

[Hans5958]

Please see the updated original post. Does it look good?

@penguinmoose That's really good. I would see it live soon.

@CST1229 Will also putting it live soon.

[Hans5958]

Heads up: I'm now accepting higher quality images with a minimum size of 400x300, as long as the aspect ratio is 4:3.

Specifically, this point has been changed to this.

4. The image has an aspect ratio of 4:3 and a size of at least 400x300.

[CST1229]

zebra-striping: I think the addon's image should also showcase reporter/boolean striping.

[CST1229]

no-script-bumping

[OregSamSas]

I think the addon's image should also showcase reporter/boolean striping.

But then, also sensing blocks, etc. Like reporters with (I forgot again how is it called) blocks

Like this:

no-script-bumping

Best image made for SA ever!

[OregSamSas]

So here is my proposal for zebra-striping:

Ok this is still a half-joke thing...

[nexensys]

paint-snap:

[WorldLanguages]

@ErrorGamer2000 Let's wait until the addon is merged before taking screenshots

[mxmou]

@RIMOPA Could you make another screenshot with website dark mode and customizable colors disabled?

[RIMOPA]

@RIMOPA Could you make another screenshot with website dark mode and customizable colors disabled?

Oh, sorry better-emojis:

[CST1229]

Also, I don't really think the image for better-emojis should showcase the emoji picker.

[DNin01]

Here is an image for a hard-to-display addon: no-script-bumping

[DNin01]

Some more images: disable-paste-offset and disable-auto-save

(I kinda want a better disable-auto-save image than the one I had, though)

[Jazza-231]

Uh hi, got some images ig? rename-broadcasts, jump-to-def, and vol-slider

Not sure if these are any good, but I'm fairly certain that they are within the requirements. Some have been edited slightly to make a better screenshot.

[iqnite]

vol-slider

[Hans5958]

Before I merge things, I just revised the rule to try keep the dimensions round, like 400x300, 440x330, 480x360, 520x390, etc, in response of there are some dimensions such as 537x403. I have to adjust some of it, so it takes time, but if you guys want to do it yourself, then go ahead.

@iqnite I saw both dark mode and pause button there. Keep in one addon per image, please. I perhaps going to use @Jazza-231's on this one.

[Hans5958]

Finally got time to push the submitted images. The other ones that I didn't upload is either I don't satisfied with them, or I prefer the ones that are done on #245.

I chose CST's zebra-stripping for better clarity, as I feel having all of the possible variations would be too much for general readers.

I chose CST's no-script-bumping. While it may too much for some, I think DNin01's version would still unclear for me to be obvious enough. While CST is also not absolutely obvious, I say that it is slightly better than the latter.

I haven't included paint-snap as I'm not sure if it is how it looks (haven't checked it). LMK if this is how the release looked.

Also on the same round is I remaster some of the images: e2964db53e0edc12b4ae01937215ef25a8baff50. I did this with screenshot tool on the developer tools. I use the DPS of 4, except when the image exceeds 1600 x 1200 (4x of 400x300), in which I fallback to the DPS of 3. In case of anyone wanted to do it as I do, you can check how to take these screenshots with the DPS you want by following the guide on these links.

• https://imagesuggest.com/blog/take-high-resolution-screenshots/
• https://megamorf.gitlab.io/2022/02/16/take-high-resolution-screenshots-of-websites/

As a final note, I have edited the guidelines slightly so it is more clear. Probably one important thing to point out is the fifth one: "Keep edits in minimum, while trying to make it so it isn't awkward."

[CST1229]

number-pad

[mybearworld]

middle-click-popup

paint-snap (The one that has been commented here is an old version)

opacity-slider

message-filters (Shows everything instead of only a part)