cancel
Showing results for 
Search instead for 
Did you mean: 

Adding screenshots

Important: This article is obsolete and needs to be updated.

 

Screenshots improve articles by illustrating important concepts. Sometimes a user needs to see an image of a webpage, a logo or a button, not just read about it. Take a screenshot of the image and add it to the article you're writing.

 

Create screenshots on a computer or mobile device

To learn how to create screenshots for the Knowledge Base and what editing tools you can use, see How to make screenshots.

Add new screenshots to Knowledge Base articles

You can visit the Media Gallery and use the Upload a New Media File button to upload your screenshot image file. To insert an image from the Media Gallery into an article you're editing, type in [[Image:title]] (substitute the actual title of the image, instead of title) at the point where you want the image to appear. For details, see How to place images in an article.

You can also upload an image and insert it into an article while editing an article.

To upload the image:

  1. Begin writing or editing an article.
  2. Click Insert Media on the toolbar.
    InsertMedia
  3. The insert media dialog opens. Click Upload Media.
    UploadMedia2
  4. A new tab opens with an Upload New Media File dialog box. Click Browse. Select your image in your computer files.
    Browse
  5. A new dialog box opens. Give your Screenshot a title and a description. Click Upload File.
    Browse2

To add the image to an article:

  1. Begin writing or editing an article.
  2. Click Insert Media on the toolbar.
    InsertMedia
  3. Select an image from the gallery. Click Insert Media.
    InsertMedia2

Tips for adding screenshots

  • Don’t add screenshots to every concept. Just use them for concepts that need illustrations.
  • Screenshots should match what the user sees on the screen, which is sometimes different, depending on your operating system. See How to use For to show different screenshots for Windows, Mac and Linux users.
Customize this article

Firefox

Version History
Revision #:
4 of 4
Last update:
yesterday
Updated by:
 
Comments

See also the individual posts on tips for creating screenshots, starting here:

Apparently the method given in this article is "buggy" so I added the following alternate method:

{note}Note: You can also add a screenshot to an article by using an image that was previously uploaded to the Media Gallery. Simply find the image you want to use and then type in the [[Image:title]] markup yourself (substitute the actual name of the image, instead of title) at the point where you want to insert the image.{/note}

See

jujutsuka

A couple things:

  • I think we definitely need to add procedures for creating screenshots for Firefox for Android. I signed up to help with the KB specifically to work on FfA (is there some better acronym people use around here?), because I just got a Note 3 and I'm diggin' Firefox on it. We would need to discuss best practices for capturing screenshots and then transferring them off the device for editing, uploading, etc. Part of it comes from me not being very savvy with Jelly Bean yet, since the only Android phone I've had ran Froyo (up until I got my Note 3 a week ago), but I think KB writers would benefit from having a detailed guide on taking screenshots in FfA.
  • There's a slightly more efficient way to take/edit Windows screenshots. Set your white desktop background, but rather than just hitting PrtScrn and then cropping the image in Paint to include the window's drop shadow, do the following: Press Alt+PrtScrn to take a screenshot of only the currently active window, which includes the drop shadow. No need to crop that in Paint. Just add your callouts, etc., and save.

I can get the ball rolling on updating the KB articles for the above bullet points, but I'll need some time to learn the syntax and get going on it.

Any thoughts?

Thanks, Eric

The article should mention the preferred font size.

Also, it seems that, at least on Linux with KSnapshot, anti-aliasing, hinting, and/or sub-pixel rendering can affect the perceived font size in the resulting screenshot.

On the most visited article this is an animated GIF. https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-03-20-13-34-31-f41173.gif

It almost doesn't need to be localized if it wassent for that one frame with the pop up english text.

Anyway i asked on IRC for a program to make the GIF and i managed to make one. https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-12-04-02-00-31-165000.gif

With this program http://www.cockos.com/licecap/

Now i just learned about the program so cant say if it will blow up your computer the day after you install it so i will leave it up to someone else to put it in this article so people can make animated GIF.

