Press / to focus
Codeberg Documentation

Getting Started with Codeberg
What is Codeberg? Your First Steps on Codeberg Install Git Your First Repository The Basics of Issue Tracking Integrated Wiki Email Settings Licensing on Codeberg Frequently Asked Questions
Collaborating with Others
Citable Code Pull requests and Git flow Invite Collaborators Create and Manage an Organization Repository Permissions Resolve Conflicts
Working with Git Repositories
Using .gitignore Configuring Git Clone & Commit via CLI Clone & Commit via Web Merge multiple commits into one Tags and Releases Working with large files
Writing in Markdown
Introduction to Markdown Using Links Topics Preformatted Text Using Lists Using Images Tables in Markdown Markdown FAQ
Security
Setting up two-factor authentication Adding an SSH key to your account Verifying you're connected to Codeberg using SSH fingerprints Adding a GPG key to your account
Codeberg Pages
Using Custom Domains Troubleshooting Example: Docs as Code with Sphinx Pushing output from SSGs into Codeberg Pages Redirects
Advanced Usage
Generating an Access Token Migrating Repositories Using Webhooks
Working with Codeberg's CI
Using Forgejo Actions (Self-hosted)
Integrations with Other Services
Integrating with Keycloak Integrating with Matrix Integrating with LiberaPay Integrating with Read the Docs
Codeberg Translate
Getting started Introduction to Weblate Manual Component configuration
Improving Codeberg
Contributing Code
Improving the Documentation
Style Guide How to create a new article? Can I preview my article? How to make screenshots for Codeberg Documentation? Documentation Contributor FAQ
Contact

How to make screenshots for Codeberg Documentation?

Screenshots for Codeberg Documentation should follow the guidelines explained in Kesi Parker's excellent article.

They should be created using the "Knut" demo account on codeberg-test.org. If you're a regular, trusted contributor to Documentation, you can find its credentials in a private repository in the knut organization on codeberg.org.

Otherwise, feel free to request screenshots being added when merging your PR. For that, please include TODO SCREENSHOT [of foo] in your article.

On the technical side, screenshots should ideally be available in both the WebP and PNG formats (WebP and JPEG for photographs), they should be in a large enough resolution so that text is clearly readable and their filenames should follow Codeberg Documentation's naming conventions.

Please put screenshots under assets/images/[section]/[article]/... where [section] and [article] are the kebab-cased names of the section or your article, respectively.

Codeberg Documentation uses the WebP format wherever possible, in order to increase page loading speed and reduce traffic due to its powerful compression.

To convert a screenshot to WebP, you can use the cwebp command line utility like this:

cwebp -lossless screenshot.png -o screenshot.webp

How to install cwebp

As cwebp cli-tool is part of libwebp the package name might be different between different repositories, here's some tips how to install this tool:

  • On Debian/Ubuntu in apt repository by sudo apt install webp
  • On VoidLinux xbps repository by sudo xbps-install libwebp
  • On ArchLinux aur repository by sudo pacman -S libwebp

If you prefer a GUI, there are a number of options available, but please be sure that your GUI doesn't add thumbnails into the WebP file, which would inflate its size, rendering its key advantage meaningless.

At the time of writing, there is no support for webP images in Safari browsers. As a workaround, all images (except SVG) in Codeberg documentation are currently to be included using a <picture> tag, like so:

<picture>
  <source srcset="/assets/images/getting-started/issue-tracking-basics/issues-list.webp" type="image/webp" />
  <img src="/assets/images/getting-started/issue-tracking-basics/issues-list.png" alt="Issues List" />
</picture>

Hey there! 👋 Thank you for reading this article!

Is there something missing, or do you have an idea on how to improve the documentation? Do you want to write your own article?

You're invited to contribute to the Codeberg Documentation at its source code repository, for example, by adding a pull request or joining in on the discussion in the issue tracker.

For an introduction on contributing to Codeberg Documentation, please have a look at the Contributor FAQ.

© Codeberg Docs Contributors. See LICENSE