Slider Standards for Project Pages (Kirby)

This document defines the procedure and standards for preparing, storing, and publishing Slider images in project pages.

1. Image Collection Procedure

Source: Images must be provided by the client, created in-house, or sourced from verified stock libraries.
Responsibility: The project manager is responsible for collecting, validating, and approving images before integration.
Storage Location: /content/projects/{project-name}/slider/
Naming Convention:
slider-01.jpg, slider-02.jpg, …
If updated, use version suffix: slider-01-v2.jpg.

2. Image Quality and Format

Preferred Format:
WebP (optimized for performance).
JPG fallback when required.
Resolution Standards:
Desktop: 1920x1080 px (or higher, keeping aspect ratio).
Tablet: ≥1200 px width.
Mobile: ≥768 px width.
Weight: Each image should be ≤400 KB after compression.
Compression: Use TinyPNG or Kirby’s ImageMagick integration.

3. Caption Standardization

Fields in Blueprint:
caption_title: Short, clear title (e.g., Warehouse Installation).
caption_text: Brief description, max 15 words.
Style:
Informative, concise, no duplication of Quick Facts.
Multilingual when site supports translations.

4. Kirby Integration

Example blueprint fields:

fields:
slider_images:
  label: Slider Images
  type: files
  multiple: true
  layout: cards
  uploads:
    template: slider-image
caption:
  label: Caption
  type: text

Use srcset for responsive image loading.
Ensure each image includes alt text for accessibility and SEO.
Images can be reordered via drag & drop in the panel.

Perfecto 🙌 Aquí tienes el documento base en Markdown, listo para copiar al repo (ej. docs/slider-standards.md):

# Slider Standards for Project Pages (Kirby)

This document defines the procedure and standards for preparing, storing, and publishing **Slider images** in project pages.

---

## 1. Image Collection Procedure
- **Source**: Images must be provided by the client, created in-house, or sourced from verified stock libraries.
- **Responsibility**: The project manager is responsible for collecting, validating, and approving images before integration.
- **Storage Location**:

/content/projects/{project-name}/slider/

- **Naming Convention**:
- `slider-01.jpg`, `slider-02.jpg`, …
- If updated, use version suffix: `slider-01-v2.jpg`.

---

## 2. Image Quality and Format
- **Preferred Format**:
- `WebP` (optimized for performance).
- `JPG` fallback when required.
- **Resolution Standards**:
- Desktop: **1920x1080 px** (or higher, keeping aspect ratio).
- Tablet: **≥1200 px width**.
- Mobile: **≥768 px width**.
- **Weight**: Each image should be **≤400 KB** after compression.
- **Compression**: Use [TinyPNG](https://tinypng.com/) or Kirby’s ImageMagick integration.

---

## 3. Caption Standardization
- **Fields in Blueprint**:
- `caption_title`: Short, clear title (e.g., *Warehouse Installation*).
- `caption_text`: Brief description, max 15 words.
- **Style**:
- Informative, concise, no duplication of Quick Facts.
- Multilingual when site supports translations.

---

## 4. Kirby Integration
Example blueprint fields:
```yaml
fields:
slider_images:
  label: Slider Images
  type: files
  multiple: true
  layout: cards
  uploads:
    template: slider-image
caption:
  label: Caption
  type: text

Use srcset for responsive image loading.
Ensure each image includes alt text for accessibility and SEO.
Images can be reordered via drag & drop in the panel.

5. Publication Checklist

Before publishing the project slider, verify:

All images are in WebP format with JPG fallback.
Minimum resolution 1920px width.
File size ≤400 KB.
Naming convention followed.
Captions are present and consistent.
Alt text is descriptive and SEO-friendly.

✅ This procedure is first applied to the Fulterer project as a pilot case.

6. Prompt:

You are a front-end expert familiar with Kirby, BEM methodology, SCSS best practices, and modern responsive image techniques.

Context:

We’re working on the “Slider” block in our Kirby-based project pages (e.g., the Fulterer project).
We recently defined image standards (WebP + JPG fallback, 1920px width minimum, ≤400 KB, srcset, descriptive alt text).
We also specified caption guidelines (short titles, descriptions, blueprint fields).
Style should follow BEM naming and be implemented in SCSS.

Your Task:

Review the current implementation of the Slider block (both PHP templates and SCSS).
Evaluate whether:
- Image handling uses responsive srcset and fallback formats appropriately.
- Naming conventions in HTML and CSS follow BEM (block__element--modifier).
- SCSS structure is modular, maintainable, avoiding duplication and adhering to best practices.
- Captions are integrated correctly (title + description), with proper blueprint field usage.
If there are issues or improvements needed, propose concrete code adjustments:
- Suggest improved class names or BEM structure if needed.
- Provide sample SCSS refactorings.
- Enhance image markup for better accessibility, SEO, or performance.
Explain the reasoning behind each suggestion and reference relevant best practices.

Goal: Ensure the Slider block is clean, scalable, stylable via SCSS, and consistent with our standards.

Now, please start by reviewing the existing code.

You are a Kirby expert, BEM methodology, SCSS best practices, and modern responsive image techniques.