Maybe it would be best to keep english text out of the GIF if possible so it doesn't need to be localized.

A little GIF animation can be fun.

scootergrisen said

On the most visited article this is an animated GIF. https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-03-20-13-34-31-f41173.gif

The image is Bookmark 29 Win, from Get started with Firefox - An overview of the main features. If you search the Media Gallery for GIF you'll find others, for example, Saved Passwords Win. That animated GIF was added to the Password manager article using this code: [[Image:Saved Passwords Win]]

This discussion probably belongs in the kbforum for the Adding screencasts article, which starts off, A screencast is a video or animated image of what is displayed on a computer screen to show readers what the instructions in knowledge base articles are telling them. However, that article is currently archived.

This article could be expanded to include how to create animated GIFs to add to KB articles, since the same Image: code is used. Only thing, this article is long enough, so updating Adding screencasts might be the better option.

I mentioned the above to Joni in another thread (with a link to this discussion):

scootergrisen said

Maybe it would be best to keep english text out of the GIF if possible so it doesn't need to be localized.

I don't think that's reasonable as a general rule. However, localizers are always free to NOT include images in their translations. That's mentioned in this article: https://support.mozilla.org/kb/Adding%20screenshots#w_screenshots-and-localization

The slug should properly be changed from "Adding screenshots" to "adding-screenshots".

scootergrisen said

The slug should properly be changed from "Adding screenshots" to "adding-screenshots".

Done.

Hooray!

I see that a new Creating and Adding Screenshots article was approved on January 20, 2016.

There's now a pending revision to update this article with the content of the newly-created article ... so that other article should either be deleted or archived. Related discussion: https://support.mozilla.org/en-US/kb/creating-and-adding-screenshots/discuss/6465 New article

Laucon

I completely agree. That was a bit of an error on my part. Once this article replacement is published I will delete the article that looks like it.

I figured you missed the fact that there was already an "adding screenshots" article. That's partially the fault of the KB software, which really should list possible duplicates when you create a new article and enter the title, like bugzilla does when you file a bug report. There may or may not be a pending SUMO bug report on that. If there isn't you should file one!

Anyway, if you don't mind a suggestion, I would try to keep whatever might still be useful in the articles you're changing. For example, I find it much easier to directly upload images to the Media Gallery any manually include them in articles using [[Image:title]].

The existing article includes this information:


Adding screenshots to articles = To upload an image, you can go to the Media Gallery and use the {button Upload a New Media File} button. To insert an image in an article you're editing, type in [[Image:title]] (substitute the actual title of the image, instead of title) at the point where you want the image to appear.

You can also upload and insert an image while editing an article. <snip>


Another suggestion, I would mention which OS version you are using for your "Taking screenshots ..." instructions (for example, Windows 10 or Mac OS X 10.11 El Capitan) like the current article does. If possible, I would also include a "More information link, such as Apple Support's How to take a screenshot on your Mac] page.

Something else that can confuse users: In the second half of the article, underneath "Add a Screenshot to an Article", you jump back to editing screenshots (cropping, resizing or outlining a section in red, which you call a "Grab"?) . The sections that talk about cropping in Preview, cropping in Paint, etc. should either mention the Operating system or be under the sections for that OS . Windows users don't have a "Preview" application. Conversely, Mac users don't have a "Paint" application.

Sorry for the long post!

Laucon

Thank you. Yeah, the fact that there are two similar screenshot articles is sorta my fault, but I'll get it sorted out by the time we publish the whole knowledge base.

Here's the bug about the KB software and creating duplicate articles:

Bug 1182645 - Auto-suggest existing article titles when creating new articles

I have an edit pending to add back removed info on using the Media Gallery, linked to How to place images in an article plus other edits.

I noticed that Lauren has a pending revision with the comment "I added a survey" but I don't see any changes in https://support.mozilla.org/en-US/kb/adding-screenshots/compare?locale=en-US&to=119027&from=116648 (I based my edit on her pending revision, anyway).

Edits including Android: I changed phone to device. Firefox works on Android Tablets, even Kindles


