innhold/content/docs/utvikling/hvordan/add-images/page.md

# Hvordan legge til bilder

Lær hvordan du legger til og administrerer bilder i PnP.

## Grunnleggende bildebruk

### Legg til bilder i samme mappe som innholdet

Den enkleste måten å legge til bilder på er å plassere dem i samme mappe som innholdsfilen:

```
/content/blogg/mitt-innlegg/
  ├── article.md
  ├── bilde1.jpg
  └── bilde2.webp
```

Deretter refererer du til dem i markdown:

```markdown
![Beskrivelse av bildet](bilde1.jpg)
```

### Relative stier

PnP sikrer at relative stier fungerer korrekt ved å automatisk legge til skråstrek på slutten av URL-er. Dette betyr at bilder i samme mappe alltid fungerer.

## Forsidebilder (Cover images)

For blogginnlegg og artikler kan du legge til et forsidebilde som vises i listevisninger:

1. Navngi bildet `cover.jpg`, `cover.webp`, `cover.png`, eller `cover.gif`
2. Plasser det i samme mappe som innholdet
3. PnP viser det automatisk i listevisninger

```
/content/blogg/mitt-innlegg/
  ├── article.md
  ├── cover.webp
  └── andre-bilder.jpg
```

## Anbefalte bildeformater

### WebP
Bruk WebP for beste kompresjon og kvalitet:

```markdown
![Beskrivelse](bilde.webp)
```

### JPEG
Bruk JPEG for fotografier:

```markdown
![Foto](foto.jpg)
```

### PNG
Bruk PNG for grafikk med gjennomsiktighet:

```markdown
![Logo](logo.png)
```

### SVG
Bruk SVG for vektorgr grafikk (logoer, ikoner):

```markdown
![Ikon](ikon.svg)
```

## Optimalisere bilder

### Komprimering
Komprimer bilder før du laster dem opp:

- JPEG: Bruk 80-85% kvalitet
- WebP: Bruk 80-85% kvalitet
- PNG: Bruk verktøy som `pngcrush` eller `optipng`

### Responsiv størrelse
Skalér bilder til passende størrelse:

- Full bredde: Maks 1920px bredde
- Forsidebilder: 800-1200px bredde
- Ikoner: 200-400px bredde

## Bruke bilder i egendefinerte maler

I listemaler er forsidebilder tilgjengelige via `$item['cover']`:

```php
<?php foreach ($items as $item): ?>
    <article>
        <?php if ($item['cover']): ?>
            <img 
                src="<?= $item['cover'] ?>" 
                alt="<?= htmlspecialchars($item['title']) ?>"
                loading="lazy"
            >
        <?php endif; ?>
        <h2><?= htmlspecialchars($item['title']) ?></h2>
    </article>
<?php endforeach; ?>
```

## Lazy loading

Bruk `loading="lazy"` for bilder som ikke er synlige umiddelbart:

```markdown
<img src="bilde.jpg" alt="Beskrivelse" loading="lazy">
```

Dette forbedrer sidelastingstiden betydelig.

## Tilgjengelige bildestier

Bilder plassert i innholdsmapper er automatisk tilgjengelige via URL-en:

```
/content/blogg/mitt-innlegg/bilde.jpg
→ dinside.no/blogg/mitt-innlegg/bilde.jpg
```

## Delte bilder

For bilder som brukes på flere sider, plasser dem i `/app/custom/assets/images/`:

```
/app/custom/assets/images/logo.svg
→ dinside.no/images/logo.svg
```

Deretter refererer du til dem med absolutte stier:

```markdown
![Logo](/images/logo.svg)
```