Images guidelines

Add images to Codewind documentation.

How do I create images?

1. Open the application or screen that you want to make an image of. If you're on a Mac, use Command + Shift + 4 to screen capture the part of the screen that you want.
2. Save the image with a descriptive file name and as a .png file in a convenient location on your computer.

How do I add images to the codewind-docs repo?

1. From the command line, create a new branch with which to add your image.
2. Adding an image is like adding a new Markdown file to the codewind-docs repo. See Where do I place images? for placing images in the correct folder.
3. Open the file in which you want to add the image so that it will appear on the website. To format your images correctly, see How do I format my images in Markdown?.
4. After you add your image, check in your change with the command line and go to GitHub to open a pull request just like you would for a text edit.
5. Request a review and merge your pull request.
6. From your command line, run the ./serve.sh command and check the generated URL to make sure that the image appears the way you want it.

Where do I place images?

• If you want to add images to the documentation, save them in the docs/images folder.
• If you are adding many images to the same .md file or documentation section, consider creating a subfolder, such as how images/che-docs stores images that appear in the Codewind Che documentation.

How do I format my images in Markdown?

• Format: ![<image-description>](images/<subfolder>/<image-name>.<file-type>){:width="<number-of-pixels-wide>"}
• Example: ![Creating a Codewind project with IntelliJ](images/imagesfornews/intelliJ-techpreview.gif){:width="800"}
• If you insert images between numbered steps, to preserve the numbering when spacing out text and images, use a backslash immediately after the number to override and preserve the number of the step. 
  • 1\. Step 1
  • 2\. Step 2
  • 3\. Step 3 etc.
• If text is wrapping too tightly around images, add <br> at the end of the image formatting to indicate a line break. The line break keeps images on their own line so that text won't wrap next to them.
• If the image has a white background, consider using a border around the image. You can use the imageborder class. For example:
  • When only the image border is used: ![](images/runningapp.png){: .imageborder}
  • When more than one property is set for the image: ![image of the dependency microservice](images/blog/sneakpeakremotedevelopment.jpeg){:width="700px" .imageborder}

How can I make sure my images are good quality?

• Remember to crop out personal or confidential info, such as names or a bookmarks bar on a web browser, in your images.
• If cropping isn't an option, you might need to blur info out instead.
• If your image is white or has a white background, it will blend into the documentation page that it's on. To separate the image from the page, add a 1px black border around it.
• If you aren't sure how to blur part of an image or add the border, or if you don't have the software to do so, open an issue so the Codewind team can help.