mirror of
https://codeberg.org/Codeberg/Documentation.git
synced 2026-06-16 05:13:54 -07:00
da1b77aa6a
closes #238 Co-authored-by: pat-s <patrick.schratz@gmail.com> Co-authored-by: Patrick Schratz <pat-s@noreply.codeberg.org> Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/377 Co-authored-by: crapStone <crapstone01@gmail.com> Co-committed-by: crapStone <crapstone01@gmail.com>
52 lines
2.7 KiB
Markdown
52 lines
2.7 KiB
Markdown
---
|
|
eleventyNavigation:
|
|
key: HowToMakeScreenshots
|
|
title: How to make screenshots for Codeberg Documentation?
|
|
parent: ImprovingTheDocumentation
|
|
order: 15
|
|
---
|
|
|
|
Screenshots for Codeberg Documentation should follow the guidelines explained in
|
|
[Kesi Parker's excellent article](https://medium.com/technical-writing-is-easy/screenshots-in-documentation-27b45342aad8).
|
|
|
|
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](/improving-documentation/docs-contributor-faq#how-should-files-be-named%3F).
|
|
|
|
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:
|
|
|
|
```bash
|
|
cwebp -lossless screenshot.png -o screenshot.webp
|
|
```
|
|
|
|
<br>
|
|
|
|
{% admonition "Note" "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`
|
|
|
|
{% endadmonition %}
|
|
|
|
If you prefer a GUI, there are [a number of options](https://en.wikipedia.org/wiki/WebP#Graphics_software) 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:
|
|
>
|
|
> ```html
|
|
> <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>
|
|
> ```
|