---
name: wiki-images
description: Скачивание изображений с веб-страниц и вставка их в статьи базы знаний wp-knowledge.
---

# wiki-images

Скачивание изображений с веб-страниц-источников и добавление их в статьи базы знаний wp-knowledge.

## Когда использовать

- «скачай картинки с этой страницы»
- «добавь картинки в статью»
- Пользователь указывает URL-источник и целевую статью

## Процесс

### Входные данные

Пользователь указывает:
1. **URL страницы-источника** — откуда брать картинки
2. **Целевая статья** — путь в `src/content/docs/` (например `testing/e2e.md`)
3. **Папка для файлов** — `src/content/images/`

### Шаги

1. **Открыть страницу-источник** через web fetch или browser
2. **Найти изображения** — все `<img>` на странице, оценить какие стоит сохранить исходя из целевой статьи (схемы, скриншоты, диаграммы — не иконки и не декор)
3. **Скачать** каждое изображение через `exec`:
   ```bash
   curl -sLo "src/content/images/descriptive-name.png" "https://example.com/image.png"
   ```
   - Имя файла: descriptive-kebab-case по смыслу (например, `playwright-config-setup.png`)
   - Формат: оригинальный (png/jpeg/webp/svg)
4. **Обновить целевую статью** в `src/content/docs/`:
   - Добавить изображения с относительным путём от статьи: `![alt](../../images/filename.png)` (корректировать `../` под глубину вложенности)
   - Вставить логично в структуру статьи (рядом с релевантным текстом)
5. **Подтвердить** пользователю: сколько картинок, пути, какие статьи обновлены

## Пути

Project root is the workspace root (e.g. `~/Projects/wp-knowledge`)
- **Изображения:** `src/content/images/`
- **Статьи:** `src/content/docs/`

## Пример

```
User: скачай картинки с https://example.com/article и добавь в testing/e2e.md

→ Открываю страницу, нахожу 3 изображения
→ Скачиваю в src/content/images/:
   - playwright-test-editor.png
   - wp-env-config.png
   - e2e-results.png
→ Обновляю testing/e2e.md — добавил `![Playwright Test Editor](../../images/playwright-test-editor.png)`
```

## Правила

- Не скачивать иконки, фавиконки, декоративные элементы, лого навигации
- Предпочитать информативные изображения: скриншоты, диаграммы, схемы, примеры кода в виде картинки
- Изображения класть в `src/content/images/`
- В статье ссылаться относительным путём: `../../images/filename.png` (где `../` = на один уровень вверх от `docs/category/`)