stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move documentation files from custom to content directory

Browse source
This commit is contained in:
Ruben 2025-10-03 13:12:38 +02:00
parent cea2c167ff
commit c501635912
32 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

140
custom/docs/utvikling/hvordan/add-images/page.md
View file

@ -1,140 +0,0 @@
# 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)
```