140 lines
2.9 KiB
Markdown
140 lines
2.9 KiB
Markdown
# 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
|
|
|
|
```
|
|
|
|
### 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
|
|
|
|
```
|
|
|
|
### JPEG
|
|
Bruk JPEG for fotografier:
|
|
|
|
```markdown
|
|
|
|
```
|
|
|
|
### PNG
|
|
Bruk PNG for grafikk med gjennomsiktighet:
|
|
|
|
```markdown
|
|
|
|
```
|
|
|
|
### SVG
|
|
Bruk SVG for vektorgr grafikk (logoer, ikoner):
|
|
|
|
```markdown
|
|
|
|
```
|
|
|
|
## 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
|
|
|
|
```
|