Linux I did briefly consider documenting, but consider it unnecessary because

  • Low usage. We will have fewer Linux users than other OS. Even when we do the GUI is now pretty similar since Australis, so we will rarely wish to add Linux specific images
  • Various distros. It would get complicated doing more than say a Ubuntu version.
  • User Technical ability. Linux is often installed manually; and maybe Firefox too; by the user. I am sure the majority of users would be able to figure out what to do from the Mac or Windows instructions.

Image size Minor inconsistency at present we state 620px once (without saying width, or longest dimension) then twice say 612px. The other article uses 612px. In fact longest dimension would not be a suitable term as users may then try to calculate the diagonal - that is after all used in screen size specifications.

Windows Snipping tool Is it worth mentioning that. The snipping tool generates png images, and will crop and annotate.

Software links Is it ok to expect users to understand Paint etc. or would it be better to make at least the first mention of each a link to Wikipedia or MS info ?

I added back Linux instructions since we do use Linux screenshots in articles. I also added wikipedia links for Paint and Preview, and some other edits, like 612 -> 620 pixels width and length, adding {key } markup and changing "Click" to "Press" for keyboard instructions.

John, since you use Linux, can you review?

AliceWyman said

I added back Linux instructions

I don't use Linux so I was going by the instructions in the How do I create a screenshot of my problem? article. I also added a hidden wiki comment to show the old instructions that were removed from this article, in case they're better then what I added and you or another editor wants to add them back.

Thanks for the edits Alice. One aim of the project was to make short simple documents.

As far as the Linux instructions are concerned I would be inclined to just cross link instead to the other article How do I create a screenshot of my problem?_create-a-screenshot-on-gnulinux i.e. /en-US/kb/how-do-i-create-screenshot-my-proble...

If we do put full information then I would suggest a direct copy from the other article and retain the remmed out comment about its origins, plus add a similar rem|wiki note in the other article, so editors and reviewers look at the articles in tandem.

The edits look fine to me, other than my doubts about the best course regarding Linux. However I am happy for you to choose. Nit

screenshots for Windows, 

Linux gets complicated, it is very much more pick 'n mix than is Windows or Mac.

It would be easier I think to keep details mainly in one place that can be updated, amended, maintained, &/or expanded as necessary. The other article even links to an external wikipedia article.

There are competing Windowing Systems on Linux. There is a choice of Desktop Environments (DE). As for the OS distro, depending what you look at maybe Debian or Ubuntu See(which is derived from Debian) has most users, or what about Mint that's top in this.

