'''Let's keep it simple!''' We've done some work on image display in order to keep the markup simple and not require a lot of tricks to get to display correctly. There's no need to add breaks around images. Here's how it works: *If you are placing an image in a line of text, it should be no taller than 16 pixels. *If you are placing an image between two sentences or in a list (ordered or unordered), it should be set off with a semicolon. =Examples= ==Markup for an image in a set of steps== This is what the wiki markup for "setting an image off with a semicolon" looks like:<br><br> <code> <nowiki>#</nowiki>This is a step.<br> <nowiki>#;</nowiki><nowiki>[[</nowiki>Image:The Image<nowiki>]]</nowiki><br> <nowiki>#</nowiki>This is the next step.<br> </code> ==Example of an image in a set of steps== This is an example with longer text and a longer image: #This is a step. And here are some additional words so you can see what they look like running above the image. #;[[Image:mixed content on android]] #This is the next step, again, with extra words so you can see what they look like running below the image. ==Inline image example== *'''16px high:''' This is some text. The following image is just placed inline [[Image:edit contact]]. And this is some more text just so that we have more text. Well, that's really not enough text so I'm adding some more here so that we have enough for testing. = Complete Knowledge Base Guidelines = If you're interested in editing and writing documentation, here are a few resources that should help explain how we do things: '''Create new support articles''' * [[Write articles for the Knowledge Base]] — Guide to writing techniques and styles that we use to make articles more engaging and effective. For the mechanics of actually creating or editing articles, see: ** [[Create a new Knowledge Base article]] – Steps for creating a new article along with some sample wiki markup to get you started ** [[Anatomy of a Knowledge Base article]] – Explains the basics of how articles are built ** [[Article Description]] - Explains how to write description for a support article '''Improve existing support articles''' * [[Improve the Knowledge Base]] - Learn how to improve SUMO Knowledge Base * [[Edit a Knowledge Base article]] - Steps for editing an existing article '''Other guidelines''' * [[About the Knowledge Base]] — An overview of the mechanics of our Knowledge Base * [[Article Review Guidelines]] - Reviewer guidelines for Knowledge Base * [[How to make screenshots]] — A step-by-step guide to creating screenshots to use in articles * [[Adding screenshots]] — Explains how to add screenshots to articles * '''[[How to place images in an article]] — Explains how to get screenshots and other images to display correctly in articles (You're here!)''' * [[Markup cheat sheet]] – The most commonly used wiki markup in our articles * [[Markup chart]] — Wiki markup reference. It gives examples and shows the markup that produces them * [[How to use For|How to use <nowiki>{</nowiki>for}]] — Special wiki markup that lets us show instructions ''for'' different application versions (for example, Firefox 40) and operating systems such as Windows and Mac OS * [[Using Templates]] — Templates are reusable pieces of content. You can include a complicated set of step-by-step instructions in multiple articles by using a template. * [[When and how to use keywords to improve an article's search ranking]] — Explains when adding keywords to an article is appropriate * To see more guidelines on Knowledge Base contribution, click [https://support.mozilla.org/en-US/products/contributor/support-articles here]

Let's keep it simple! We've done some work on image display in order to keep the markup simple and not require a lot of tricks to get to display correctly. There's no need to add breaks around images. Here's how it works:

• If you are placing an image in a line of text, it should be no taller than 16 pixels.
• If you are placing an image between two sentences or in a list (ordered or unordered), it should be set off with a semicolon.

Examples

Markup for an image in a set of steps

This is what the wiki markup for "setting an image off with a semicolon" looks like:

#This is a step.
#;[[Image:The Image]]
#This is the next step.


Example of an image in a set of steps

This is an example with longer text and a longer image:

1. This is a step. And here are some additional words so you can see what they look like running above the image.

   

2. This is the next step, again, with extra words so you can see what they look like running below the image.

Inline image example

• 16px high: This is some text. The following image is just placed inline . And this is some more text just so that we have more text. Well, that's really not enough text so I'm adding some more here so that we have enough for testing.

Complete Knowledge Base Guidelines

If you're interested in editing and writing documentation, here are a few resources that should help explain how we do things:

Create new support articles

• Writing guide for Knowledge Base articles — Guide to writing techniques and styles that we use to make articles more engaging and effective. For the mechanics of actually creating or editing articles, see:
  • Create a new Knowledge Base article – Steps for creating a new article along with some sample wiki markup to get you started
  • Anatomy of a Knowledge Base article – Explains the basics of how articles are built
  • Article Description - Explains how to write description for a support article

Improve existing support articles

• Improve the Knowledge Base - Learn how to improve SUMO Knowledge Base
• Edit a Knowledge Base article - Steps for editing an existing article

Other guidelines

• About the Knowledge Base — An overview of the mechanics of our Knowledge Base
• Article review and approval guidelines - Reviewer guidelines for Knowledge Base
• How to make screenshots — A step-by-step guide to creating screenshots to use in articles
• Add images and screenshots to Knowledge Base articles — Explains how to add screenshots to articles
• Add images and screenshots to Knowledge Base articles — Explains how to get screenshots and other images to display correctly in articles (You're here!)
• Markup cheat sheet – The most commonly used wiki markup in our articles
• Markup chart — Wiki markup reference. It gives examples and shows the markup that produces them
• How to use {for} — Special wiki markup that lets us show instructions for different application versions (for example, Firefox 40) and operating systems such as Windows and Mac OS
• Using Templates — Templates are reusable pieces of content. You can include a complicated set of step-by-step instructions in multiple articles by using a template.
• When and how to use keywords to improve an article's search ranking — Explains when adding keywords to an article is appropriate
• To see more guidelines on Knowledge Base contribution, click here