Gimp already mentioned in the article was an important part of the Gnome DE it is now ported to Windows and Mac. Debian has Gimp & Ubuntu used to have Gimp although it does not use a Gnome DE directly SeeUnity (Unless that's what you want * ) but of course Ubuntu can still have Gimp with whatever DE you use.

For instructions to be specific they need to take into account the OS distro, the DE & the choice of Apps installed. A I mentioned in a post above I think most Linux KB editors would not actually need the detail about the procedures and apps used for taking screenshots

There are further complications Debian by default uses Iceweasel an ESR based derivative of Firefox. Ubuntu uses its own Canonical Build of Firefox based on the Mozilla Release, and has an alternative Aurora build but they are never quite in step with Mozilla. They lag behind.

Now we need to consider are we only going to use screenshots from Mozilla builds, in our KB documents, or from the builds the end user is most likely to have installed. We could add such comments, but maybe not in what is intended to be a quick start guide. Or are we giving up on that and making the best of the revised articles. Somehow we need to be careful not to lose or omit vital information.

Depending on what is most popular, and how the competing Windowing systems pan out things may change in the future. At least the external wiki we link to should update without us needing to do anything.

John, Since you asked me to choose, I'll approve my pending edit with the Linux instructions copied from the How do I create a screenshot of my problem? article.

John99 said

Thanks for the edits Alice. One aim of the project was to make short simple documents. As far as the Linux instructions are concerned I would be inclined to just cross link instead to the other article How do I create a screenshot of my problem?_create-a-screenshot-on-gnulinux i.e. /en-US/kb/how-do-i-create-screenshot-my-proble... <snip>

What about if we remove ALL of the content about how to create and edit screenshot images, and move it to another "How to contribute" article? We already have How to make screenshots which was basically a duplicate of the "How do I create a screenshot of my problem?" article.

If we do that then this article would be a much shorter article with most of the content being from the Add new screenshots to Knowledge Base articles section.

I made some revisions to How to make screenshots (we can make more). We should probably start a new thread on this.

That sounds a very good idea. I am just a little concerned that as Joni is finally starting to get involved, that if we are not careful we may move too fast.

So maybe start another thread but hold off on major edits (pending edits can't harm though) for a couple of working days. Also we have not had any further response from Lauren and we don't want to be moving in different directions and reversing one anothers' edits.

I am still not really sure if the plan did ever entail creating a quick start guide in addition to a full guide.

Or was it intended to rework the current full guidelines by making some updates, but mainly just splitting them into shorter articles, and adding a simple introductory entry point. That seems to be what Lauren was actually doing.

The How do I create a screenshot of my problem? was intended to help people in the support forum. Mostly they just need to provide a simple full screen screenshot. So I see the point in a separate article How to make screenshots with that one being aimed at contributors and needing more details.

(Not directly related. Is it agreed we do not start titles with How Does that have repercussions with categories, it may be harder to differentiate a How to article from a Troubleshooting article, as it will now be based on content. Are we going to actively rename articles or only as they are edited.
More importantly,, and even further off topic why have we not improved and expanded those categories long ago?)

This came up in another thread, where I wrote:

What about if we remove ALL of the content about how to create and edit screenshot images, and move it to another "How to contribute" article? We already have How to make screenshots which was basically a duplicate of the "How do I create a screenshot of my problem?" article. If we do that then this article would be a much shorter article with most of the content being from the Add new screenshots to Knowledge Base articles section. I made some revisions to How to make screenshots (we can make more). We should probably start a new thread on this.

John99 said this in the other thread:

That sounds a very good idea. I am just a little concerned that as Joni is finally starting to get involved, that if we are not careful we may move too fast. So maybe start another thread but hold off on major edits (pending edits can't harm though) for a couple of working days. Also we have not had any further response from Lauren and we don't want to be moving in different directions and reversing one anothers' edits. I am still not really sure if the plan did ever entail creating a quick start guide in addition to a full guide. Or was it intended to rework the current full guidelines by making some updates, but mainly just splitting them into shorter articles, and adding a simple introductory entry point. That seems to be what Lauren was actually doing. The How do I create a screenshot of my problem? was intended to help people in the support forum. Mostly they just need to provide a simple full screen screenshot. So I see the point in a separate article How to make screenshots with that one being aimed at contributors and needing more details. (Not directly related. Is it agreed we do not start titles with How Does that have repercussions with categories, it may be harder to differentiate a How to article from a Troubleshooting article, as it will now be based on content. Are we going to actively rename articles or only as they are edited.
More importantly,, and even further off topic why have we not improved and expanded those categories long ago?)

We can always change the title of How to make screenshots from "How to make screenshots" to something else, which we can discuss here or in the new thread I started in the How to make screenshots article forum.

We should probably go slowly, until we get more feedback, hopefully from Joni.

I created a new thread, "Move content about creating screenshots to another article".

I cross-linked this thread from the How to make screenshots article Discussion forum.

I have edits pending review, both in this article and in How to make screenshots, to move content. Hopefully Joni will see this soon and review my changes.

I added some breaks before images (and removed some double spaces) in order to make sure all images start below the preceding text, not next to some part of it. See the line that says "A new dialog box opens. Give your Screenshot a title and a description. Click Upload File" in step 5, or the one with "Rectangular Selection" to see an example.

This behavior appears to be unpredictable and even worse when localizing, i.e. there may be more of such appearances when using the en-US source in the l10n editor, while they remain unnoticed (=do look fine) when editing en-US.

I made an edit to your revision (both pending) to use #; instead of line breaks per https://support.mozilla.org/en-US/kb/how-place-images-article

AliceWyman said

I made an edit to your revision (both pending) to use #; instead of line breaks per https://support.mozilla.org/en-US/kb/how-place-images-article

For info: this is what I try to avoid (or I would have used that markup), since images in a numbered list cause inappropriate text-image spacing when using #;, which turned out to be abusive syntax according to bug 1105227 (see comment 4).

Basically this markup causes "text to get squeezed in between images". Adding one <br> instead doesn’t solve the issue though (the spacing is similar to #;), but using 2 would, though that spacing would become slightly too big, i.e. a little more than one proper text-text line distance, as well as text below an image to appear closer to the image, making it look like that’s related, unless the image is also followed by two breaks.

If you remove the # in line 30 for a preview (or in general: after any last step, which shouldn’t be susceptible for the issue since no step follows), you’ll end up with proper spacing before the last image. Removing a # for any image in a step would break the numbered list though.

For the reason of that bug, I tend to use additional breaks in local versions if text appears squeezed really badly (often depending on the image), and I keep using "old" markup (adding step numbers manually and additional lines) for any TB article in need of an edit until the bug is solved.

Thanks for the bug report. I'll delete my pending revision,

I have an edit to add the following to How to place images in an article

https://support.mozilla.org/en-US/kb/how-place-images-article/revision/119960


In some cases, using the above wiki markup (a hash followed by a colon or semi-colon) in a numbered list may cause inconsistent vertical line spacing (bug 1105227). In such cases, you may need to use use line breaks instead, like this:

#This is a step.<br>[[Image:The Image]]
#This is the next step.


Can you (or someone else) review my edit?

P.S. I made a new revision: https://support.mozilla.org/en-US/kb/how-place-images-article/revision/119999

I also started a thread in the How to place images in an article forum: https://support.mozilla.org/en-US/kb/how-place-images-article/discuss/6559 Update due to bug 1105227 ?

Alice, thanks for the above. Just to elaborate though: I was only expressing my thoughts above, so feel free to use the #; markup after all if you think it’s best.

We could work around that bug allright but as you’ll understand, some may disagree, especially since no perfect solution seems to exist. One avantage of keeping the #; image markup is that if the bug gets fixed, the articles will be OK. I’m not sure how long it will take to fix the bug though. In fact, most FF articles use numbered lists already, whereas TB articles don’t (yet).

To be honest I didn’t notice the "How to place images in an article" article so was a bit surprised to see it (only the Markup chart was known), but glad to see the #; is mentioned at least somewhere. Editing the "How to place images" article may be a good idea, but may also depend on the basic decision on how to handle them. Maybe Joni has some thoughts?

As for your pending edit, #This is a step.<br>[[Image:The Image]] #This is the next step. will not solve the issue (it will cause a similar space as "#;"). I did use it allright, but not with the intention of achieving proper spacing.

Tonnes said

As for your pending edit, #This is a step.<br>[[Image:The Image]] #This is the next step. will not solve the issue (it will cause a similar space as "#;"). I did use it allright, but not with the intention of achieving proper spacing.

So, what is the workaround for the bug? Should we even mention it in How to place images in an article?

I made yet another revision, https://support.mozilla.org/en-US/kb/how-place-images-article/review/120012

Hopefully Joni will weigh in, either here or in the How to place images in an article discussion thread.

I went through the past discussions, and I'm still confused about why this article doesn't use for tags (aka showfor). Is there a specific reason?

Chris Ilias said

I went through the past discussions, and I'm still confused about why this article doesn't use for tags (aka showfor). Is there a specific reason?

What part of this article needs {for} tags?

If you want to add {for} tags to parts of this article then you would need to add Firefox in the article Description under "Relevant to:"

Related discussion: https://support.mozilla.org/en-US/kb/how-to-use-for/discuss/6018

Oops, wrong article. :)

This article is currently obsolete.  It needs to be updated for the new Mozilla Support site on Lithium.